Adding jQuery to forms with the same model in MVC3

Question

I am trying to have two submission forms with similar functionality on the same view, where each form is strongly typed to the same model. I then am trying to add a datepicker to the same input on both forms, but I am unsure of how to do this. Here is my code:

@using (@Ajax.BeginForm(...
                        new { id = "editScheduleForm" }))
{
    <div class="editor-label">
        @Html.LabelFor(model => model.StartTime)
    </div>
    <div class="editor-field">
        <input 
        @Html.EditorFor(model => model.StartTime)
        @Html.ValidationMessageFor(model => model.StartTime)
    </div>
}

...

@using (@Ajax.BeginForm(...
                        new { id = "addScheduleForm" }))
{
    <div class="editor-label">
        @Html.LabelFor(model => model.StartTime)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.StartTime)
        @Html.ValidationMessageFor(model => model.StartTime)
    </div>
}

Both of these forms are in their own strongly-typed partial views. I naturally tried simply adding the datepicker in jQuery to both partial views, like so:

$(function () {
    $("#StartTime").datepicker();
});

But it unsurprisingly only worked for one of the inputs. I have been trying to use the HTML id that I added to both Ajax form declarations (e.g. editScheduleForm and addScheduleForm), but am unsure of how to do this. Any suggestions?

Solution: As scottm suggested, I looked through documentation for using a custom editor template. I read this, detailing functionality I didn't know existed: http://msdn.microsoft.com/en-us/library/ee407399.aspx

Here, you can specify a template, and then add a parameter for the htmlFieldName, which is specifically designed to circumvent the problem I was happening.

scottm · Accepted Answer · 2012-07-23 18:25:26Z

3

You can add a class to the inputs in your editor template. Then you can then use the class as the jQuery selector.

Add a file called DateTime.cshtml under ~/Views/Shared/EditorTemplates, and add the following:

@model DateTime
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "date" })

Then add this jQuery to the page.

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

edited Jul 23, 2012 at 18:25

answered Jul 23, 2012 at 16:28

scottm

28.7k22 gold badges109 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

c0nn Over a year ago

It would be great if this worked, but I don't think I can hand-set the class from an @Html.BeginForm. The outputted HTML already has a class, like so:

<input class="text-box single-line" data-val="true" data-val-required="The Start Time field is required." id="StartTime" name="StartTime" type="text" value="07/23/2012 12:00:00 AM" />

I tried using your addition, but MVC ignored the new code.

scottm Over a year ago

@c0nn you can further define how your editor templates are rendered by adding a .cshtml file in ~/Views/Shared/EditorTemplates. Here's an example that does exactly what you are looking for: geekswithblogs.net/michelotti/archive/2010/02/05/…

George Mauer · Accepted Answer · 2012-07-23 16:42:32Z

0

The ID must be unique in a document.

Never rely on multiple ids on a page working correctly. Matter of fact, despite what most examples in blogs do, you should hardly ever use ids as jquery selectors.

Like @scottm said. You should use classes to tag items which you want to be widget-ized.

Here's a simplistic bit of code so you can create jq ui widgets declaratively:

$(function() {

  $('[data-usewidget]').each(function() {
    var $this = $(this), widget = $this.data('usewidget');
    $.fn[widget] && $this[widget]();
  });

});

Then in your html

<input name=startTime data-usewidget=datepicker />

edited Jul 23, 2012 at 16:42

answered Jul 23, 2012 at 16:34

George Mauer

123k140 gold badges400 silver badges632 bronze badges

Collectives™ on Stack Overflow

Adding jQuery to forms with the same model in MVC3

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related