This is a migrated thread and some comments may be shown as answers.

[Solved] Date Picker and all javascript including client validation not working in a Dynamically loaded Partial View

4 Answers 368 Views

Date/Time Pickers

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Yusuf asked on 28 Apr 2011, 02:04 PM

Hi all, 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

<span id="holder"></span>
@Ajax.ActionLink("Students List", "Create", "Student", new AjaxOptions {OnSuccess = "updatePlaceholder", UpdateTargetId = "holder" })
<script type="text/javascript">
    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;
    }
</script>

HERE IS MY PARTIALVIEW

@model MyUniversity.Models.Student

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

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

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Here is my _Layout.cshtml with the registered scripts

<head>
    <title>@ViewBag.Title</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>

    </head>
<body>

@(Html.Telerik().ScriptRegistrar().Globalization(true).DefaultGroup(group => group.Combined(true).Compress(true)))
</body>
</html>

4 Answers, 1 is accepted

answered on 24 May 2011, 11:18 PM

Hello Andy.,...Yes I was able to solve the problem...

Register the following scripts at the bottom of your layout page as follows, the telerek datepicker depends on them all being registered.

</div>
       @Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
            .Add("telerik.common.min.js")
            .Add("telerik.calendar.min.js")
            .Add("telerik.datepicker.min.js")
            .Add("telerik.timepicker.min.js")
            .Add("telerik.datetimepicker.min.js")
            );
</body>
</html>

Registering the above scripts should solve the problem, but just for a reminder , u should have the following scripts registered in the head tag of ur layout page...make sure u have not registered scripts in any page except the layout page, it worked for me this way, put all in the layout page, and u should register the ajax scripts in this order

That is

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

as done below ...cheers

<head>
    <title>@ViewBag.Title</title>
    <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/jquery.validate.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>
</head>

<body>