comment charger une page avec la boîte de dialogue jquery ui

StackOverflow https://stackoverflow.com/questions/1608249

  •  05-07-2019
  •  | 
  •  

Question

est-il possible de charger une autre page avec jquery ui dialog?

Comme Dialog + Ajax

Merci

Était-ce utile?

La solution

Si vous souhaitez charger du contenu dans une boîte de dialogue à l'aide d'Ajax, vous pouvez facilement utiliser $ .load: 

// initialize dialog
var dialog1 = $("#dialog").dialog({ autoOpen: false,
  height: 600,
  width: 350
});

// load content and open dialog
dialog1.load('path/to/otherPage').dialog('open');

Consultez un exemple ici .

Autres conseils

La conception de la boîte de dialogue de l'interface utilisateur JQuery est telle qu'elle nécessite l'utilisation du contenu existant. En général, dans les exemples, il s'agit d'un DIV tiré du BODY existant du DOM.

Il existe cependant des cas où l’ajout de balises à des pages existantes uniquement pour créer un dialogue - en particulier si le contenu est chargé par AJAX - pose problème. Par exemple, vous pouvez avoir une bibliothèque JavaScript pouvant être appelée à partir de plusieurs pages et ne pas vouloir ajouter de balises à chacune d’elles.

Une autre façon ( inspirée par cela ) est ici:

La différence réside dans le fait que vous créez la DIV par programme (elle sera automatiquement ajoutée au DOM) - et lorsque la boîte de dialogue se ferme, nous la détruisons complètement - et la supprimons du DOM lors de l'événement 'close'. 

function JQDialog(title, contentUrl, params) {
  var dialog1 = $("<div>").dialog(
  {
     autoOpen: false,
     modal: true,
     title: title,
     close: function (e, ui) { $(this).remove(); },
     buttons: { "Ok": function () { $(this).dialog("close"); } }
  });
  dialog1.load(contentUrl).dialog('open');
}

Remplacez dialog1.load (contentUrl) .dialog ('open'); par ce qui suit si vous ne souhaitez pas que la boîte de dialogue s'ouvre (et éventuellement scintille) tant que le contenu n'est pas chargé. Cela lui permettra également d'être correctement centré sans travail supplémentaire. 

dialog1.load(contentUrl, function () {
    $(this).dialog('open');
});

Je préfère attendre d'avoir le contenu pour créer le dialogue. Cela me semble plus simple. De plus, le dimensionnement automatique ne semble pas fonctionner autrement: 

    $.ajax({
        'url': contentUrl,
        'success': function success(data, textStatus, xhr) {
            $("<div>" + data + "</div>").dialog({
                "width": "auto",
                "height": "auto",
                "close": function (e, ui) { $(this).remove(); }
            });
        }
    });

Bien sûr, il suffit d'inclure un iframe dans le code HTML de votre boîte de dialogue.

Si vous avez spécifiquement besoin ou souhaitez un iFrame au lieu d’un contenu injecté dans le dom, j’ai une extension pour cela ici: http://plugins.jquery.com/project/jquery-framedialog

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top