jQuery - document.ready not firing when content loaded with AJAX - javascript

I have a simple custom tabbing module, that loads tabs with an AJAX request (via $(elem).load()). On each page that is loaded with AJAX I have some JavaScript. The first time the page loads (via direct input of URL, not AJAX), the javascript fires up perfectly. When I navigate away from the page via the AJAX tabs, the javascripts from the pages aren't loading anymore.
Is there any way I can force them to execute?
(The javascript that is not firing is placed in a $(document).ready() function if that helps)

You need to use callback of load() function:
$(elem).load('source.html', function() {
// here you need to perofrm something what you need
ActionOnDocumentReady();
});
You can put all your actions in $(document).ready into some function (ex ActionOnDocumentReady()) and call it on load() callback.

the domeready event fires only when is initial dom is ready (like the name and the jquery-api suggest).
if you want to use jquerys load() and fire a function if that loading has been done, you'll have to use a callback-function (according to the api).
if you want to do the same thing on domready and load-events, the best way would be to define a new function for that:
function dostuff(){
// do some stuff here
}
and fire this function in both cases:
$(function(){ // domready | shortcut for "$(document).ready()"
dostuff();
})
$('#something').load('script.php', function() { // callback on load()
dostuff();
});

Put your $(document).ready() code in a new method. Lets call it methodA. Now call this methodA from $(document).ready(). Secondly, call the same method after ajax request is successful. That should solve your problem.

Related

Chrome [VM] files create event handler in every load

I use asp.net razor and I load part of page in a partial view by Jquery load function. Part of script in the partial view is a JavaScript event like this:
$("#FormId").on("submit", function () {
//doSomeThing..
//ajax request ..
$("ContainerDivId").load("UrlToAction"); //load partial view in ajax success function
});
The problem is event create by every load and bind to another handler in another chrome VM file so handler function call several times by click on submit button.
I solved the problem by a flag variable but I know there is a clean solution. Where did I go wrong?
Change your code that adds the event handler to remove the old one first:
$("#duplicateFacilityForm").off("submit").on("submit", function ...);

JQuery .load callback is called before .ready callback in loaded script, what is proper way of initialization loaded scripts?

In main document on button click I am loading content of some div with
$("#my_div").load(function() {
alert("Loaded");
});
The loaded content is just script
<script>
alert("Init outside");
$(document).ready(function() {
alert("Init inside");
}
</script>
And sequence of alerts is "Init outside", "Loaded", "Init inside".
Am I correct, that it is proper way to initialize loaded script in script body, means where alert("Init outside") resides? Not in .ready() handler?
Because in my real workflow I am definitely need to initialize script before .load() callback is processed. In .load() callback I am showing loaded modal, but before, the modal should initialize itself, i.e. set on('show.bs.modal') handler etc.
It's quite strange, that initialization should happen outside $(document).ready() handler if I need such sequence, so that's why I am asking.
UPD: The question is not a duplicate, cause it's related more on JQuery-defined sequence of initialization and callbacks.
It depends somewhat on what you're doing in the modal-initialising step, but if there's no asynchronous element to it you shouldn't need to put the initialising code & the code that actually shows it in separate callbacks. If the code blocks are in callbacks for different events, there's ambiguity around which one will run first - you want to know for sure they'll run in order.
For example:
$(document).ready(function() {
$('#modal').on('show.bs.modal', function() {
// your init code
});
$('#modal').modal('show');
}
Binding a callback to the show.bs.modal event as you've described is a synchronous action, so the code can be placed in the same block. .ready() just waits for elements to be ready (which is all you should need), while .load() waits for all content to be loaded, but either will ensure your elements have loaded before their callbacks execute.

How to check if specific id is called from jQuery?

I have a MainContent div which contains main content of the website which could be loaded from ajax.
how can i find out if $("#MainContent").load("someUrl") was called, so i am able to push new history state to the webbrowser?
Like LSletty said, if you want to know when it is called use the handler from .load() itself:
$("#MainContent").load("path/content.html", function(){
// Do stuff when load is called ...
});
More info here: jQuery load event
To take action after completion I would use the .done() handler.
Use it in the following way:
$("#MainContent").load("path/content.html").done(function(){
// Do stuff when load is done ...
});
From jQuery docs:
Add handlers to be called when the Deferred object is resolved.
More info here: deferred.done() jQuery

Onload Binding using knockoutjs?

I Want to execute a function when the page load but don't know how to do it. cause that I have a list but his data from to another place in the load.
It sounds like you are refreshing page content through an AJAX call and you want to make that AJAX call on the page load in ADDITION to binding it to an event.
Assuming that is the case, at the end of your ModelViewModel declaration, simply call the function. For example:
function SearchResultsViewModel(){
this.updateResults=function(){
//Some AJAX Call and action.
}
this.updateResults();
}
You bind the knockout viewmodel to the view as normal, then use
window.onload = function ()
{
//data from to another place in the load
}
or in jQuery
$(document).ready(function(){
//data from to another place in the load
)};
Since knockout is bound to the view, when you add items, the view will update automatically.

How to select an element loaded through the jQuery load() function?

I am currently having trouble with the following (here is some sample code first):
<div id="container"></div>
<script type="text/javascript">
$('#container').load('content.html');
$('.elementInContentHTML').fadeIn();
</script>
In short, I want to be able to access elements that have been dynamically added to a page without attaching them to event handlers.
I know about the live() method, but I do not want to bind my action to any event, i.e. I just want to run some actions with these new elements without clicking them, focusing, blurring, etc.
The load function is asynchronous.
Your next line runs before the content is loaded.
You need to put your code inside the load function's callback, so that it will only run after the new content is loaded:
$('#container').load('content.html', function() {
$('.elementInContentHTML').fadeIn();
});
You could try using the callback for when load completes? See http://api.jquery.com/load/
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});

Categories