Показ модального диалога не вызывается после обратной передачи

Question

У меня есть модальное диалоговое окно Bootstrap, которое я использую для заполнения данными, когда пользователь нажимает "Изменить" в таблице данных jQuery. На этом модале есть кнопка "Отмена" и "Отправить".

Когда я открываю модальное и нажимаю "Отмена", затем выбираю другую строку таблицы и нажимаю "Изменить", все в порядке; данные заполняются правильно каждый раз, когда нажимается "Редактировать". Однако, если я делаю обратную передачу, нажимая "Отправить" на модальном, а затем снова нажимая "Редактировать", модальный открывается, и никаких данных там нет.

Я использую модальные on('show.bs.modal', ...), чтобы заполнить его, и он никогда не попадет после завершения обратной передачи.

// This is called when "Edit" in data table row is clicked
function showEdit(var1, var2) {debugger
    $('#hfVar1').val(var1);
    $('#hfVar2').val(var2);
    showEditModal();
}

function showEditModal() {debugger
    $("#spnEditHeader").text("Edit Something");
    $('#editModal').modal('show');
}

$(document).ready(function () {
    // This populates the jQuery data table
    showTable(somthing, anotherThing);

    // This is executed as long there is no postback; 
    // once a postback is perfoemd this is not hit, modal not populated
    $('#editModal').modal({
        keyboard: true,
        backdrop: "static",
        show: false
    }).on('show.bs.modal', function (e) {debugger
        var var1= $('#hfVar1').val();
        var var2= $('#hfVar2').val();

        //make ajax call to populate items
        populateMPOOEdit(var1, var2);
    });
    ....
});

//This is the button in modal that causes postback
<div class="modal-footer">
    <div id="divEditButtons" style="text-align: center;">
        <button id="btnCancel" class="btn btn-info2" data-dismiss="modal" aria-hidden="true" aria-label="Cancel">Cancel</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button id="btnSubmit" class="btn btn-primary" aria-hidden="true" aria-label="Update">Update</button>
    </div>
</div>

// "Submit" button's click handler
$(document).on("click", "#btnSubmit", function (event) {
    // Validate data (client side validation)
    var isValid = validateUpdate();

    // Also need a server side validation checking for duplicate name, using ajax to do this
    $.ajax({
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        url: '<%= ResolveUrl("services/mpoo.asmx/NameExists") %>',
        cache: false,
        data: JSON.stringify({ "Name": name }),
    }).done(function (data) {
        var result = data.d;

        if (result != '') {
            nameExists = JSON.parse(data.d);

            if (nameExists == "true") {
                $("#lblErrName").text("Duplicate Name");
                $("#lblEditErrName").show();
                isValid = false;
            }
            if (isValid) {
                __doPostBack('btnSubmit', JSON.stringify({
                    action: "SaveUpdate", Var1: var1, ..., Varn: varn
                }));
                $('#editModal').modal('hide');
            }
        }
    });
    return false;  // to prevent modal from closing if there are errors on page
});

Answer 1

Создайте такую ​​функцию:

//basically everything you had in your document.ready function
function myJsFunc() {
  // This populates the jQuery data table
  showTable(somthing, anotherThing);

  // This is executed as long there is no postback; 
  // once a postback is perfoemd this is not hit, modal not populated
  $('#editModal').modal({
    keyboard: true,
    backdrop: "static",
    show: false
  }).on('show.bs.modal', function (e) {debugger
    var var1= $('#hfVar1').val();
    var var2= $('#hfVar2').val();

    //make ajax call to populate items
    populateMPOOEdit(var1, var2);
  });
....
}

Затем в вашем обработчике Page_Load в вашем коде, попробуйте добавить это:

Page.ClientScript.RegisterStartupScript(this.GetType(), "some random name for your script", "myJsFunc();", true);