Comment faire pour charger dynamiquement la boîte de dialogue jQueryUI

Question

J'adore les boîtes de dialogue de jQueryUI. Cependant, il ne semble pas y avoir un moyen de charger dynamiquement le contenu intégré. Je suppose que je dois utiliser une autre approche pour y parvenir? Les iframes ne chargeront-ils le contenu que lorsqu'ils seront visibles? Est-ce la bonne façon de faire cela?

Je suis ouvert à d'autres mécanismes de boîte de dialogue s'ils sont plus adaptés pour charger le contenu uniquement lorsqu'ils sont ouverts pour la première fois.

Answer 1

Ce n'est pas difficile à faire - - Je ne commencerais pas à jouer avec les iframes pour ça seul. Que diriez-vous quelque chose comme ça?

$(".selector").dialog({ 
    open: function(event, ui) { 
    $('#divInDialog').load('test.html', function() { 
     alert('Load was performed.'); 
    }); 
    } 
}); 

Fondamentalement, vous créez votre dialogue, et quand il est ouvert, un fichier HTML est chargé à partir de votre serveur, en remplaçant le contenu de votre <div id="divInDialog"></div>, qui devrait être à l'intérieur de votre dialogue <div class="selector"/>.

Answer 2

vous pouvez créer un vide div sur votre page

<div id="dialog-confirm"><div> 

une boîte de dialogue Configuration ui jquery avec Autoopen = false;

$("#dialog-confirm").dialog({ 
     resizable: false, 
     autoOpen: false, 
     height:140, 
     modal: true, 
     buttons: { 
      'Delete all items': function() { 
      $(this).dialog('close'); 
      }, 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
     } 
    }); 

alors quand vous voulez charger une page dynamique, utilisez un appel ajax jquery pour mettre dynamiquement le code HTML dans le div puis appeler dialogue Ouvrir sur ce div. Voici un exemple ci-dessous le chargement d'une page dynamique sur un clic de bouton.

$("#someButton").click(function() 
    { 
     $.post("Controller/GetPage", function(data){ 
      $('#dialog-confirm').html(data); 
      $('#dialog-confirm').dialog('open'); 
     }, "html")}; 
    } 

aussi, si vous la page prend un certain temps à charger dans l'appel ajax, vous pouvez utiliser une image de chargement ou jquery blockui plugin pour montrer que quelque chose chargement

Answer 3

Je créerais personnellement une "vue" pour votre boîte de dialogue, puis je l'étendrais sur votre boîte de dialogue en cours de génération. Pour un test j'ai utilisé le suivant "vue":

var dialog = { 
    title: 'Dialog WITHOUT Modal', 
    modal: false, 
    height: 300 
}; 

Puis se prolongeant sur une boîte de dialogue:

$('#modal-btn-btns').click(function(){ 
    $('#dialog-modal-btns') 
     .dialog($.extend(dialog, { 
      modal: true, 
      width: 500, 
      title: "Dialog with modal AND buttons", 
      buttons: { 
       "Trigger ALERT": function(){alert("NICE CLICK!@!@!")}, 
       "Cancel": function(){$(this).dialog('close');} 
      } 
     })) 
     .html('This form has buttons!'); 
});