2010-05-09 6 views
2

Récemment, j'essayais de prototyper un menu basé sur jQuery dans ASP.NET MVC. Pour ne citer que deux exemples ici:JQuery Menu plugins sous ASP.NET MVC semblent fonctionner uniquement dans Chrome, mais pas dans IE & FireFox

  1. plugins.jquery.com/project/columnview

  2. www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

Leur page de démonstration ressemble beaucoup , mais quand j'intègre leur exemple de code dans MVC, le script ne fonctionne plus dans IE et FireFox, mais il semble fonctionner correctement sous Google Chrome. Quelqu'un peut-il aimablement souligner ce que j'ai manqué? Je serai honnête ici. Je suis encore nouveau sur JavaScript, donc c'est encore une phase d'apprentissage pour moi, donc toute aide est très appréciée.

J'ai placé une copie de mon fichier zip solution VS2010 @http://db.tt/0UNDkN

Voici ce que je faisais. Dans le Site.master, j'ai quelque chose comme

<body> 
<div class="page">{truncated...}</div> 

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> 
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" /> 
</body> 

Et à l'intérieur Voir le fichier, je donne les résultats suivants

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<div id="original"> 
{some demo block, copied from javascript demo} 
</div> 
</asp:Content> 

<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server"> 
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.columnview.js") %>" /> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#original').columnview(); 
    }); 
</script> 
</asp:Content> 

Compilé le code et couru sous IE. Idéalement, il devrait fonctionner comme la démo dans www.christianyates.com/blog/jquery/finder-column-view-hierarchical-lists-jquery, mais en réalité, il affiche seulement la liste non ordonnée en pleine vue. (Si vous téléchargez le fichier de solution et l'exécutez, vous devriez pouvoir le reprocher aussi). Ensuite, essayé avec FireFox, ne fonctionne pas non plus, même résultat que IE. Enfin, lorsque je l'essaie sous Google Chrome 4.1 (dernière version), le script s'affiche très bien. Vraiment déconcertant ici: -/

Merci pour la lecture: D

Répondre

1

Epic Fail .. s'avère qu'il a quelque chose à voir avec la validation XHTML

ASP.Net MVC par défaut a le Doctype suivant

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

Dans le code d'origine, j'avais

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.columnview.js") %>" /> 

Il s'avère que IE & FireFox n'aime pas l'étiquette de fin. Il préfère

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.columnview.js") %>"></script> 

La balise de fermeture </script> est la cause.

+0

Il s'avère qu'il existe une discussion distincte sur la raison @ http://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work Toujours en train d'apprendre quelque chose de nouveau: D – Antony

0

Pas grand-chose que je peux voir d'ici à part le fait que vous n'avez pas un ContentPlaceHolder « Maincontent » défini dans votre Site.master.

Assurez-vous que le #original div existe :)

+0

Ben, Merci de votre attention. Merci de m'avoir fait remarquer que je n'ai pas tout inclus dans la question initiale. Dans le site.Master, "" est inclus sous

(c'est ce qui est arrivé avec MVC quand j'ai commencé un nouveau projet) Comme pour le div # original, il existe dans Voir la page (comme indiqué dans le message original dans le MainContent) Mais, j'ai pris un autre coup d'oeil aujourd'hui .. J'ai finalement compris la cause. Va poster la réponse en une seconde. – Antony

Questions connexes