• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 712
  • Last Modified:

jquery datapicker not working in MVC view

Why doesnt a jquery datapicker not work in an MVC view when I am looping through a set of records?

In my view I render out a list (code snippet below).

If I comment this code out then the date picker works but if I leave the code below in the date picker does not work, no error just no date picker


<% foreach (myModel.Models.Idea item in Model.ListOfStuff)
           {  %>
        <li>
            <%= Html.ActionLink(item.Title, "Details", new { id = item.Id })%>
            -
            <%= Html.ActionLink("Details","Details",new {id=item.Id}) %>
            |
            <%= Html.ActionLink("Edit", "Edit", new { id = item.Id })%></li>
        <%} %>

Open in new window

0
ToString1
Asked:
ToString1
  • 4
  • 4
3 Solutions
 
Roman GhermanSenior Software EngineerCommented:
Hmmm,
It is not clear where the datepicker is created and for what element, can you please provide more code where datepicker is created, on which elements, where the code above is positioned ?
0
 
ToString1Author Commented:
Looking at source of rendered view..I have copied code below
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    





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


</head>

then in the body 


  <div class="aList">
        Date :
        <input type="text" id="datepicker" name="datepicker">
    </div>

Open in new window

0
 
Roman GhermanSenior Software EngineerCommented:
And where are the <li> elements?

You can try  closing the input tag, however I don't know for sure if this is the source of the problem

<input type="text" id="datepicker" name="datepicker" />
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
ToString1Author Commented:
There are no li elements on the page.

I have closed the input tag but this has made no difference
0
 
Roman GhermanSenior Software EngineerCommented:
<% foreach (myModel.Models.Idea item in Model.ListOfStuff)
           {  %>
        <li>
            <%= Html.ActionLink(item.Title, "Details", new { id = item.Id })%>
            -
            <%= Html.ActionLink("Details","Details",new {id=item.Id}) %>
            |
            <%= Html.ActionLink("Edit", "Edit", new { id = item.Id })%></li>
        <%} %>

Open in new window


This should be generating a list of <li> elements which you said is causing the datepicker not to appear. These are the li elements which I expect you to give to me.

Also - you gave too few details for anybody to be able to help you.
0
 
ToString1Author Commented:
Whoops sorry about that!

Here is the markup and I have replaced the text


    <p>
        test</p>
    <ul class="test">
       
        <li>test tes test <br/>
        </li>
       
    </ul>
    <h2>
        Search</h2>
    <p>
        Test test </p>
    <div class="search">
        Date :
        <input type="text" id="datepicker" name="datepicker" />
    </div>
0
 
Roman GhermanSenior Software EngineerCommented:
hmm, I can't see anything strange in that code.
0
 
ToString1Author Commented:
I reckon it maybe to do with nested master pages.   However it does seem strange that to iterate through and created an unordered list results in the date picker not working.

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now