CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvcasp.net-mvc-partialview
Robertcode
Robertcode

Reputation: 1009

Is there an event in an MVC 5 View or jquery raised when a partial view has been loaded and its elements are accessible

I have an MVC 5 view that acts as a parent view. Based on certain activities a user performs, I will load a partial view into the parent view. The partial view is loaded as part of a javascript function call. In my javascript call, I am loading my partial view with the content returned in the "data" variable below:

$.get(url, function (data) {
    $('#id-ContainerForMainFormPartialView').html(data);
});

The data is written to an HTML div as follows:

<div class="container" id="id-ContainerForMainFormPartialView">
</div>

Immediately after the $.get call I run the following statement to disable a button that is part of the view that has been returned and written to the div:

 $('#idAddLineItem').prop("disabled", true);

When the javascript function has completed the button is not disabled. Yet, I am able to disable the button using the same disable statement above using a button. I think that after the $.get invocation has written the partial view it is too soon to try and do something to any elements that are part of the partial view.

Is there an event I can hook into or something that will signal me when the time is right to try and do something to any of the elements of the partial view that has been loaded such as disabling a button which is what I am trying to do? Something like the javascript addEventListener() method that allows you to run code when certain events happen but in this case I need it to fire after a partial-view load is considered completely rendered and ready to use. An example would be greatly appreciated.

Thanks in advance.

Upvotes: 0

Views: 590

Answers (1)

Robertcode
Robertcode

Reputation: 1009

Based on blex's statement the solution is as follows:

The correct way to disable a button that's part of a partial view being output:

// Correct Approach
$.get(url, function (data) {
    $('#id-ContainerForMainFormPartialView').html(data);
    $('#idAddLineItem').prop("disabled", true);
});

The incorrect way to disable a button that's part of a partial view being output:

//Incorrect Approach
$.get(url, function (data) {
    $('#id-ContainerForMainFormPartialView').html(data);
});

$('#idAddLineItem').prop("disabled", true);

I originally had the disable statement outside the $.get call which allowed the code to run past it before the view was ready due to the asynchronous nature. Placing it inside the $.get allows it to not run until the partial view is done being output.

Upvotes: 1

Related Questions