Problems with datepicker

Question

Hello, 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

If you just need to display the error message from the server, you don't have to use innerHTML, because as you guessed, that wiped out your calendar. You could just jQuery to manipulate your DOM structure. You could decide to have a placeholder div for the errors (which would be empty initially), then you could append some content (in the case of error from the server is returned) to that and later use .empty() to remove the added child div. The placeholder div does not even need to be in the HTML, but could be created dynamically on the fly. My point is I suspect you could solve your problem easily by manipulating your DOM structure and avoiding the side-effects of wiping things out with innerHTML.

Answer 2

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.