2010-08-23 5 views
0

J'utilise jQuery UI pour la première fois, et je vais créer un contrôle datetimepicker pour un champ DOB.Où puis-je mettre ce code javascript?

Voici comment la vue semble:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<StronglyTypedHelpers.Models.Person>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
    <script type="text/javascript"> 
     $('#date').datepicker(); 
    </script>  
</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <h2>Index</h2> 

    <% using (Html.BeginForm()) {%> 
     <%: Html.ValidationSummary(true) %> 

     <fieldset> 
      <legend>Fields</legend> 

      <div class="editor-label"> 
       <%: Html.LabelFor(model => model.Name) %> 
      </div> 
      <div class="editor-field"> 
       <%: Html.TextBoxFor(model => model.Name) %> 
       <%: Html.ValidationMessageFor(model => model.Name) %> 
      </div> 

      <div class="editor-label"> 
       <%: Html.LabelFor(model => model.Age) %> 
      </div> 
      <div class="editor-field"> 
       <%: Html.TextBoxFor(model => model.Age) %> 
       <%: Html.ValidationMessageFor(model => model.Age) %> 
      </div> 

      <div class="editor-label"> 
       <%: Html.LabelFor(model => model.DOB) %> 
      </div> 
      <div class="editor-field"> 
       <%: Html.TextBoxFor(model => model.DOB, String.Format("{0:g}", Model.DOB)) %> 
       <%: Html.ValidationMessageFor(model => model.DOB) %> 
      </div> 

      <div class="editor-label"> 
       <%: Html.LabelFor(model => model.Married) %> 
      </div> 
      <div class="editor-field"> 
       <%: Html.CheckBoxFor(model => model.Married) %> 
       <%: Html.ValidationMessageFor(model => model.Married) %> 
      </div> 

      <p> 
       <input type="submit" value="Save" /> 
      </p> 
     </fieldset> 

    <% } %> 

    <div> 
     <%: Html.ActionLink("Back to List", "Index") %> 
    </div> 

</asp:Content> 

Maintenant, la documentation de l'interface utilisateur indique d'utiliser ce code:

$('#date').datepicker(); 

Où dois-je mettre cela?

Voici le lien vers ce que je lis:

http://learn.jquery.com/jquery-ui/getting-started/

Répondre

0

vous cant javascript mis dans votre titre. vous devez mettre dans votre contenu

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#date').datepicker(); 
    }); 
</script> 

    <h2>Index</h2> 
    ... 

le document.ready est comme le vieux windows.onload javascript, seulement, les feux document.ready plus tôt, et ne marche pas attendre pour les images à charger :)

+0

Cela a fonctionné. Merci! Aussi, pourquoi ai-je besoin d'utiliser la fonction .ready()? –

+0

vous voulez que votre code datepicker soit exécuté sur un événement. par exemple un clic de bouton, ou ici, le chargement de la page. souvenez-vous du $ (document) .ready (function() {...}); code, car presque tout le code jQuery commence dans ce 'code' ce code indique simplement le script. quand la page (document) est chargée, (mais sautez les images de chargement lent etc., juste le HTML) ainsi quand le HTML de la page est chargé, exécutez cette fonction. alors le code dans cette fonction est exécuté comme votre datepicker. Voici comment vous faites jQuery :) vous allez l'aimer assez tôt;) charge d'exemples sur le site Web de jQuery. – Stefanvds

0

Cela devrait fonctionner ... juste mettre ce partout où vous avez HTML

<script type="text/javascript"> 
$({ 
// put jquery code in here 
}); 
</script> 

oui, le problème est que vous n'avez pas de déclaration jquery ... c'est pourquoi vous faites $({ })

vous pouvez également le faire de manière plus universelle:

<script type="text/javascript"> 
$(document).ready(
    function(){ 
     // jquery in here 
}); 
</script> 

ce vous devriez être en mesure de mettre partout, mais son meilleur probablement le bit de la tête de votre code HTML.

+0

Le script n'est pas exécuté, mais est défini sur le titre de ma page Web. J'ai besoin de dire à MVC2 de ne pas le rendre mais de le traiter comme du code. L'utilisation des balises <% ne fonctionne pas non plus. –

0

Vous pouvez le mettre à la fin du document, comme celui-ci:

. 
. 
. 
<script type="text/javascript" src="path/to/jquery.js"></script> 
<script type="text/javascript" src="path/to/jquery-ui.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#date').datepicker(); 
}); 
</script> 
</body> 
</html> 

Ou, si vous avez les jquery.js et jquery-ui.js appelé à la tête de la page, il suffit d'ajouter

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#date').datepicker(); 
}); 
</script> 

juste avant la balise </body>