web-dev-qa-db-fra.com

Comment faire pour que la boîte de dialogue jQueryUI charge le contenu de manière dynamique

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

Je suis ouvert aux autres mécanismes de boîte de dialogue s'ils conviennent mieux au chargement du contenu uniquement à la première ouverture.

jqueryajaxjquery-uimodal-dialogjquery-ui-dialog
16
at.

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

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

En gros, vous créez votre boîte de dialogue et, lorsqu’elle est ouverte, un fichier html est chargé à partir de votre serveur. Il remplace le contenu de votre <div id="divInDialog"></div>, qui doit se trouver dans votre boîte de dialogue <div class="selector"/>.

31
Tauren

vous pouvez créer un div vide sur votre page

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

configurer une boîte de dialogue jquery ui 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');
         }
       }
   });

puis, lorsque vous souhaitez charger une page dynamique, utilisez un appel jquery ajax pour placer dynamiquement le code HTML dans le div, puis appelez dialog Open sur ce div. Voici un exemple ci-dessous lors du 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")};
  }

de plus, si votre page prend un certain temps pour charger l'appel ajax, vous pouvez utiliser une image de chargement ou jquery blockui plugin pour indiquer que quelque chose se charge.

14
leora

Je créerais personnellement une "vue" pour votre boîte de dialogue, puis étendreais la boîte de dialogue générée. Pour un cas de test, j'ai utilisé la "vue" suivante:

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

Etendre ensuite 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!');
});
1
Wizard