comment charger une page avec jquery ui dialog

Question

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

Comme Dialog + Ajax

Merci

Answer 1

Si vous voulez charger le contenu dans une boîte de dialogue en utilisant 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'); 

Vérifiez un exemple here.

Answer 2

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

Answer 3

Si vous avez besoin spécifiquement ou si vous voulez un iFrame au lieu de contenu injecté dans le dom, j'ai une extension de cette ici: http://plugins.jquery.com/project/jquery-framedialog

Answer 4

La conception de la boîte de dialogue interface utilisateur JQuery est telle qu'elle a besoin de contenu existant pour opérer sur . Typiquement dans les exemples ceci est un DIV pris du BODY existant du DOM. Il existe cependant des cas où l'ajout de balisage à des pages existantes juste pour créer une boîte de dialogue - en particulier si le contenu est chargé par AJAX - provoque des problèmes. Par exemple, vous pouvez avoir une bibliothèque JavaScript qui peut être appelée à partir d'un certain nombre de pages et ne souhaite pas ajouter de balise à chacun d'entre eux.

Une autre façon (inspired by this) est ici:

La différence étant que vous créez la DIV programme (sera automatiquement ajouté au DOM) - et quand la boîte de dialogue se ferme nous détruisons complètement - et le retirer de le DOM sur 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'); 
} 

---

Remplacer dialog1.load(contentUrl).dialog('open'); avec ce qui suit si vous ne voulez pas la boîte de dialogue pour ouvrir (et potentiellement scintillement) jusqu'à ce que le contenu est chargé. Cela lui permettra également d'être correctement centré sans travail supplémentaire.

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

Answer 5

Je préfère attendre d'avoir le contenu pour créer la boîte de dialogue. Cela me semble plus simple. En outre, l'auto-dimensionnement 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(); } 
      }); 
     } 
    });