I am having some problems here-Date Picker and all javascript including client validation not working in a Dynamically loaded Partial View

Question

I am working with ASP.NET MVC 3 (Razor) I loaded a partial view by holds a form by clicking on Ajax Link that is located on my view as follows

@Ajax.ActionLink("Students List", "Create", "Student", new AjaxOptions {OnSuccess = "updatePlaceholder", UpdateTargetId = "holder" })

The partial view loads properly, but I discovered that the Telerek DatePicker isn't showing when I click on the button to bring it down and also client side validations arent working also. I followed the approch described here but it still insn't working http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html My code is below

HERE IS MY VIEW

@Ajax.ActionLink("Students List", "Create", "Student", new AjaxOptions {OnSuccess = "updatePlaceholder", UpdateTargetId = "holder" })

function updatePlaceholder(context) { // the HTML output of the partial view var html = context.get_data(); // the DOM element representing the placeholder var placeholder = context.get_updateTarget(); // use jQuery to update the placeholder. It will execute any JavaScript statements $(placeholder).html(html); // return false to prevent the automatic update of the placeholder return false; }

HERE IS MY PARTIALVIEW

@model MyUniversity.Models.Student

@using (Ajax.BeginForm(new AjaxOptions {UpdateTargetId="holder"})) { @Html.ValidationSummary(true) Student @Html.Telerik().DateTimePicker().Name("EnrollmentDate").Value(DateTime.Now.ToString()) @Html.ValidationMessageFor(model => model.EnrollmentDate)

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

}

@Html.ActionLink("Back to List", "Index")

Here is my _Layout.cshtml with the registered scripts

@ViewBag.Title

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftAjax.debug.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")" type="text/javascript"></script>
@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.telerik.css").Combined(true).Compress(true)))
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

@(Html.Telerik().ScriptRegistrar().Globalization(true).DefaultGroup(group => group.Combined(true).Compress(true)))

Waleligne Cherinet Waleligne Cherinet · Accepted Answer · 2012-01-10T07:06:01

I have partial view that is loaded without Ajax. I had trouble making both the validation and Telerik datepicker popup to work. On my partial view I added the three scripts for validation:

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

But with this the popup wouldnt work, so I added these scripts to my _layout.cshtml just before:

@Html.Telerik().ScriptRegistrar()

I had already registered the following scripts on the _layout.cshtml page on the top:

<script src="@Url.Content("~/Scripts/MicrosoftAjaxTemplates.debug.js")" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/ui/jquery.ui.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ui/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.tabs.js")" type="text/javascript"></script>
<!-- Telerik Extensions for MVC Scripts -->
<script src="@Url.Content("~/Scripts/2011.2.712/telerik.combobox.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/2011.2.712/telerik.grid.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/2011.2.712/telerik.grid.editing.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/2011.2.712/telerik.grid.filtering.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/2011.2.712/telerik.grid.grouping.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/2011.2.712/telerik.grid.reordering.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/2011.2.712/telerik.grid.resizing.min.js")" type="text/javascript"></script>
    <script src="../../Scripts/2011.2.712/telerik.datetimepicker.min.js" type="text/javascript"></script>
<script src="../../Scripts/2011.2.712/telerik.datepicker.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>

After that all seems to work fine.

I am having some problems here-Date Picker and all javascript including client validation not working in a Dynamically loaded Partial View

1 Answers