Simple jQuery fonctionne en HTML, pas ASP.NET

Question

jQuery noob ici, en essayant de produire des couleurs d'arrière-plan alternées. Cela fonctionne au format HTML:

<script type="text/javascript"> 
      $(document).ready(function() { 
        $('.stripedtable tr:even td').addClass(" evenrow"); 
        alert("Just executed stripedtable jQuery in MasterPage"); 
      }); 
</script> 

La classe "evenrow" est ajoutée à la classe, pour les lignes paires uniquement. Génial! Sauf quand je le mets dans une MasterPage ASP.NET, la classe "evenrow" n'est jamais ajoutée. Dans FireBug, je confirme que la fonction est en cours d'exécution et jQuery est là. Le alert() indique que la méthode est déclenchée après le chargement de la page. Pas de classe "evenrow", cependant, et pas de rayures.

Il est probablement pertinent que la table qui n'est pas modifiée comme je le souhaite, soit générée par un UserControl sur une page qui hérite de la page MasterPage.

C'est bizarre. Quand je vais à View Source, copiez la source entière à NoStripes.html, et ouvrez la page HTML dans un navigateur, j'obtiens la classe "evenrow" et les rayures. jQuery fonctionne bien.

Cela semble impliquer que (en quelque sorte) le HTML n'est pas vraiment là, lorsque la méthode se déclenche à partir de la MasterPage? Donc jQuery ne peut pas le modifier ?! Et le HTML est là, avec NoStripes.html, parce que j'ai sauvé la source générée ?!

J'ai essayé de mettre le $ ('. Stripedtable etc) sur un espace réservé de contenu sur le UserControl. Le alert() montre le tir. Pas de rayures.

Suggestions? J'ai longuement googlé sans trouver de solution. C'est probablement quelque chose de simple, mais je ne peux pas le comprendre.

TIA - Hoytster

Answer 1

En cas de doute, définissez un point d'arrêt du débogueur et parcourez le code. Conseils de base mais cela devrait vous aider à trouver le problème. Mettez "débogueur"; dans le code du document prêt et ensuite éclater le sélecteur comme une assignation séparée de sorte que vous pouvez voir a) si le code se déclenche du tout et b) s'il sélectionne quelque chose (la longueur doit être> 0). Si vous n'obtenez aucune sélection, essayez la console interactive FireBug (ou regardez l'expression dans IE) pour taper un sélecteur jusqu'à ce que vous trouviez le bon.

Vous pouvez également vérifier si votre .stripedtable CssClass existe comme prévu dans la sortie du document HTML rendu.

Answer 2

Le script jQuery pourrait en fait être en cours d'exécution avant que votre table a été chargée sur la page. Vous pouvez essayer d'ajouter vos scripts en bas de la page maître ou même utiliser une méthode de scripts de registre à partir du code de la page maître pour vous assurer que c'est la dernière chose à charger.

Vous pourriez également publier votre balisage pour la table que vous essayez d'attacher votre script jquery aussi. Il pourrait y avoir quelque chose qui ne soit pas utilisé. Je suis allé et joué avec votre jquery et ai jeté ensemble une page de maître rapide, exemple de page enfant et c'est ce que je suis venu avec. Utilisez le script suivant dans la tête de la page principale:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.stripedtable tr:even').addClass("evenrow"); 
    alert("Just executed stripedtable jQuery in MasterPage"); 
}); 

Puis, dans la feuille de style j'ai placé cette définition:

tr.evenrow td {background: Red;} 

J'ai ensuite créé un contrôle et juste ballotté dans un simple table comme ceci avec votre nom de classe sur l'élément de table:

<table class="stripedtable"><tr><td></td></tr></table> 

Lorsque j'ai couru le page tout a fonctionné pour moi. Je pense que le problème est que dans le code jquery que vous avez, vous allez à un niveau inférieur à ce dont vous avez besoin. Vous avez juste besoin de la table, puis de la ligne puis du marqueur: even. Votre exemple de code tel que lancé dans l'élément td dont je ne pense pas que vous avez vraiment besoin.

Espérons que cela fonctionne pour vous.

Answer 3

Essayez d'ajouter un style CSS au lieu de la classe, comme Css ("font-weight", "gras"); pour voir si vous avez un problème au lieu de stylesheet

Answer 4

La première chose que je pensais quand je lis votre titre est comment ASP.NET dynamiquement ses noms de champs quand ils sont à l'intérieur des contrôles utilisateur. Et je pensais que vous pourriez référencer un identifiant comme "#mytable" qui a ensuite été renommé "#mycontrol_mytable". Mais je vois que vous référencez un nom de classe, ce qui ne peut pas être le cas.

L'autre chose qui vient à l'esprit qui affecteraient vous est le doctype. Le doctype a tendance à affecter certaines choses loufoques parfois (surtout dans IE). Avez-vous vérifié que le doctype que vous utilisez dans le fichier ASPX est le même que le fichier HTML?

Vous pouvez essayer un type de document comme celui StackOverflow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

Answer 5

Je parie que .NET fait quelque chose avec la table qui rend le sélecteur .stripedtable tr:even td inutile. vous avez dit que vous utilisiez firebug, je recommande de jouer avec le sélecteur (essayez $(".stripedtable tr:even td") dans la console et voir ce qu'il sélectionne), s'il ne vous donne pas les éléments que vous voulez, essayez sans la pièce .stripedtable.

Answer 6

Assurez vous validez le code HTML de la première résultat final. C'est beaucoup mieux qu'autrefois, mais dans le passé, les contrôles .net étaient connus pour cracher un balisage invalide qui peut perturber la traversée du DOM.

Answer 7

Merci beaucoup à tous. Pour un noob, toutes les réponses étaient utiles. Ajouter le .css() était intelligent. J'ai appliqué le javascript fourni pour agir sur <tr> s au lieu de <td> s. La percée a été la suggestion de la console FireBug, que je n'ai jamais utilisée. J'ai cherché un moyen de voir les résultats d'un sélecteur, et cela a fait toute la différence. FireBug est génial.

C'est ainsi que nous apprenons; dommage que ce soit si douloureux.

Le problème était sensibilité à la casse. Dans mon balisage ASP.NET, mon CssClass était "StripedTable", et mon expression jQuery cherchait "stripedtable". Je savais que javascript n'est pas sensible à la casse - mais STRINGS est, vous oiseau-cerveau! Argh. D'ailleurs, je dois passer au niveau, parce que mes prédécesseurs appliquent des styles au niveau, et ils incluent souvent la couleur de fond. J'ai donc dû modifier la classe <td> pour gagner la bataille de la spécificité.

Donc $('.stripedtable tr:even td').addClass(" evenrow"); change la classe de "CellStyleLeft" en "CellStyleLeft evenrow" - et le evenrow arrive en dernier, donc ça gagne!

Cela fonctionne, enfin. Merci tout le monde!

- Hoytster