Jquery how to execute commands appended with ajax - javascript

I'm loading the content of a document into a div when I click one item of the menu. This foreign document contains jQuery commands. But is not running.
$(document).ready(function() {
$("ul.subnav li a").click(function() {
link = $(this).attr("href");
$.ajax(link).done(function(data) {
$("#div-page").html(data);
});
return false;
});
});
In the document that will be loaded there is more jQuery commands like this:
$(document).ready(function() {
// get lista de estados
$.ajax("../php/get_lista_estados.php").done(function(data) {
$("#estados").append(data);
});
$("#estados").change(function() {
id = $(this).val();
// get lista de estados
$.ajax("../php/get_lista_municipios.php?id=" + id).done(function(data) {
$("#municipios").html(data);
});
});
});
But when I load this document into div the commands don't run. Do I speak clear?

When it comes to jQuery and Ajax combined - it is important to understand how JavaScript is being implemented on DOM while script loads.
The reason why you are seeing answers suggesting using $.getScript() or to add <script src="your.js"></script> is because, once DOM is loaded - then that's it. If you wanted addition functions to be fired as long as it is coming from external script via ajax, just like what you are trying to do. You are attempting to load new function to 'already-loaded' DOM - and it's not how it works.
If you want any functions to respond to the ajax injection, then you need to have your script to be among those that get preloaded when DOM is run. So, that's how $.getScript() comes into the picture.
Usually, with that kind of injection you want to do, you will want to use $.getScript() to fetch your javascript functions / definitions, meanwhile your ajax to get/post the script that contains your HTML structures. You will be able to do this fancy injection in this method and play it around with jQuery.

You can use $.getScript to load and run it. Read the jQuery docs for more info
Example:
$.getScript("test.js", function(){
alert("Running test.js");
});

Use jQuery.getScript() or:
$(document).ready(function() {
$("ul.subnav li a").click(function(e) {
e.preventDefault();
link = $(this).attr("href");
$.ajax({
url: link,
dataType: "script"
}).done(function(data){
// No need to append data as the script has already been loaded and run.
// $("#div-page").html(data);
// Do any other stuff here..
});
});
});

Related

JavaScript - Wait until DOM modification within AJAX callback has been completed

So, I have the following code:
$(document).ready(function(){
//Retrieve menu html
$.get('/modules/menu.php', function(data) {
//Load menu html
$('main#main').prepend(data);
});
//Initialize Menu
menuInit();
$('#menuToggle').click(function() {
$('#main_menu').fadeToggle();
});
});
menuInit() successfully modifies DOM elements when included in the html directly instead of using $.get(),so the intialization has no issues, however, when using ajax, the intialization of the menu starts before the DOM elements are fully loaded.
I've made a little research and .prepend() does not support callbacks, so not an option.
Surrounding menuInit() with a setTimeOut() with 100 ms works, but it will most certainly fail with slow connections, I need something more dynamic.
Just put the rest of the code inside the callback so it executes after the data has been added to the page:
$(document).ready(function(){
//Retrieve menu html
$.get('/modules/menu.php', function(data) {
//Load menu html
$('main#main').prepend(data);
//Initialize Menu
menuInit();
$('#menuToggle').click(function() {
$('#main_menu').fadeToggle();
});
});
});

Ajax loaded part of a page - how do I make links in the loaded content work?

I load a part of my basketpage inside an accordion div in my header. This works great and shows my basket in a nice dropdown.
The last problem I need to solve with this is to get the buttons in the loaded content to work. Is it possible to write an callback that make these works? Im not sure even what to google for this one..
This is how the buttons is setup in the loaded content:
checkout
Script Im using to load the content:
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox');
use the callback function of .load().
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox', function() {
$("#_ec_oie2").on("click", function() {
if (UI.pb_boolean(this, 'click')) { }
return false;
});
});
checkout
You need to use a child selector for the event. You can attach an event to the .sub-menu element that will fire on the content loaded in through the ajax. Something like the following could work:
$(".dcjqg-accordion ul.sub-menu").on("click", ".action.actionbasket.checkout", function() {
if( UI.pb_boolean(this, 'click') ) {}
return false;
});
Notice the second parameter to the on method. It is a selector that will be used to look at the target of the click event. I used .action.actionbasket.checkout since that is what is on your a tag.
This code may not work exactly, but this should help get you in the right direction.
Here is the link to the jQuery documentation for the on method: https://api.jquery.com/on/

extend jquery load() function to show spinner inside div

is there a way to alter .load behavior so that it load a spiner inside any div that is loading data ?
example
<div class='content lside'></div>
<script>
$(document).ajaxStart(function() {
$('body').append('<div class="notice" style="position:fixed;top:40%;left:30%;z-index:99999;"id="loadingspin">loading</div>'); });
$(document).ajaxStop(function() {
$('#loadingspin').fadeOut().remove();
});
$('.content').load("<?=base_url();?>booking/<?=$day?>");
</script>
i use above script.
but what i actually want is that when ever ajaxstart the content of $('.content') is replaced with spinner until it finish loading the new content.
so is there a way i can extend .load to do that by it self and replace the ajaxstart,
so where ever $(div).load() is called a $(div).html('spiner'); is fired.
if not, is there a way .ajaxstart can reference the div that the content will be loaded into ?
please note: im currently using .ajaxstart and .ajaxstop in my header script in all my webpage to handle showing the spinners in general, but i want to replace it/extend it with div specific solution that would still work on any page without further editing into each and every ajax request.
thanks
probably something like this should do the trick. Override jQuery's prototype and save the old function.
(function(){
var oldLoad = jQuery.fn.load;
jQuery.fn.load = function( url, data, complete ){
/*
* do your stuff
*/
oldLoad.call( jQuery, url, data, complete );
}
})();
That changes the globally available jQuery.load() method for the whole page so »your stuff« should be executed even if other scripts call that method, a least after your re-definition of that function is parsed.

