La variable de la boîte de dialogue jQuery globale ne fonctionne pas correctement

Lorsque j'appelle la fonction, la boîte de dialogue ne fonctionne pas. Si je déplace la construction du dialogue dans la fonction showtimes_list, tout fonctionne correctement.La variable de la boîte de dialogue jQuery globale ne fonctionne pas correctement

Je pensais que les variables déclarées en dehors d'une fonction étaient globales dans leur contexte?

var dialog_list = $("<div></div>").dialog({ 
    autoOpen: false, 
    modal: true, 
    height: 300, width: 720, 
}); 

function showtimes_list(sid){ 
    dialog_list.html(""); 
    $.get("ajax_showtimes.php?sid="+sid, function(data){ 
      dialog_list.html(data); 
     } 
    ); 

    dialog_list.dialog("open"); 
}

--- --- Modifier

Ceci est appelé à partir d'un onClick à showtimes_list.

--- --- Modifier

Cela fonctionne:

function showtimes_list(sid){ 
    $("#stl").dialog("open"); 
    $("#stl").html(""); 
    $.get("ajax_showtimes.php?sid="+sid, function(data){ 
      $("#stl").html(data); 
     } 
    );  
} 

$(function(){ 
    $('<div id="stl"></div>').appendTo(document.body).dialog({ 
     autoOpen: false, 
     modal: true, 
     height: 300, width: 720, 
    });  
});

Source

2010-06-01 Ben Dauphinee

Je suis confus. Pouvez-vous élaborer sur ce qui ne fonctionne pas? – Pointy

Pas vraiment assez pour aller ici. Appelez-vous cela dans la fonction document.ready()? Ou est-ce juste dans une balise de script? – womp

@Pointy typo'd .. désolé. Il ne fonctionne pas lorsqu'il est appelé sans déplacer la configuration de la variable dans la fonction. –

Au lieu de créer une nouvelle div vide, ajouter la div au document, par exemple:

<body> 
    <div id="dialog"> 
     <div id="dialogContent"></div> 
    </div> 
</body>

Ensuite, votre script deviendra

var dialog_list = $("#dialog").dialog({ });

Ensuite, lorsque vous voulez modifier le code HTML de cet élément, au lieu de changer la boîte de dialogue lui-même, vous voulez changer l'élément dialogContent:

function showtimes_list(sid){  
    var content = $("#dialogContent"); 
    content.html(""); 
    $.get("ajax_showtimes.php?sid="+sid, function(data){ 
      content.html(data); 
     } 
    ); 

    dialog_list.dialog("open"); 
}

Si vous ne voulez pas ces divs vides dans votre code HTML structure, vous devez les ajouter dynamiquement au corps et utiliser des classes à la place des identifiants.

Editer: pour répondre à votre question de savoir pourquoi cela ne fonctionne pas lorsque la liste de dialogues est en dehors de la fonction, j'imagine que cela a quelque chose à voir avec le code html généré.

Lorsque vous appelez .dialog(), jQuery génère le code HTML suivant:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"> 
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
     <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span> 
     <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a> 
    </div> 
    <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog"> 
     <p>Dialog content goes here.</p> 
    </div> 
</div>

Lorsque cela est en dehors de votre fonction, il est appelé à chaque fois qu'il est rencontré dans le script ... Ensuite, dans votre fonction, vous modifiez ce HTML généré. Cela fait un moment que j'ai dynamiquement mis à jour le contenu de la boîte de dialogue, mais j'ai rencontré le même problème, et le code HTML généré était le coupable. Je pense que ma solution était, au lieu des divs imbriqués dans ma première réponse, j'ai créé la boîte de dialogue que vous avez fait (en dehors de la fonction), et à l'intérieur de la fonction, vous modifier le code HTML du ui-dialog-content

Par exemple:

function showtimes_list(sid){ 
    dialog_list.find('.ui-dialog-content').html(""); 
    $.get("ajax_showtimes.php?sid="+sid, function(data){ 
      dialog_list.find('.ui-dialog-content').html(data); 
     } 
    ); 

    dialog_list.dialog("open"); 
}

Source

2010-06-01 22:33:37

La variable de la boîte de dialogue jQuery globale ne fonctionne pas correctement

Répondre

Questions connexes