Charger une autre page dans la boîte de dialogue

1

La méthode jQuery load() est ce que vous cherchez?

2009-04-17 17:58:54 Matt

+0

Je ne suis pas sûr de savoir comment obtenir une référence sur la fenêtre de dialogue pour le faire charger du contenu sans fermer et rouvrir. –

+0

PS: J'ai juste essayé la charge, cela n'a pas fonctionné. –

+0

Essayez quelque chose comme $ ('# theDialog'). Load ('someOtherFile.html'); Ensuite, lorsque vous cliquez sur le lien, il aura le contenu du fichier distant. Il existe plusieurs façons de charger le fichier, mais c'est le plus simple. – Jab

1

Lorsque vous appelez un fichier via-à-dire la charge méthode de jquery, il est possible de charger du contenu plus du fichier chargé quand il est tombé dans la boîte de dialogue de la fenêtre:

<script> 
$(document).ready(function(){ 
    $("#myDropZone").load("another-file.html"); 
}); 
</script>

Ce code doit être renvoyé à partir du contenu html chargé. BTM, vous pouvez charger le contenu de différentes manières, mais soyez conscient de ce que vous faites. Ne chargez pas les fichiers de manière récursive. Serait la même chose qu'une boucle.

Hope this helps

Source

2009-04-18 16:04:47

+0

La fonction ci-dessus doit-elle figurer dans le code HTML de la page ou du dialogue d'origine? Je ne comprends pas quelle page répond aux événements dans le dialogue, est-ce la boîte de dialogue elle-même, ou la page qui l'invoque? –

+0

Désolé, si je n'avais pas écrit clairement. Je veux dire la page, qui est invoquée par votre première demande (pas la boîte de dialogue). –

4

Je l'ai fait dans le passé en chargeant le « autre contenu » dans un div puis afficher que div comme une boîte de dialogue.

$('#dialog').load('other_content.html', function(){ 
    $(this).dialog(); 
}

jQuery Docs pour Ajax/load

Source

2009-04-23 12:08:50

+0

Merci, mais je préfèrerais ne pas pré-charger d'autres contenus, cela va probablement retarder le chargement de la page. –

+3

Jon - Je vous ai donné +1 parce que votre réponse est bonne et la réponse OP m'a fait rire! – CResults

0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link href="Scripts/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" 
     type="text/css" /> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var UIDialogId = 0; 

      $('.UIDialogOpen').live('click', function (e) { 
       e.preventDefault(); 
       alert(this.href); 
       UIDialogId++; 

       $('<div/>', { 
        'id': $(this).attr('data-dialog-id') !== undefined ? $(this).attr('data-dialog-id') : 'UIDialog' + UIDialogId, 
        'class': 'UIDialog' 
       }).appendTo('body').dialog({ 
        title: $(this).attr('data-dialog-title') !== undefined ? $(this).attr('data-dialog-title') : 'Message', 
        position: ['center', 'center'], 
        modal: true, resizable: false, zIndex: 10000, autoOpen: true, 
        minWidth: $(this).attr('data-dialog-minwidth') !== undefined ? $(this).attr('data-dialog-minwidth') : '300px', 
        minHeight: $(this).attr('data-dialog-minheight') !== undefined ? $(this).attr('data-dialog-minheight') : '300px', 
        maxWidth: $(this).attr('data-dialog-maxwidth') !== undefined ? $(this).attr('data-dialog-maxwidth') : '300px', 
        maxHeight: $(this).attr('data-dialog-maxheight') !== undefined ? $(this).attr('data-dialog-maxheight') : '300px', 
        close: function (event, ui) { 
         $(this).remove(); 
        } 
       }) 
       .load(this.href); 

       //Or //Use .load(this.href); and comment or delete below append line. 

       //.append('<h1>Hi.. This is Testing </h1> <input type="button" class="UIDialogCancel" value="Cancel" /> <input type="button" class="UIDialogClose" value="Close" />'); 


       $('.UIDialogClose, .UIDialogCancel').live('click', function (e) { 
        var obj = $(this) 
        e.preventDefault(); 
        obj.parents('.UIDialog').dialog('close'); 
       }); 
      }); 

     }); 
    </script> 
</head> 
<body> 
    <a href="your url" title="test1" class="UIDialogOpen">test1</a> 
    <br /> 
    <a href="your url" title="test2" class="UIDialogOpen">test2</a> 
    <br /> 
    <a href="your url" title="test3" class="UIDialogOpen">test3 </a> 
</body> 
</html>

Source

2012-04-27 10:19:36 Thulasiram

+0

en test1 dans href u devez y mettre votre lien url. alors ça va marcher. – Thulasiram

+0

si vous mettez autre nous url du site cela ne fonctionnera pas. – Thulasiram

Charger une autre page dans la boîte de dialogue

Répondre

Questions connexes