Простой модальный в jQuery

Question

Я использую SimpleModal в jQuery, и у меня есть один диалог подтверждения. Если результат Yes, я должен позвонить my.php в это диалоговое окно. Тем не менее, я сделал код, и я все еще ищу идеи. Как мне это сделать?

$(document).ready(function() { 
    $('#confirmDialog input.confirm, #confirmDialog a.confirm').click(function (e) { 
     e.preventDefault(); 
     // Example of calling the confirm function. 
     // You must use a callback function to perform the "yes" action. 
     confirm("Continue", function() { 
      alert("OK"); 
     }); 
    }); 
}); 

function confirm(message, callback) { 
    $('#confirm').modal({ 
     close:false, 
     position: ["20%",], 
     overlayId:'confirmModalOverlay', 
     containerId:'confirmModalContainer', 
     onShow: function (dialog) { 
      dialog.data.find('.message').append(message); 

      // If the user clicks "yes" 
      dialog.data.find('.yes').click(function() { 
       $.get('my.php', function(data){ 
        // Create a modal dialog with the data. 
        // Here: How do I write the same window? 
       }); 

       // Call the callback 

       // Close the dialog 
       $.modal.close(); 
      }); 
     } 
    }); 
} 

Здесь у меня есть проблема с тем, как написать это же окно Confirmdialog из результата Ajax. Как мне это сделать?

Answer 1

Я не уверен, что функция подтверждения лучше всего соответствует вашим потребностям, но что-то, как это должно работать:

function confirm(message, callback) { 
    $('#confirm').modal({ 
     close:false, 
     position: ["20%",], 
     overlayId:'confirmModalOverlay', 
     containerId:'confirmModalContainer', 
     onShow: function (dialog) { 
      dialog.data.find('.message').append(message); 

      // If the user clicks "yes" 
      dialog.data.find('.yes').click(function() { 
       $.get("my.php", function (data) { 
        /* Sample response: 
        * <div id="title">my title</div> 
        * <div id="message">my message</div> 
        * 
        */ 
        var resp = $("<div/>").append(data); 
        var title = resp.find("#title").html(), 
         message = resp.find("#message").html(); 

        dialog.data.find(".header span").html(title); 
        dialog.data.find(".message").html(message); 
        dialog.data.find(".buttons .yes").hide(); 
        dialog.data.find(".buttons .no").html("Close"); 

        // No need to call the callback or $.modal.close() 
       }); 
      }); 
     } 
    }); 
} 

Answer 2

Я не уверен, что вы пытаетесь выполнить - пытаетесь ли вы повторно использовать диалоговое окно подтверждения для отображения ваших результатов? Я полагаю, вы могли бы это сделать, учитывая, что в диалоговом окне есть кнопка «закрыть X», просто заменив содержимое сообщения вашими результатами и удалив кнопки, чтобы ваш обратный вызов не был снова запущен. Это может выглядеть примерно так:

dialog.data.find('.message').html('new contents from your ajax data'); 
dialog,data.find('.buttons').remove(); 

Однако это похоже на злоупотребление модальным диалогом. На мой взгляд, диалог должен содержать только одно взаимодействие с пользователем. Если вам нужно дальнейшее взаимодействие на основе результатов вашего первоначального диалога, я бы подумал о том, чтобы добавить еще один модальный диалог, который появляется после того, как текущий закрыт вашими результатами AJAX, или вставьте результаты AJAX в ваш основной интерфейс и обработайте его там.