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

[Solved] I NEED YOUR HELP-Date Picker and all javascript including client validation not working in a Dynamically loaded Partial View

0 Answers 89 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:07 PM

Hi all, I am working with ASP.NET MVC 3 (Razor)
I loaded a partial view that contains a form by clicking an 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>