Simple modal in jQuery

Question

I am using SimpleModal in jQuery, and I have one confirm dialog. If the result is Yes, I have to call my.php into this dialog. However, I have done the code, and I am still searching for ideas. How can I do it?

$(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();
            });
        }
    });
}

Here I have the problem of how to write it the same window Confirmdialog from an Ajax result. How can I do it?

Answer 1

I'm not sure what you are trying to accomplish -- are you trying to reuse the confirmation modal dialog to display your results? I suppose you could do this, given that you have a "close X" button on the dialog by simply replacing the contents of the message with your results and removing the buttons so your callback doesn't get fired again. It might look something like this:

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

However, this seems like an abuse of a modal dialog to me. In my opinion, the dialog should only contain a single interaction with the user. If you need further interaction based on the results of your initial dialog, then I would consider either adding another modal dialog that you pop up after the current one is closed with your AJAX results or insert the AJAX results into your main interface and deal with it there.

Answer 2

I'm not sure that the confirm function best fits your needs, but something like this should work:

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()
                });
            });
        }
    });
}