Develop Reference

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.

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.

How to execute javascript before document fully loads but after element is there?

I'm trying to write a very simple user content script for google.com, but the problem is that google's source code is lengthy. I want to execute code in javascript the instant that an element is in the document, but before the whole document has loaded.
Essentially, I wan't to change the source of an image before the rest of the page loads. I also want to modify html in a certain other div with a specific id. But again, I don't want to wait for the rest of the document to load before I start doing it.
How can I accomplish this? I am using jquery.

Try this:
var element = $([TagName]) || document.getElementsByTagName([TagName])[[occurance]];
function doSomething() {
// Do some magic.
}
element.addEventListener("load", doSomething, false); // Notice no brackets after the function call.
This adds an event listener to the element, and will wait until it has fully loaded until it runs the function (doSomething()).
Hope this helps.

Callback when web page download completes

When the user click on a tab in a web page, the tab opens and its corresponding page downloads from the server.
I want to add some UI in this page through JavaScript or jQuery. I know how I can add this but problem is if I execute my JavaScript function for adding UI on click of the tab, it does not work because the corresponding page has not been downloaded yet.
Basically, what I want to know such function that is called when the page completely downloads.

Have you used JQuery success ?? success handler will be called only after your response is ready.
Try this :
$.ajax({
url: "test.html",
context: document.body,
success: function(){
//Do the stuff here, hence downloading has been completed and response from server is ready
$(this).addUI("done");
}
});

add this in the body of your page..
<body onload="init()">
</body>
Basically your calling your init function -- which initiates all the other functions which you want only after the body of the webpage is loaded..

I have face this problem too.. Problem here is your content is not yet available before you could work on it.
any reference you give will result in returning Null
The solution can be .bind() & .live()
suppose this is your dynamic content
$('body').append('<div class="clickme">Another element</div>');
you can bind the element by,
$('.clickme').bind('click', function() {
// Bound handler called.
});
or register it for live content, by
$('.clickme').live('click', function() {
// Live handler called.
});
when no longer needed, you may unsubscribe the event on dynamic content by .die()
you may also find .delegate() & undelegate() useful as there are little issues with .live() & .die().
Check http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/ for choosing the one you need for your application.
Remember not to forget you ensure that content is loaded by ajax success as programmer_1 here, mentioned.
Good luck :)
Any further clarifications pls comment.

page fetched by AJAX cannot execute any javascript

I have been with that a whole day..
I have a home page(index.php) and i have a small menu in it(made up of buttons) and a <div id=tab_contents></div>
i have used AJAX in such a way that whenever i click on any of these buttons, another page is loaded in the tab_contents-div.ie:home_tab0.php, home_tab1.php, home_tab2.php for each button respectively.
The page that i want to fetch with ajax should contain a <body onload=initialize()> ...</body> function.or it can contain a javascript code snippet to trigger the initilization() function.
that is when the button is clicked,the page lets say home_tab0.php is loaded, codes inside the home_tab0.php should trigger the initialization() frunction.
i have tried every possible way in my knowledge to make it work but without success...:(
please if i can get any help for this i would be so grateful.

With jQuery it's easy to call any function after the ajax call has returned, and data is loaded. I guess that's what you want to do. There are a few examples here:
http://api.jquery.com/jQuery.get/
E.g:
$.get('home_tab0.php', function(data) {
$('#tab_contents').html(data);
initialize();
});

This is a common problem. I recommend using jQuery and letting it take care of this for you. Reimplementing what they've done would be a waste of your time.
http://api.jquery.com/load/
$("#tab_contents").load("http://www.foo.com/loadContent");

Accessing from the page in LowerFrame to the page in UpperFrame causes undefined error!

My website consists of two frames, let's say upperFrame and lowerFrame.
On the document ready of the page in lowerFrame, it access one of textbox located on the page of upperFrame.
Sometimes, since the upperFrame do NOT complete its loading, lowerFrame get the undefined while it access the upperFrame.
Let me know if there are Any solutions/checking to prevent this problem?

How about updating 2 vars in the parent of both frames: topReady and bottomReady. At the top and at the lower frames you set them to call a function that checks if both of them are true. If not it sets the appropriate var to true and once the 2nd frame will be calling the function it will trigger whatever action you want to.
Edit:
Another option is to try and use
$(window.parent.upperFrame).ready(function(){
alert('upperFrame loaded')
});

try jQuery .load() function
The load event is sent to an element
when it and all sub-elements have
been completely loaded. This event can be sent to any element associated
with a URL: images, scripts, frames, iframes, and the window
object.
Here is the sample code
Edited:
put code below in document ready of lower iframe.
$(function(){
$('#UpperIframeID', window.parent.document).load(function(){
var valueOFTextbox = (this).contents().find("#textboxID").val();
});
});
</script>
If it doesn't work in IE then put conditional statement and for IE use .ready() function.