Ajax call returning Partial View with Kendo datepicker not refreshing properly

Question

I am adding to a list of elements through an ajax call. The ajax call sends information to controller, controller adds everything to database, then grabs all the items for the list from the database, adds the items to a view model, then returns a partial view with the model. I clear the div container for the list then add the returning HTML.

$('#container').empty().html(result);

My problem is, in the HTML, I have Kendo Datepickers. The page loads fine, and if I do a refresh everything is fine. But right after the Ajax call, the Kendo Datepickers are not there. I debugged and got the result HTML from the ajax call and the following is what is showing for the datepickers:

jQuery(function(){jQuery("#dueDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});

the 'dueDate0' is obviously the ID of the element, but it should not be zero it should be an actual ID number ( ex. 12 ). When I look at the HTML after the AJAX call, the datepickers are just input elements with a date type.

Any suggestions on what to do?

Thanks

EDIT: Here is the HTML that gets return in the AJAX call.

<div id="accordion">
    <div class="ItemList">
        <table class="tblPriorityElement">
            <tr>
                <td class="tdPrioritySelect">
                    <div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>
                </td>
                <td class="tdPriorityName">fasdfasr4</td>
                <td class="tblType" tabindex="0">
                    <span class="txtType">Project</span>
                </td>
                <td class="tdPriorityDate" tabindex="0">
                    <time>10/8/2013</time>
                </td>
                <td class="tdAllocation" tabindex="0">
                    <span class="txtAllocation">0 hrs</span>
                </td>
                <td class="tdDeletePriority">;
                    <a href="#"><img src="../../Images/redx.png"/></a>
                </td>
            </tr>
        </table>
        <div class="content">
            <form class="editItem">
                <input id="ItemID" name="ItemID" type="hidden" value="0" />
                <label>Name:</label>
                <input class="text-box single-line" id="Item_Name" name="Item.Name" type="text" value="fasdfasr4" />
                <label>Type:</label>
                <input class="text-box single-line" id="Item_Type" name="Item.Type" type="text" value="Project" />
                <label>Due date:</label>
                <input class="k-input" id="dueDate0" name="dueDate0" type="date" value="10/8/2013" />
jQuery(function(){jQuery("#dueDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});

                <br/>
                <label>End Date:</label>
                <input class="k-input" id="endDate0" name="endDate0" type="date" />
jQuery(function(){jQuery("#endDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});

                    <label>Start Date:</label>
                    <input class="k-input" id="startDate0" name="startDate0" type="date" value="10/8/2013" />
jQuery(function(){jQuery("#startDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});

                <br/>
                <input type="submit" value="save"/>
            </form>

        </div>
    </div>
</div>

Answer 1

When generating the partial view,just define some kind of random id for the datepicker - for example Guid.NewGuid() or something. are you using the MVC helpers to define the datepicker?