jQuery changements CSS perdus après la publication asynchrone ASP.NET AJAX

je suit dans C#:jQuery changements CSS perdus après la publication asynchrone ASP.NET AJAX

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate> 
     <span id="header" class="hideMe"> 
      (other irrelevant tags and controls) 
     </span> 
     <div> 
      (other irrelevant tags and controls) 
     </div> 
     <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" /> 
    </ContentTemplate> 
    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="btnSubmit" /> 
    </Triggers> 
</asp:UpdatePanel>

Et les suivantes jQuery

if ($) { 
    $(document).ready(function() { 

    $('#header').click(function ($e) { 
     if ($(this).hasClass('hideMe')) { 
     $('#header').removeClass('hideMe'); 
     $('#header').addClass('showMe'); 
     } 
     else { 
     $('#header').removeClass('showMe'); 
     $('#header').addClass('hideMe'); 
     } 
    } 

    }); 
}

Les travaux jQuery très bien (à savoir - si je clique sur l'entête de l'en-tête et la classe hideMe est en cours, cela supprimera hideMe et ajoutera showMe, et vice-versa). Cependant, lorsque je clique sur le btnSubmit, une publication asynchrone se produit et provoque la réinitialisation de l'intervalle d'en-tête à son état d'origine (ce qui serait le cas avec la classe hideMe appliquée).

Comment puis-je obtenir que l'intervalle d'en-tête reste dans l'état où il était lorsque le bouton d'envoi est cliqué et pour ne pas revenir à l'état qu'il était au chargement de la page?

Source

2012-04-02 Jagd

Cela pourrait vous aider: http://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels/256253 # 256253 –

@Gerson - Merci pour le lien! Cela m'a donné une solution raisonnable. – Jagd

Gerson - Si vous aviez la gentillesse de mettre ce lien comme réponse, je le voterais et le vérifierais comme réponse. – Jagd

Ce qui a fonctionné pour moi:

$(document).ready(function() { 
    // bind your jQuery events here initially 
}); 

var prm = Sys.WebForms.PageRequestManager.getInstance(); 

prm.add_endRequest(function() { 
    // re-bind your jQuery events here 
});

Extrait de: jQuery $(document).ready and UpdatePanels?

Source

2012-06-24 20:00:35

Est-ce que cela doit être à l'intérieur d'un script tag ou une étiquette de référence de script ou ce n'est pas grave? C'est à dire. est-ce important que le script qui a ceci soit référencé comme

Essayez d'utiliser une délégation d'événement.

if ($) { 
    $(document).ready(function() { 

    $('body').delegate('#header','click',function ($e) { 
     if ($(this).hasClass('hideMe')) { 
     $(this).removeClass('hideMe'); 
     $(this).addClass('showMe'); 
     } 
     else { 
     $(this).removeClass('showMe'); 
     $(this).addClass('hideMe'); 
     } 
    } 

    }); 
}

Modifier: Comme indiqué dans les commentaires, cela ne permet pas de maintenir l'état. Pour simplifier, je suggère d'utiliser une variable globale à cette fin, mais vous devrez exécuter une sorte de rappel sur l'appel asynchrone pour appliquer les classes en fonction de l'état précédent.

Source

2012-04-02 19:13:59

Seulement pour aider à mi-chemin. La liaison d'évènement sera sauvegardée (génial!) Mais le #header renvoyé n'aura pas forcément la bonne classe. Pourrait stocker dans une variable, obtenir l'état juste avant le POST et ré-appliquer dans le rappel de succès, POST au serveur et avoir le serveur renvoyer avec la classe correcte déjà rendue, etc. –

Questions connexes

jQuery changements CSS perdus après la publication asynchrone ASP.NET AJAX

Répondre

Questions connexes