CODEWITHSUNDEEP
c#jqueryhtml
user2108195
user2108195

Reputation: 421

Jquery not working on cshtml to pop up dialog box

This is the editor for the startdate @Html.EditorFor(model => model.startDate) and I have jquery blow, the code for the query is on the page and when I run the program the calender pop up does not come up, both code are on the dame cshtml page

<meta charset="utf-8" />

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#startDate" ).datepicker();
  });
  </script>

Upvotes: 1

Views: 570

Answers (2)

Bhushan Firake
Bhushan Firake

Reputation: 9458

Replace

@Html.EditorFor(model => model.startDate)

with

@Html.EditorFor(model => model.startDate, new { @class="startDate" })

because you have not giveen a class to that field and change your jQuery to 

$(function() {
    $( ".startDate" ).datepicker();
  });

so # becomes . as we are using a class.

Upvotes: 1

Marko
Marko

Reputation: 13233

You need to verify that all your external scripts loaded properly. I suggest you install Fiddler and then watch your requests and see if all of them loaded. If that all is ok then you need to check that the scripts actually load before your call for the datepicker function. If you're using MVC 4 and sections feature that would mean that all you javascript code needs to go into the SCRIPTS section which is placed on your view AFTER the calls to load jquery and jquery-ui libraries. Use Goggle Chrome's console to verify that there are no javascript errors.

Looking at the code you posted here everything should be working. I've done this millions of times and every time I had a problem it was because I was missing a JQuery library reference or I wasn't loading them in proper order.

Upvotes: 0

Related Questions