Le dialogue JQuery fonctionne alternativement

Question

J'ai ce morceau de code pour ouvrir une boîte de dialogue JQuery avec des contrôles spécifiques selon 2 liens. Maintenant, cela fonctionne bien au 1er essai. Mais la deuxième fois que je clique sur le lien pour charger la boîte de dialogue JQuery, cela ouvre une boîte de dialogue vide. En le fermant et en cliquant à nouveau sur le lien, il ouvre le dialogue de droite. Lors d'essais répétés, il me renvoie une erreur dans le fichier JQuery 1.3.2.js.

code donné ci-dessous:

$('#div1').dialog("destroy");    

if (criteria1== "L") { 
    $("#div1").html("<iframe id='dialogFrame1' src='../WebPages/abc.aspx'   
    Height='100%' Width='100%' frameborder='0'></iframe>"); 
    } 
else { 
    $("#div1").html("<iframe id='dialogFrame2' src='../WebPages/abc1.aspx'  
    Height='100%' Width='100%' frameborder='0'></iframe>"); 
} 

$('#div1').dialog(
{ 

    height: 220, 
    title: "Title", 
    width: 500, 
    modal: true, 
    beforeclose: function (event, ui) { 

     $("#div1").html(""); 
     $("#div1")[0].innerHTML = ""; 
    } 

}); 

$('#div1').parent().appendTo($("form:first")); 
$('#div1').dialog('open'); 

Suis-je utiliser le fichier JQuery ne va pas? Des points de vue sur la façon de résoudre ce problème?

Answer 1

jsfiddle working example (il manque le jquery css/images)

Donc, si je pourrais suggérer de supprimer le code que vous avez donné semble être un gâchis, et au lieu faire:

$(function(){ 
    var urls = { 
     "hackernews" : "http://news.ycombinator.com", 
     "jsfiddle" : "http://jsfiddle.net" 
    }; 

    var dialog = $("<div style='width:50%;height:50%;'>\ 
        <iframe id='dialogFrame'\ 
        src='#' frameborder='0'></iframe></div>"); 


    dialog.dialog({ 
     height: 220, 
     title: "Title", 
     width: 500, 
     modal: true, 
     autoOpen: false 
    }); 

    $('#btn1, #btn2').click(
     function(){ 
      var urlIndex = $(this).attr('rel'); 
      if(!urlIndex) return; 
      $('#dialogFrame', dialog).attr('src', urls[urlIndex]); 
      dialog.dialog('open'); 
     } 
    ); 
    $('#btnClose').click(
     function(){ 
      dialog.dialog('close'); 
     } 
    ); 

}) ;

HTML:

<input type="button" id="btn1" rel="jsfiddle" value="dialog1" /> 
<input type="button" id="btn2" rel="hackernews" value="dialog2" /> 
<input type="button" id="btnClose" value="Close">​ 

Ainsi, au lieu de passer betw een dialogues et le changement de HTML interne, nous gardons une boîte de dialogue constamment disponible, et quand il doit être affiché, nous définissons l'URL de l'iframe et montrons le dialogue.

Toutes les URL sont conservées dans un tableau associatif, et le gestionnaire d'événements click vérifie l'attribut rel du bouton cliqué pour déterminer quelle URL doit être affichée.

Est-ce logique?

Vous devez évidemment modifier les URL et les attributs des propriétés HTML et de dialo.

Answer 2

EDIT: Incompris le problème, 2ème tentative:

peut ne pas reproduire votre problème, ont essayé à http://jsfiddle.net/GYxwG/3/. J'ai dû enlever votre $('#div1').parent().appendTo($("form:first")); cependant, car cela ne fonctionnerait pas du tout avec ceci en place. Cette déclaration peut ne pas faire ce que vous pensez qu'elle fait, car une fois que vous appelez le .dialog() sur le div, le div est déplacé de sa position et enveloppé dans toutes sortes de dialogue-bonté. Donc .parent() fait référence à l'un des wrappers internes de la boîte de dialogue. Pas le dialogue entier, ni l'élément parent dans le document original.

Il est donc peu logique de déplacer le parent le plus proche de la div pour le dialogue, et provoque un comportement "non spécifié", peut-être vous voyez un cas limite de cela?