Simple modal dans jQuery

Question

J'utilise SimpleModal dans jQuery, et j'ai un dialogue de confirmation. Si le résultat est Yes, je dois appeler my.php dans cette boîte de dialogue. Cependant, j'ai fait le code, et je suis toujours à la recherche d'idées. Comment puis-je le faire?

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

Ici j'ai le problème de savoir comment écrire la même fenêtre Confirmdialog d'un résultat Ajax. Comment puis-je le faire?

Answer 1

Je ne suis pas sûr que la fonction de confirmation correspond le mieux à vos besoins, mais quelque chose comme cela devrait fonctionner:

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

Je ne suis pas sûr de ce que vous essayez d'accomplir - vous essayez de réutiliser la boîte de dialogue modale de confirmation pour afficher vos résultats? Je suppose que vous pourriez le faire, étant donné que vous avez un bouton "fermer X" sur la boîte de dialogue en remplaçant simplement le contenu du message par vos résultats et en supprimant les boutons afin que votre rappel ne soit pas renvoyé. Il pourrait ressembler à quelque chose comme ceci:

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

Cependant, cela ressemble à un abus d'un dialogue modal pour moi. À mon avis, le dialogue ne devrait contenir qu'une seule interaction avec l'utilisateur. Si vous avez besoin d'une interaction supplémentaire basée sur les résultats de votre boîte de dialogue initiale, je considérerais soit l'ajout d'une autre boîte de dialogue modale après la fermeture de l'actuel avec vos résultats AJAX, soit l'insertion des résultats AJAX dans votre interface principale. Là.