2011-08-09 3 views
0

J'utilise les libs jquery dans mon application ASP.NET MVC dans la tête de la page principale comme suit:Datepicker ne se présente pas

<head runat="server"> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="contene-style-tyle" content="text/css" /> 
    <meta http-equiv="contene-script-tyle" content="text/javascript" /> 

    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title> 
    <link rel="stylesheet" type="text/css" href="/Content/css/black.css" media="screen, projection, tv" />  
    <!--[if lte IE 7.0]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection, tv" /><![endif]--> 
    <!--[if IE 8.0]> 
     <style type="text/css"> 
      form.fields fieldset {margin-top: -10px;} 
     </style> 
    <![endif]--> 
    <style type="text/css"> @import url(/Content/css/jquery-ui-1.8.15.custom.css); </style> 
    <style type="text/css"> @import url(/Content/css/jquery.message.css); </style> 
    <%--<script type="text/javascript" src="/content/js/jquery-1.4.2.min.js"></script>--%> 
    <script type="text/javascript" src="/content/js/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="/content/js/jquery-ui-1.8.15.custom.min.js"></script> 
    <script type="text/javascript" src="/content/js/jquery.message.min.js"></script> 
    <script type="text/javascript" src="/content/js/jquery.ui.datepicker.js"></script> 
    <!-- Adding support for transparent PNGs in IE6: --> 
    <!--[if lte IE 6]> 
     <script type="text/javascript" src="content/js/ddpng.js"></script> 
     <script type="text/javascript"> 
      DD_belatedPNG.fix('h3 img'); 
     </script> 
    <![endif]--> 

    <script type="text/javascript" language="javascript"> 
     $(document).ready(function() { 
      // Switch categories 
      $('#h-wrap').hover(function() { 
       $(this).toggleClass('active'); 
       $("#h-wrap ul").css('display', 'block'); 
      }, function() { 
       $(this).toggleClass('active'); 
       $("#h-wrap ul").css('display', 'none'); 
      }); 
     }); 
    </script> 
    <asp:ContentPlaceHolder ID="headContent" runat="server"></asp:ContentPlaceHolder> 
</head> 

Puis, dans ma page aspx J'appelle le widget DatePicker comme suit :

$(".Datepicker").each(function() { 
      $(this).datepicker(); 
     }); 

Ce morceau de jquery est à l'intérieur de la fonction document.ready(). J'ai vérifié à la fois la console de Firefox et de Chrome pour voir s'il y avait une erreur avec mon javascript et aucun problème n'était visible. Chaque fois que je clique sur les zones de texte qui ont obtenu la classe "hasDatepicker" en raison de cette fonction, rien ne se passe et je n'obtiens aucun message de la console.

Est-ce que quelqu'un sait pourquoi cela se produit?

EDIT:

Voici comment il regarde dans les DOM -

enter image description here

+0

essayez de voir cette page dans IE 8 - cela peut ramasser des erreurs comme celles-là - recherchez une erreur dans la barre d'état en bas à gauche. –

+0

@ Nicholas Murray, je l'ai testé maintenant dans IE 8 et il n'a absolument pas eu d'erreurs avec ma page. – Hallaghan

+0

Ajoutez le code dans lequel vous appliquez le sélecteur de date à vos zones de texte. –

Répondre

2

Votre appel ne sera pas avoir de problèmes. Vous pouvez encore raccourcir l'appel comme ceci.

$(document).ready(function() { 
    $(".Datepicker").datepicker(); 
}); 

Et la présence de hasDatepicker montre que jquery ui est en effet chargé.

Vérifiez ces points.

  1. Pourquoi devriez-vous appeler cela? /content/js/jquery.ui.datepicker.js Ce n'est pas nécessaire du tout. Il peut remplacer la fonction datepicker dans le /content/js/jquery-ui-1.8.15.custom.min.js. S'il vous plaît supprimer il.

  2. Vérifiez également si le chargement correctement css dans NET Tab de la console Firebug

  3. Commentaire /content/js/jquery.message.min.js et vérifier si ce fichier est le coupable.

Une de ces vérifications le ferait.

+0

Correction! Le problème était en effet avec l'appel de "/content/js/jquery.ui.datepicker.js". En l'enlevant a fait le spectacle de datepicker immédiatement. Je ne comprends pas, pourquoi n'est-ce pas nécessaire pour appeler la fonction .datepicker? Merci pour votre aide. – Hallaghan

+0

@Hallaghan: maintenant tout vient emballé dans la coutume js. vérifiez-le ici. http://jqueryui.com/download – naveen

+1

merci, je vais lire à ce sujet. Très apprécié pour votre aide mon ami :) – Hallaghan