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..

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..

• c#
• javascript
• ajax
• asp-mvc
• asp-mvc-4

Share Improve this question Follow asked Jan 25, 2013 at 17:01 MclovingMcloving 1,41022 gold badges1515 silver badges3131 bronze badges 1

• Can you post more code there is not enough here to determine your problem. $(function(){ should work in dynamic javascript as I am using this in several projects. I think something else is causing this – TheKingDave Commented Jan 25, 2013 at 17:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

$(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 (e.g. 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.

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
}