Document Ready Is Not Working Correctly In Partial View

My Main View: @Ajax.ActionLink('append smth', 'AddSmth', new AjaxOptions { UpdateTargetId = 'smthContainer', InsertionMode.InsertAfter })

Solution 1:

The code below is from the jQuery codebase:

 // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
    if (!document.body) {
        return setTimeout(jQuery.ready, 1);
    }

So the ready event waits till the body element has been created. If the partial view is added after body element has been created then that is why your function is executing too early.

In theory you could do something similar to execute code after the partial view has been loaded.

function createDatePicker( ) {

    if ( !document.getElementById("dateOfSmth") ) {

        return setTimeout( createDatePicker, 1);
    }

    // do stuff
}

Solution 2:

The ready event is fired a single time - when the DOM has finished being loaded - and doesn't fire again when you insert AJAX loaded content. If you add a ready event handler after that has happened then it will be executed automatically.

The problem is probably caused by a difference in how the two insertion modes - InsertionMode.InsertAfter and InsertionMode.Replace - handle <script> tags in the content.

If you can, simply call your:

$('#dateOfSmth').datepicker();

line after the AJAX content has been loaded.