Question

I hope you can help me with this. I’ve been using jquery datepicker in a modal dialog. After some problems at the beggining (given by the z-index) it works just fine. The thing is that I have in my page content that keeps on being modified via .innerHTML property of the divs. For this case, I’m loading the content of the modal box via a partial view like this:

<div id = "newNotificationModalBox">
                <% Html.RenderAction("CreateNotification", "Notification"); %>
</div>

I’ve got an Add button that doesn’t submit my form, because I’m not interested in leaving the page, it just call via ajax to make the changes to the database, and displays a table with the data inserted on the right. This will allow the user to keep on inserting rows in the database till he finally decides to submit the changes, so the rows will be inserted. Till now it works just fine, I open de dialog box and date picker works perfectly.

The problem comes only in this case scenario. Whenever the user clicks in the Add button, and any of the fields has not been filled properly, I take the response from the ajax call in order to show the errors:

var view = $.ajax({
            type: "POST",
            url: "/Suspension/CreateTemporalSuspension1SF1C",
            data: dataString,
            async: false

        });
///
///Checks if the input has been valid, if not it will go to this point
///
        document.body.innerHTML = view.responseText;

        $("#Calendar").datepicker('destroy');
        var dateoptions = { dateFormat: 'dd/mm/yy' };
        $("#Calendar").datepicker(dateoptions);

But the calendar doesn’t work anymore. Any clue on why does it happens this way? I know the problem is when I reload the page content via modifying the innerHTML, do you know any kind of patch around this?

Answer 1

Have you tried:

$(document.body).html(view.responseText);

Instead of: document.body.innerHTML = view.responseText;

Also, you should destroy the datepicker before you replace it with the response.

So something like:

var view = $.ajax({
            type: "POST",
            url: "/Suspension/CreateTemporalSuspension1SF1C",
            data: dataString,
            async: false

        });
///
///Checks if the input has been valid, if not it will go to this point
///
        $("#Calendar").datepicker('destroy');
        $(document.body).html(view.responseText);

        var dateoptions = { dateFormat: 'dd/mm/yy' };
        $("#Calendar").datepicker(dateoptions);

I do agree with Khnie that you should definitely use a div specifically for validation errors and messages instead of replacing the whole body‘s contents.