Execute $(document).ready() after $.load(), is that possible or is there an Alternative

I have page with a form and a table (to show results of the saved data using the form).
The form uses ajax to submit the data, data saved and the table should be reloaded afterwards.
The problem is that the table (which is loaded using AJAX($.load)) is loaded after the execution of $(document).ready(). which implies that the table does not have the required functionality.
Is there any approach where i can postpone the execution of $(document).ready() until the AJAX finish its loading, or shall i use a complete different approach like using iframe?
below is an example of my problem:
$(document).ready(function(){
//some code here that needed for the html in table.html e.g. datepicker, chosen, jqueryui, etc
});
<form>
//Inputs with a button to submit using ajax, where the result is displayed using table.php
</form>
<div id="tableOfContent"></div>
<script>
$('#tableOfContent').load("table.php");
</script>
You can do
$('#tableOfContent').load("table.php",function(){
//completed load actions here
});
But you should note that if you load images, they will not be loaded yet. If that is the case, you can make the contents of table.php initially hidden and do the same again inside for $('#tableOfContent img').load(). This would work for 1 image; multiple images is a bit more complicated, but feel free to ask if that is what you are looking for :)
You can delay the ready event using jQuery.holdReady():
$.holdReady(true);
// Do your custom stuff... the document may already be loaded.
$.holdReady(false); // Now the ready event will fire as soon as the DOM is loaded.
See http://api.jquery.com/jQuery.holdReady/
document.ready is called when the HTML of the page has finished loading, there's no two ways about it.
What you can do, however, is use live binding, which will attach handlers to elements that are not yet on the page.
Example:
$(".datepicker").live("click", function() {
$(this).datepicker();
})
Updated for jQuery >1.7 (this is also faster)
$("#tableOfContent").on("click", ".datepicker", function() {
$(this).datepicker();
})
Load the table data from within the ready function and use the complete event of the load() function to call the remainder
$(document).ready(function() {
// click bindings etc ..
$('#tableOfContent').load("table.php",function() {
// things to do once the table is loaded
});
});
load() documentation
$(document).ready() should be used for scripts that should execute, well, when document is ready.
If you need to execute something after an ajax call, you may write everything within a function and call it with the ajax callback.
function what_i_need() {
// bla bla
}
<script>
$('#tableOfContent').load("table.php", {}, what_i_need);//code had syntax error; '{)'
</script>
I'm not sure. Plus, you can call the function when document is ready too.
$(document).ready(function(){
what_i_need();
});

Loading Documents With Scripts in Ajax Tab

I am trying to call some script in a newly ajax loaded tab but it looks like the script blocks inside the tab are not being processed at all so when I go to call a function in the tab the function cannot be found. Is there a way to properly load the tab content such that the scripts are interpreted?
I have tried playing with the ajax options but that doesn't seem to help.
$("#tabs").tabs({
ajaxOptions: {
error: function (xhr, status, index, anchor) {
$(anchor.hash).html("This tab not yet built, sorry bub.");
},
dataType: 'html'
},
spinner: 'Loading tabs...',
});
In the tabs I have something like
<script type="text/javascript">
function SetupTab(){
alert('loaded');
}
</script>
but
$("#tabs").bind("tabsshow", function(event, ui){ SetupTab();});
cannot find SetupTab. Even if I allow the tab to load and then attempt to call SetupTab from firebug it can't be found.
if you try and bind any events/actions to a html element that does not exist yet i.e.
$(document).ready(function(){
//apply elemnt bindings here
});
when you do load the elements using ajax the elements will not take on the bindings you supplied on document ready because they did not exist at that point.
Add a call back to your ajax call to then bind any events/functions to ur new html elements, then this should work.
I think thats what you was reffering to.
EDIT: try this.
$("#tabs").bind("tabsshow", function(event, ui){ alert('loaded');});
EDIT AGAIN: you could try this.
make sure the page you are loading just contains the script itself and not the script tags and then use:
//lets say the data returned from your ajax call:
data = function SetupTab(){alert('loaded');}
eval(data);
then you could call that function no problem.
EDIT 3RD TIME: if you cant remove the script tags from the page your load you could regex the html. with this pattern.
pattern = /<script\b[^>]*>(.*?)</script>/i
urscript = data.match(pattern);
eval(urscript[1]);
this should work.
What you can do is also to detach your ajax call from the element (do just $.getScript for example).
Your loading tabs function should do something like this:
<div class="tabs" onclick="$.getScript('myScript.php?index='+$(this).index(#tabs"))">...
Then the server-side script should return something like this:
echo '
$("#tabs").eq('.$_GET['index'].')html("'.$myHTML.'");
/* Then the rest of your JS script (what you had in your HTML output) */
';

Categories