Javascript in MVC Partial view stops working when View is replaced

Question

It's at bit difficult to explain the issue in the Title but did my best.. This is about Partial Views that uses Javascript from the main view. So I'm building a website that uses a wizard driven registration form. I used this tutorial http://tech.queryhome.com/138560/creating-wizard-in-asp-net-mvc-part-2

I have a main view (Register.cshtml) that holds the div which is being used to load the partial views. The user inputs some data in step 1, then step 2 and so on. In step 1 I have a datepicker for the user to select a date. The input field (with id datetimepicker2) uses som JavaScript as you can see below. It works fine when the Register.cshtml loads and the partial view for step 1 is shown. But if the user returns to step 1 from step 2, then the datepicker stops working. Nothing happens when I place the cursor in the input field. If I look at the source code the script is still there so im wondering why it doesnt find my datetimepicker2.

So the scenario is Start to Register -> Step 1 (datepicker works) -> Step 2 -> Back to Step 1 (datepicker does not work).

_Layout.cshtml

@RenderSection("scripts", required: false)

Register.cshtml

<div id="divContainer">
    @Html.Partial("_StepOne")  <!-- Step one is shown as default-->
</div>

@section scripts {         <!-- This is the script that only works the first time -->
    <script type="text/javascript">
        $(document).ready($(function () {
            $('#datetimepicker2').datetimepicker({
                locale: 'da',
                format: 'DD-MM-YYYY'
            });
        }));

    </script>
}

Step 1

@model MyWebsite.Models.StepOne
@{
    AjaxOptions options = new AjaxOptions();
    options.HttpMethod = "POST";
    options.InsertionMode = InsertionMode.Replace;
    options.UpdateTargetId = "divContainer";
}

@using (Ajax.BeginForm("StepOne", "Wizard", options))
{    
        <input name="DateOfBirth" placeholder="dd-mm-yyyy" type='text' class="form-control" id='datetimepicker2' />
        <button type="submit" name="nextBtn" class="btn btn-primary">Next </button>
}

Step 2

@model MyWebsite.Models.StepTwo
@{
    AjaxOptions options = new AjaxOptions();
    options.HttpMethod = "POST";
    options.InsertionMode = InsertionMode.Replace;
    options.UpdateTargetId = "divContainer";
}

@using (Ajax.BeginForm("StepTwo", "Wizard", options))
{

        <button type="submit" name="prevBtn" class="btn btn-primary">Back </button>
        <button type="submit" name="nextBtn" class="btn btn-primary">Next </button>
}

The controllers just simply return the partial view

WizardController.cs

[HttpPost]
public ActionResult StepOne(StepOne data, string prevBtn, string nextBtn)
{
    if (nextBtn != null)
    {
        if (ModelState.IsValid)
        {
            // Do stuff with data

            return PartialView("_StepTwo");
        }
    }
    return PartialView();
}

[HttpPost]
public ActionResult StepTwo(StepTwo data, string prevBtn, string nextBtn)
{
    CompleteRegistration obj = GetCompleteRegistration();
    if (prevBtn != null)
    {
        StepOne model = new StepOne();
        // Do stuff with data

        return PartialView("_StepOne", model);
    }
    if (nextBtn != null)
    {
        if (ModelState.IsValid)
        {
            // Do stuff with data
            return PartialView("_StepThree");
        }
    }
    return PartialView();
}

Oh, i've never ran into this in mvc before. Sorry to hear. I have had this problem in webforms though with update panels. Its because when your elements on the partial pages reload jquery doesnt rebind your selectors to those elements I think... maybe not. Anyway try to reference all the scripts you need in the partial view even though you have already reffered to them on the parent pages. — Harry, Mar 08 '17 at 19:54
Great! Your comment led me to the answer :) I googled "jquery rebind" and found this post: http://stackoverflow.com/questions/13940591/how-to-bind-unbind-and-rebind-click-events-in-jquery — Christian, Mar 08 '17 at 20:06

score 1 · Answer 1 · answered Mar 08 '17 at 20:07

So I found the answer after a clue was given by Harry. I changed the JavaScript to this:

    $(document).on('focusin', '#datetimepicker2', function () {
        $(this).datetimepicker({
            locale: 'da',
            format: 'DD-MM-YYYY'
        });
    });

and now it works :)

Javascript in MVC Partial view stops working when View is replaced

1 Answers1