部分加载时运行Javascript / Jquery

Question

All the examples/answers seem to show running a partial's javascript when the page loads.

This partial does not load when the page loads... It is loaded later on a button click using AJAX.

Ive tried my JS

inside:

$(document).ready(function () {

AND :

$(function(){

AND :

By itself

First doesnt trigger at all. Second and 3rd seem to trigger on second page load. I assume because the div that my js affects will exist. So how do I make it run when Partial loads ..

Answer 1

$(document).ready(function () {
    ...
});

Will trigger when the page is loaded (more concretely $(document).ready is wired to the document.DOMContentLoaded or window.loaded event) but because you load Partial with ajax, the page load event is already fired when the Partial is loaded.

If you use jQuery to load partial page via ajax I would suggest you to call your function from the

$ajax(...
}).done(function ( data ) {
    yourFunction();
});

Or if you use the AjaxHelper class (eg with razor @Ajax.ActionLink(... )) then use its AjaxOption's OnSuccess or OnComplete property to wire in your javascript function. Like the following way:

@Ajax.ActionLink("Load partial", "MyPartialAction", new AjaxOptions
{
    UpdateTargetId="partialContainer",
    OnSuccess="partialLoaded"
}

This code will load the Partial which is returned from the MyPartialAction action into the markup which has "partialContainer" id and after the Partial is loaded your javascript function named partialLoaded.

Answer 2

If you want to make it run when a partial loads, do it in the callback of whatever is issuing the request for the partial. If this request issuer is Jquery, it would be something like the following:

$.get(url, function (result) {
    // Do whatever you want here in the success callback.
});

If you are doing something with an MVC helper method such as Ajax.ActionLink, you can specify a jquery function to call upon response

@Ajax.ActionLink("NameOfLink", "ControllerAction", new AjaxOptions
{
    HttpMethod = "GET",
    OnSuccess = "javascriptFunction(data)"
})

function javascriptFunction(data) {
    // Do whatever you want
}