Ajax return Partial View lost Javascript

Question

I have a main view which has master layout contains all javascripts, ie jQuery DatePicker control, etc.

Inside this main view, I use Ajax.BeginForm(.....) which contains a partial view. And in my controller, if validation fails it returns that partial view. (also the UpdateTargetId in Ajax has been set the Id of the section contains that partial view.)

My error bullets display correctly. However I found I seems to loose the javascript after that. For example my calender/date picker stops working and it comes a normal input box.

What could be the reason?

Thanks a lot!!

Here is the code:

My main view contains one Ajax form. And inside there are 2 partial views. The 2nd one has datepicker inputs.

@using (Ajax.BeginForm("ActionXXX", "ControllerYYY", new AjaxOptions
{
    HttpMethod = "POST",
    UpdateTargetId = "main"        
}))
{
     <section id="main" class="....." data-section="....." data-step="">  

            @Html.Partial("ValidationSummary") 

            @Html.Partial("SharedPartialView", Model, new ViewDataDictionary {.....})          

     </section> 

}

And JS is included in master file. (Main view has Layout for this)

<script type="text/javascript">   

    $('input.date').watermark('dd/mm/yyyy');

    $('input.date').datepicker({
        dateFormat: "dd/mm/yy",
        maxDate: 0, 
        onClose: function () { $(this).valid(); } 
    });    

    $('input.time').watermark('hh:mm');
    $('input.time').timeEntry();

</script>

The controller is just: when validation fails, return partial view ("SharedPartialView")

if (Request.IsAjaxRequest())
    return PartialView("SharedPartialView", ciShareModel); //model

These datepicker and watermark jquery do work when page initially loaded....

Rafael Emshoff Rafael Emshoff · Accepted Answer · 2012-11-05T06:58:32

Are you running the javascript again, after you load the partial view? - A script-block is only run when the page loads, so the in your master page is only run when the master is loaded. When you do an ajax call, you need to run any javascript for the partial view seperately.

Put this code in your partial view:

<script type="text/javascript">
    $(document).ready(function() {
        $('input.date').datepicker({
            dateFormat: "dd/mm/yy",
            maxDate: 0, 
            onClose: function () { $(this).valid(); } 
        });
    }); 
</script>

Although - I suggest instead of using $('input.date'), give your input element a unique ID/class, otherwise you will reset any data a user may have entered in other 'input.date' fields on the page. Use for ex: $('input.partialView_Date) and call your input field in the partial view: <input type="text" class="partialView_Date" />

Ajax return Partial View lost Javascript

1 Answers