Как перезвонить модалу из другого модала?

Question

Я пишу приложение, в котором один модал передается между многими элементами. У него есть идентификатор и класс, и я изменяю только элементы представления в модальном режиме в зависимости от элемента списка, который выбирает пользователь. Тем не менее, у меня есть кнопка «удалить» в модале, и всякий раз, когда пользователь выбирает ее, появляется другая, и они должны выбрать «Да» или «Нет» для подтверждения. Хотя, если они выбирают «да», я хочу вернуться к первому модальному режиму и остановить или отключить их от повторного нажатия кнопки «Удалить». Я придумал решение, но оно блокирует кнопку «Удалить» на модале, а не только ту, которую я выбрал. Поэтому моя цель - найти способ вернуться к предыдущему модалу, с которого я его инициировал.

HTML:

    <div class="myForm">
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Update or
                            Create</h5>
                        <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-form-label">Application Name:</label> <input
                                type="text" class="form-control" id="displayAppName"
                                name="displayAppName" value="" readonly /> <label
                                class="col-form-label">Application Code:</label> <input
                                type="text" class="form-control" id="appcode" name="appcode"
                                value="" readonly /> <label class="col-form-label"> Map
                                Status:</label> <input type="text" class="form-control" id="mapStatus"
                                name="mapStatus" value="" readonly /> <label
                                class="col-form-label">Edit Status:</label> <input type="text"
                                class="form-control" id="editStatus" name="editStatus" value=""
                                readonly />


                        </div>
                    </div>
                    <div class="modal-footer" id="dashboardModalFooter">
                        <button type="button" class="btn btn-danger" id="deleteGPBtn">Delete</button>

                        <button type="button" class="btn btn-secondary"
                            id="dashboardCloseModal" data-dismiss="modal">Close</button>

                        <a id="modalCreateBtn"> <input type="submit"
                            class="btn btn-primary modal-create" id="createBtn"

                            value="Create" /></a>

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





    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog"
        aria-labelledby="basicModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Delete Grouping
                        Pattern</h4>
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger" role="alert">Are you sure you
                        want to delete?</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="deleteGPYes">Yes</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                </div>
            </div>
        </div>
    </div>

jQuery:

            $("#deleteGPBtn").on("click", function(event){


                $("#exampleModal").modal('hide');   //Hides current modal with delete button
                $('#deleteModal').modal('show');    //Displays the are you "sure" modal



            });




            $('#deleteGPYes').on('click',function(){
                //If they select "Yes" I want to somehow disable the button for this specific modal.
                //However, I need to somehow refrence back one modal which I don't know how
                $('#deleteModal').modal('hide');

            });

Поэтому, как только они выберут #deleteGPBtn, им нужно будет выбрать #deleteGPYes, чтобы отключить кнопку «удалить», связанную с этим элементом списка.

PS - я пытался использовать jQuery find() или children(), но не смог заставить его работать.

Answer 1

Отключение кнопки не должно быть проблемой, поскольку id s уникальны.

Вы можете установить id текущего модального атрибута для атрибута данных на новый модал.

$("#deleteGPBtn").on("click", function(event) {
  $("#exampleModal").modal('hide'); //Hides current modal with delete button

  // Save calling modal
  $('#deleteModal').data('callback-modal', $('#exampleModal'))
    .modal('show'); //Displays the are you "sure" modal
});


$('#deleteGPYes').on('click', function() {
  //If they select "Yes" I want to somehow disable the button for this specific modal.
  //However, I need to somehow refrence back one modal which I don't know how

  // Read the data attribute
  let $returnTo = $('#deleteModal').data('callback-modal');
  // Limit the button search
  $('#deleteGPBtn', $returnTo).prop('disabled', true);
  $('#deleteModal').modal('hide');
  // Show old modal
  $returnTo.modal('show');
  // Cleanup
  $('#deleteModal').removeData('callback-modal');
});