Mise à jour de la barre de progression de l'interface utilisateur JQuery à l'intérieur du panneau de mise à jour

Question

Comment puis-je utiliser la barre de progression de l'interface utilisateur JQuery dans le panneau de mise à jour?
Lorsque j'essaie de faire ce qui suit, progresbar n'est pas mis à jour lorsqu'il se trouve dans le panneau de mise à jour.

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#progressbar").progressbar({ value: 0 }); 
    $("#progressbar").css({ 'background': 'LightYellow' }); 
    $("#progressbar > div").css({ 'background': '#3366CC' }); 
    }); 
</script> 

<script type="text/javascript"> 
    var counter = 0; 
    function UpdateProgress() { 
    $("#progressbar").progressbar("value", counter); 
    counter = counter + 10; 
    if (counter >= 100) { 
     counter = 0; 
    } 
    else 
     setTimeout('UpdateProgress()', 1000); 
    } 
</script> 

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <ContentTemplate> 
    <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" /> 
    <asp:panel ID="Panel1" runat="server" Visible="True"> 
     <div id="progressbar" style="height:30px;"></div> 
    </asp:panel> 
    </ContentTemplate> 
</asp:UpdatePanel> 

code-behind:

protected void Button1_Click(object sender, EventArgs e) 
{  
    ScriptManager.RegisterStartupScript(this, this.GetType(), "temp", "<script language='javascript'>UpdateProgress();</script>", false); 
} 

Answer 1

Vous devez recréer le widget car il est détruit lorsque les rafraîchit UpdatePanel, comme ce général:

var counter = 0; 
function createProgressBar() { 
    $("#progressbar").progressbar({ value: counter }) 
        .css({ 'background': 'LightYellow' }) 
        .children("div").css({ 'background': '#3366CC' }); 
} 
function UpdateProgress() { 
    $("#progressbar").progressbar("value", counter); 
    counter = counter + 10; 
    if (counter >= 100) { 
     counter = 0; 
    } 
    else 
    setTimeout(UpdateProgress, 1000); 
} 

$(createProgressBar); //Run it on page load 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(createProgressBar); 

Cela crée la barre de progression lorsque la page se charge, et la réexécute également lorsque le UpdatePanel revient (avec de nouveaux éléments, où le widget de la barre de progression n'existe pas) en ajoutant la même méthode de création qu'un gestionnaire endRequest event. Notez également que nous utilisons le compteur (initialement 0 still) dans la méthode de création, donc lors de la recréation, il a la valeur actuelle. Une autre note est essayer de ne pas passer les chaînes à setTimeout(), vous pouvez passer une référence de fonction directement, comme je l'ai ci-dessus ... cela vous permettra d'économiser des maux de tête plus tard, et être plus efficace pour démarrer.