Simple Modal in JQuery

Question

Dear all, I am using SimpleModal in JQuery, and I have One Confirm Dialog ,If it is Yes , I have To Call my.php into This Dialog,However I done the code ,I still Searching Ideas, any help?

$(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 to write the same window?

                     });

       // call the callback
                                // close the dialog
       $.modal.close();
      });
     }
    });
}

Here i have problem how to write it same window Confirmdialog from ajax Result.Any one suggest how to 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()
       });
      });
     }
    });
}