Отправка начальной загрузки модальных нескольких данных с нескольких кнопок связи ASP - PullRequest
Новая
       2

Отправка начальной загрузки модальных нескольких данных с нескольких кнопок связи ASP

0 голосов
/ 06 марта 2019

Мне нужна помощь, чтобы понять, как передать данные в модальное всплывающее окно с помощью нескольких кнопок.Я создал код, который будет делать это для одной кнопки, но я не могу понять, как сделать jQuery универсальным, чтобы управлять этим при нажатии любой кнопки.Моя конечная цель состоит в том, чтобы заставить это работать с ASP davaview, но я сначала заставлю эту ключевую часть работать.

Вот jQuery. 

<script>
    $(document).on("click", ".open-AddBookDialog", function () { 
        var sTrainingSwipeID = $('#btnExtend_1').data('extend').TrainingSwipeID;
        var sCurrentDate = $('#btnExtend_1').data('extend').CurrentDate;

        $(".modal-body #TrainingSwipeID").val(sTrainingSwipeID);
        $(".modal-body #CurrentDate").val(sCurrentDate);
    });
</script>

Вот 2 кнопки ссылки, которые яЯ играю с. 

<asp:LinkButton ID="btnExtend_1" href="#addBookDialog" runat="server" Text="Extend" 
    class="open-AddBookDialog btn btn-outline-secondary btn-med" 
    data-extend='{"TrainingSwipeID":1,"CurrentDate":"03/07/2019"}' 
    data-toggle="modal" data-target="#myModal" />

<asp:LinkButton ID="btnExtend_2" href="#addBookDialog" runat="server" Text="Extend" 
    class="open-AddBookDialog btn btn-outline-secondary btn-med" 
    data-extend='{"TrainingSwipeID":2,"CurrentDate":"03/07/2017"}' 
    data-toggle="modal" data-target="#myModal" />

Также вот модал, который я использую. 

<div runat="server" id="divButtonPopup">                 

    <!-- The Modal -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Extend Date</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body"> 
                <asp:HiddenField  ID="TrainingSwipeID" runat="server"></asp:HiddenField>
                <asp:TextBox ID="CurrentDate" runat="server"></asp:TextBox>

            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <asp:Button ID="btnExtendFromModal" runat="server" Text="Extend" class="btn btn-primary" OnClick="btnExtendDate_Click" UseSubmitBehavior="false" data-dismiss="modal" />
                <button type="button" class="btn btn-outline-secondary btn-med" data-dismiss="modal">Close</button>
            </div>

            </div>
        </div>
    </div>
</div>

ОБНОВЛЕНИЕ: Вот полный код с предложениями по редактированию от gaetanoM.С этим кодом модал появляется из любой кнопки, но ничего не содержится в текстовых полях TrainingSwipeID или CurrentDate в модале. 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Time Entry</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script>
        $('#myModal').on('show.bs.modal', function (e) {
            var ele = e.relatedTarget;
            var sTrainingSwipeID = $(ele).data('extend').TrainingSwipeID;
            var sCurrentDate = $(ele).data('extend').CurrentDate;

            $("#TrainingSwipeID").val(sTrainingSwipeID);
            $("#CurrentDate").val(sCurrentDate);
        });
    </script>
</head>
<body>
<form id="form1" runat="server">
    <div class="container-fluid">

        <a id="btnExtend_1" class="open-AddBookDialog btn btn-outline-secondary btn-med" href="#addBookDialog"
           data-extend='{"TrainingSwipeID":1,"CurrentDate":"03/07/2019"}'
           data-toggle="modal" data-target="#myModal">Extend1</a>
        <a id="btnExtend_2" class="open-AddBookDialog btn btn-outline-secondary btn-med" href="#addBookDialog"
           data-extend='{"TrainingSwipeID":2,"CurrentDate":"04/07/2017"}'
           data-toggle="modal" data-target="#myModal">Extend2</a>

        <div runat="server" id="divButtonPopup">

            <!-- The Modal -->
            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!-- Modal Header -->
                        <div class="modal-header">
                            <h4 class="modal-title">Extend Date</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <!-- Modal body -->
                        <div class="modal-body">
                            <input type="text"  id="TrainingSwipeID" />
                            <input type="text" id="CurrentDate" />

                        </div>
                        <!-- Modal footer -->
                        <div class="modal-footer">
                            <button type="button" id="btnExtendFromModal" class="btn btn-primary"
                                        OnClick="btnExtendDate_Click" UseSubmitBehavior="false" data-dismiss="modal">Extend</button>
                            <button type="button" class="btn btn-outline-secondary btn-med" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>   

    </div>
</form>
</body>
</html>

1 Ответ

1 голос
/ 07 марта 2019

Если вы хотите продолжить делегированное событие, вам нужно изменить с: 

var sTrainingSwipeID = $('#btnExtend_1').data('extend').TrainingSwipeID;

до: 

var sTrainingSwipeID = $(this).data('extend').TrainingSwipeID;

Для получения дополнительной информации вы можете прочитать это

В любом случае вы можете использовать show.bs.modal , и в этом случае вместо this вам необходимо использовать event.relatedTarget : 

$(function() {
//^^^^^^^^^^^^^^^^^^^^
  $('#myModal').on('show.bs.modal', function (e) {
     var ele = e.relatedTarget;
      var sTrainingSwipeID = $(ele).data('extend').TrainingSwipeID;
      var sCurrentDate = $(ele).data('extend').CurrentDate;

      $("#TrainingSwipeID").val(sTrainingSwipeID);
      $("#CurrentDate").val(sCurrentDate);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<a id="btnExtend_1" class="open-AddBookDialog btn btn-outline-secondary btn-med" href="#addBookDialog"
   data-extend='{"TrainingSwipeID":1,"CurrentDate":"03/07/2019"}'
   data-toggle="modal" data-target="#myModal" href="#addBookDialog">Extend1</a>
<a id="btnExtend_2" class="open-AddBookDialog btn btn-outline-secondary btn-med" href="#addBookDialog"
   data-extend='{"TrainingSwipeID":2,"CurrentDate":"04/07/2017"}'
   data-toggle="modal" data-target="#myModal" href="#addBookDialog">Extend2</a>

<div runat="server" id="divButtonPopup">

    <!-- The Modal -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Extend Date</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <input type="text"  id="TrainingSwipeID">
                    <input type="text" id="CurrentDate">

                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" id="btnExtendFromModal" class="btn btn-primary"
                                OnClick="btnExtendDate_Click" UseSubmitBehavior="false" data-dismiss="modal">Extend</button>
                    <button type="button" class="btn btn-outline-secondary btn-med" data-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>
</div>
...