Afficher et masquer le contenu du pied de page de boîte de dialogue avec JQuery

Question

J'utilise le JQuery Dialog UI component. Cette boîte de dialogue est définie comme ce qui suit:

<div id="confirmDialog" title="Are you sure?"> 
    Are you sure you want to delete this? 
</div> 

Lorsque je crée cette boîte de dialogue, j'ajoute du contenu dans le pied de page à côté des boutons. Je souhaite que ce contenu soit masqué lorsque la boîte de dialogue est initialement affichée. Ensuite, quand un utilisateur clique sur "OK", je veux montrer le contenu et désactiver les boutons. Pour tenter de le faire, je fais actuellement les suivantes:

$(document).ready(function() { 
    $("#confirmDialog").dialog({ 
    autoOpen: false, 
    modal: true, 
    buttons: { 
     Cancel: function() { $(this).dialog('close'); }, 
     'OK': okPress, 
     'P' : function() {} 
    }, 
    open: function(e, ui){ 
     $(e.target).parent().find('span').filter(function(){ 
     return $(this).text() === 'P'; 
     }).parent().replaceWith('<div id=\'P1W\'>Please wait</div>'); 
    } 
    });  
}); 

function okPress() { 
    // Disable buttons 
    // Show P1W 
} 

Je ne sais pas comment 1) Cacher d'abord le contenu de pied de page. 2) Afficher le contenu du pied de page quand okPress est atteint 3) Désactiver les boutons dans la boîte de dialogue. En bref, je suppose que je ne sais pas comment interagir avec le contenu du pied de page d'une boîte de dialogue JQuery. Est-ce que quelqu'un peut m'aider avec ça?

Answer 1

D'abord, vous pouvez simplement trouver le troisième bouton à l'aide

open: function(e, ui){ 
     $(this).find('.ui-button:nth-child(3)').replaceWith('<div id=\'P1W\'>Please wait</div>').hide(); 
} 

La fonction .hide() cachera votre contenu ajouté immédiatement.

En okPress, vous feriez

$('#P1W').show(); 

pour afficher le contenu.

Je ne suis pas sûr à ce sujet, mais vous pourriez être en mesure de désactiver les boutons en utilisant $("#confirmDialog").dialog("disable");.