jQuery Redimensionnement SimpleModal après la requête AJAX

Question

J'utilise le plugin SimpleModal pour afficher une boîte de dialogue sur un site. Dans cette boîte de dialogue, j'ai deux liens qui vont effectuer des requêtes AJAX et la réponse de ces demandes devrait remplacer le contenu actuel de la boîte de dialogue. J'essaie de garder les choses aussi flexibles que possible, donc si je veux pouvoir charger différentes réponses dans la boîte de dialogue plus tard, cela fonctionnera.

Dans une fonction que j'ouvre la boîte de dialogue:

$('div.modal').modal(
{ 
    minWidth: width, 
    minHeight: height, 
    onOpen: modal_onOpen, 
    onClose: modal_onClose 
}); 

Le rappel onClose ressemble à ceci:

 

function modal_onClose(dialog) 
{ 
    dialog.container.fadeOut('slow', function() 
    { 
     dialog.data.hide(); 

     if(reload_dialog) 
     { 
      data = ajax_page_load(reload_url, false, false); 

      if(data.statusText == 'OK') 
      { 
       dialog.container.width(reload_width); 
       dialog.container.height(reload_height); 
       $.modal.setPosition(); 

       $('div.modal div.container').html(data.responseText); 
       dialog.data.show(); 
       dialog.container.fadeIn('slow', function() 
       { 
        $('a.simplemodal-close').bind('click', function() 
        { 
         $.modal.close(); 
        }); 
       }); 
      } 

      reload_dialog = false; 
     } 
     else 
     { 
      dialog.overlay.slideUp('slow', function() 
      { 
       $.modal.close(); 
      }); 
     } 
    }); 
} 
 

Et quand je veux charger quelque chose de nouveau dans la boîte de dialogue, j'ai ceci:

 

var reload_dialog = false; 
var reload_url; 
var reload_width; 
var reload_height; 

function load_dialog(url, width, height) 
{ 
    reload_dialog = true; 

    reload_url = url; 
    reload_width = width; 
    reload_height = height; 

    $.modal.close(); 
} 
 

Maintenant, tout le code ci-dessus fonctionne. Mais je suis inquiet que j'ai trop de choses compliquées. Voici pourquoi:

Dans modal_onClose, j'ai été forcé de relier le gestionnaire de fermeture à l'ancre à l'intérieur de la boîte de dialogue. Si je ne suis pas lié, je suis incapable de fermer la boîte de dialogue APRÈS la requête AJAX, même si la balise d'ancrage s'affiche correctement dans la boîte de dialogue. De plus, après avoir lié la balise d'ancrage, elle fonctionne mais ignore les animations onClose que j'ai définies. En conséquence de tout cela, j'ai l'impression de ne pas avoir adopté la meilleure approche de la solution.

Est-ce que quelqu'un a accompli quelque chose de similaire? Des conseils?

Merci à l'avance, je sais qu'il ya beaucoup d'informations ici :)

Answer 1

Je résolu ce problème, donc je pensais que je devais laisser une réponse pour quelqu'un d'autre à la recherche. Fondamentalement, mon problème s'est résumée à appeler $ .modal.close() alors que je n'aurais pas dû l'être.

Initialement, lorsque je voulais recharger la boîte de dialogue, j'ai appelé $ .modal.close() et effectué mon rechargement à l'intérieur du rappel onClose(). En appelant $ .modal.close(), il semblerait que je supprimais le gestionnaire d'événement de fermeture et que lorsque je rechargeais le dialogue, les choses se brisaient.

Pour résoudre ce problème, j'ai supprimé la requête de rechargement du rappel onClose() et j'ai simplement géré tout ce qui se trouvait dans une fonction normale. Lorsque j'utilisais le rappel, j'utilisais l'objet de dialogue renvoyé pour effectuer des animations. Avec cette nouvelle approche, je peux atteindre le même résultat en ciblant $ ('# simplemodal-container') à la place. TL; DR - Le code ci-dessous me permet de charger de nouvelles données dans une boîte de dialogue ouverte via AJAX tout en étant capable de redimensionner et de repositionner la boîte de dialogue.

code pour ouvrir une boîte de dialogue:

 

function pop_dialog(url, width, height) 
{ 
    $('div.modal').modal(
    { 
     minWidth: width, 
     minHeight: height, 
     onOpen: function(dialog) 
     { 
      //Animate the overlay 
      dialog.overlay.slideDown('slow', function() 
      { 
       //Make sure the contents of the dialog are showing 
       dialog.data.show(); 

       //Preload 
       $('.dialog-preloader').show(); 
       $('div.modal img.logo').show(); 

       //Fade in preloader display and perform AJAX request 
       dialog.container.fadeIn('fast', function() 
       { 
        data = ajax_page_load(url, false, false); 

        //On success, show dialog contents 
        if(data.statusText == 'OK') 
        { 
         $('div.modal div.container').html(data.responseText); 
         $('.dialog-preloader').hide(); 
        } 
       }); 
      }); 
     }, 
     onClose: function(dialog) 
     { 
      //Fade out the dialog 
      dialog.container.fadeOut('slow', function() 
      { 
       //If we're closing the dialog, animate the overlay off. 
       dialog.overlay.slideUp('slow', function() 
       { 
        //Clean up the mess. 
        $.modal.close(); 
       }); 
      }); 
     } 
    }); 
} 
 

Code pour 'reload' la boîte de dialogue

 

function load_dialog(url, width, height) 
{ 
    //Hide the dialog 
    $('#simplemodal-container').fadeOut('slow', function() 
    { 
     //Hide the dialog contents and show preloader 
     $('div.modal div.container').hide() 
     $('.dialog-preloader').show(); 

     //Set the new width 
     $('#simplemodal-container').width(width); 
     $('#simplemodal-container').height(height); 
     $.modal.setPosition(); 

     //Fade container back in with preload message 
     $('#simplemodal-container').fadeIn('slow', function() 
     { 
      //Perform AJAX request to load new dialog 
      data = ajax_page_load(url, false, false); 

      //On success, show dialog contents 
      if(data.statusText == 'OK') 
      { 
       $('div.modal div.container').html(data.responseText); 
       $('.dialog-preloader').hide(); 
       $('div.modal div.container').show(); 
      } 
     }); 
    }); 
} 
 

Answer 2

$(".aModal5").click(function (e) { 
      e.preventDefault(); 


      $.modal("<div>Loading...</div>", { 
       closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>", 

       onShow: show, 
       overlayId: 'simplemodal-overlay', 
       containerId: 'simplemodal-container', 



      }); 

     }); 

La fonction show doit gérer le chargement et une fois terminé à la demande ajax il sera redimensionner la fenêtre:

function show(dialog) { 
     $('#simplemodal-container').height('30px'); 
     $('#simplemodal-container').width('30px'); 
     xAjax.postWithLoadTarget("Default.aspx/test", null, 
     $(".divtest"), function (data) { 

      $('#simplemodal-container .simplemodal-data').fadeOut(200, function() { 

       var $this = $(this); 

       $('#simplemodal-container').animate({ height: 200 }, function() { 
        $('#simplemodal-container .simplemodal-data').html(data.d); 
        $this.fadeIn(200, function() { 

        }); 

       }); 


      }); 


     }); 

    }