JQuery bascule cesse de fonctionner après avoir lancé un appel asp.net côté serveur?

J'ai une adresse appelée div qui est une zone de texte. Lorsque je clique sur un lien hypertexte, il fait basculer le div de haut en bas. Après avoir cliqué sur un bouton asp.net, la div s'effondre, ce qui n'est pas grave, mais j'ai remarqué que l'URL passe de www.abc.com/edit.aspx?Id=2 à www.abc.com/edit.aspx?Id2=2# et maintenant la bascule ne fonctionne pas.JQuery bascule cesse de fonctionner après avoir lancé un appel asp.net côté serveur?

Voici le script:.

$ (document) .ready (function() {

$('#myAddress').click(function() { 
     ShowHideAddressBox(); 
    }); 
    $('#arrowIndicator').click(function() { 
     ShowHideAddressBox(); 
    }); 
}); 
function ShowHideAddressBox() { 
    var str = $("#myAddress").text(); 
    if (str == "Hide") { 
     $("#myAddress").html("Click here"); 
     $("#arrowIndicator").attr("src", "/Shared/Images/misc/arrow_state_grey_expanded.png"); 
    } 
    else { 
     $("#myAddress").html("Hide"); 
     $("#arrowIndicator").attr("src", "/Shared/Images/misc/arrow_state_grey_collapsed.png"); 
    } 

    $('#checkAddress').toggle('normal'); 
}

Le bouton côté serveur clic définit simplement certaines valeurs dans quelques zones de texte

Dans ma page maîtresse, j'ai également la ligne suivante:

<asp:ScriptReference Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
      Name="MicrosoftAjax.js" Path="http://ajax.microsoft.com/ajax/3.5/MicrosoftAjax.js" />

Source

2010-12-13 Xaisoft

Qu'est-ce que vous voyez est parce que les éléments sont remplacés, et ils n'ont plus les gestionnaires, vous devez le remplacer:

$(document).ready(function() { 
    $('#myAddress').click(function() { 
     ShowHideAddressBox(); 
    }); 
    $('#arrowIndicator').click(function() { 
     ShowHideAddressBox(); 
    }); 
});

Avec un gestionnaire .live() comme ceci:

$(function() { //shortcut for $(document).ready(function() { 
    $('#myAddress, #arrowIndicator').live('click', ShowHideAddressBox); 
});

Source

2010-12-13 23:00:11

Je vais implémenter cela et vous le faire savoir mais si je vous comprends bien, vous dites qu'au chargement de la page, la fonction ShowHideAddressBox est attachée au lien, mais après le basculement, ShowHideAddress n'est plus attaché? Est-ce correct et est-ce à cause de montrer et de cacher le div ou quelque chose d'autre. Je suis un peu confus au sujet de remplacer la partie des éléments parce que je ne pense pas que je suis en train de remplacer et élément, je suis juste en train de me cacher et d'en montrer un qui est déjà là. Je me suis probablement plus confus. Je vais essayer votre solution maintenant et vous le faire savoir. – Xaisoft

@Xaisoft - C'est la publication sur le serveur (le bouton ASP que vous décrivez) qui apporte * de nouveaux éléments *, sans les gestionnaires 'click' que vous avez attachés à l'original. –

Ça a bien marché. Je comprends un peu, mais je suis encore un peu confus. Après avoir cliqué sur le bouton asp.net, la fonction ShowHideAddressBox n'est plus attachée au lien et à l'image, donc live les rattachera. La partie qui prête à confusion est quand vous dites apporte de nouveaux éléments.Tous les éléments sont déjà sur la page, la seule chose que clique le serveur est de remplir des zones de texte avec des valeurs, mais les zones de texte sont déjà là. Désolé si je suis une douleur. – Xaisoft

Vous devez empêcher le d action efault de l'ancre (qui doit suivre l'href). Si vous avez défini votre ancre href sur '#' et que vous ne l'utilisez pas, le # sera ajouté à l'url dans la barre d'adresse.

$('#arrowIndicator').click(function (ev) { 
     ev.preventDefault(); 
     ShowHideAddressBox(); 
});

Source

2010-12-13 22:58:07 redsquare

Cela ne résoudra pas réellement le problème, si le lire attentivement il cesse de fonctionner en raison d'une publication partielle de page (AJAX demande de remplacement des éléments) :) –

Nick est correct, je mets ev.preventDefault() et maintenant le div doesn ne bascule pas du tout. – Xaisoft

@Nick Craver - oh ouais, grimace updatepanels, depuis longtemps que je les ai utilisés avec reconnaissance – redsquare

vous pouvez réellement utiliser quelque chose comme ceci:

$(document).ready(function() { 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

    function EndRequestHandler(sender, args) { 
     //Code that runs after a post back with an update panel has occurred. 
    } 
     //Code on page load. 
});

Le code en dehors de la fonction EndRequestHandler serait le même qu'à l'intérieur.

J'utilise des panneaux de mise à jour quand j'étais nouveau asp.net et la programmation en général. J'ai rapidement appris à utiliser jQuery ajax, ce qui est une meilleure solution que la mise à jour des panneaux. Je vous suggère de vérifier.

Source

2010-12-13 23:18:45

JQuery bascule cesse de fonctionner après avoir lancé un appel asp.net côté serveur?

Répondre

Questions connexes