I am loading an entire middle div via JQuery Ajax call and I simply want to run $(document).ready on the loaded page
header.php loads part of the page
var $next = $("<div class='nextab center'>").insertAfter('#content .current');
$next.load($this.attr('href')+ ' #content .center section' , function(resp) { ...
}
so for example when header.php loads career.php it does not run all the code that is inside the $(document).ready(function(){ that is on career.php
I was thinking of creating a function init on each page loaded but not sure how to call this function from the load callback
Thanks
function YourActionOnDocumentReady(){
// write whatever you want to do
}
And in document ready call the above function
$(document).ready(function(){
YourActionOnDocumentReady();
});
And use ajaxStop function to run the same code
$(document).ajaxStop(function(){
YourActionOnDocumentReady();
});
Hope it helps...
Related
index.html page :
I am loading the new.html page using ajax load method and then tried to change the content of the div#rr but it did not work!
any solution ?
why your code $('#rr').html('modfied'); is not working because you are calling the change before jquery ajax.load() method is able to load the content from your new.html and as result your id #rr is not found. So, instead of calling the modify code after the load statement call the modifying statement in your load()'s complete()
as:
$('#btn').on('click', function () {
$('.container').load('new.html', function () {
$('#rr').html('modfied');
});
});
and please go through the jquery documentation for more info on how to use the functions Jquery Documentation for Load() funciton.
Try to call the function inside the ajax call function.
$('.container').load('new.html',function(){
$('#rr').html('modified')
});
next time please do not put image for code.
I try to add css class with js to element.
I'm trying to add a CSS class to an HTML element via Javascript.
(function ($) {
"use strict";
$(document).ready(function () {
$('.delete').addClass('icon-trash');
});
})(jQuery.noConflict());
But when this element is loaded with ajax I need to refresh the page to see it.
How can i fix it ?
You have not used ajax in this, You have just used jquery.Read about Ajax Call and than use it.
If you want to go with this same code of yours than try to call this function onload
like <body onload="myFunction()">
Add this line of code $('.delete').addClass('icon-trash') on ajax success callback as below:
$.ajax({
...
success: function(data){
// if you want to play with response, data is what you want
// Add trash icon to every .delete element in document
$('.delete').addClass('icon-trash');
}
...
});
i'm trying to load .aspx page using jquery like this;
$('ul#menu li ul.collapse').on('click', 'li a', function (e) {
e.preventDefault();
var div = $('#content .container-fluid .row-fluid .span12');
var url = $(this).attr('href');
setTimeout(function () {
var htmlPage = div.load(url + ' #MainContentHolder',
function () {
//other stuff
});
}, 1000);
});
However, my .aspx page does have javascript embedded like this;
<div id="MainContentHolder">
<h1>Test Aspx Content</h1>
<div>
<script type="text/javascript">
alert("hello");
</script>
</div>
</div
When, i see the resulted HTML, i can see the it is loaded (using firebug). But it's not showing the alert() message
I have also read all other questions on stackoverflow but it's not helpful on this to me;
UPDATE: As suggested in asnwer, following code only works for the first time. I tried to turn off the cache:false and also tried from GET to POST;
$.ajax({
url:url,
success:function(data){
div.html(data);
}
});
$('ul#menu li ul.collapse').on('click', 'li a', function (e) {
e.preventDefault();
var div = $('#content .container-fluid .row-fluid .span12');
var url = $(this).attr('href');
setTimeout(function () {
$.ajax({
url:url,
success:function(data){
div.html(data);
//other stuff
}
});
}, 1000);
});
var htmlPage = div.load(url + ' #MainContentHolder',
function () {
//other stuff
});
As per the documentation of .load(),
If .load() is called with a selector expression appended to the URL,
however, the scripts are stripped out prior to the DOM being updated,
and thus are not executed.
Instead you may want to take your script in js file and use $.getScript(), which will load a JavaScript file from the server using a GET HTTP request, then execute it.
Edit:
Alternate way is to have only script in your page and load that page as shown in below link
jQuery .load() call doesn't execute javascript in loaded html file
OR
As already suggested use $.ajax() and in success callback function, you need explicitly execute your JS code as shown in this post. Use eval.
OR
You can load your dynamic page using .load and in success callback function use $.getScript as already suggested earlier.
I hope it helps!
Strange situation:
I am building a menu bar using jQuery and CSS.
In my JavaScript file, I have an on-ready function like so:
$(document).ready(function(e) {
mark_active_menu();
}
and...
function mark_active_menu() {
var elementWidth = $("nav li").width();
alert(elementWidth);
}
For some reason, even BEFORE all the document finish loading, I'm getting the alert message with an incorrect width. Only when I release the message, the rest of the document loads and I'm getting the right width as it should be.
Why my function is being called BEFORE all the document finish loading?
Is there a way to load the function only AFTER a certain element done loading (Example: the nav element)?
You can use window.load, it will be triggered after all the resource have completed loading.
$(window).load(function(e) {
mark_active_menu();
});
The load event fires at the end of the document loading process. At
this point, all of the objects in the document are in the DOM, and all
the images and sub-frames have finished loading, Reference
All the current solutions are just treating symptoms of the main problem. If you want your handler to execute after all your ajax loads, then you may use a promise.
var ajax1 = $.ajax();
var ajax2 = $.ajax();
jQuery(function($) {
$.when.apply($, [ajax1, ajax2]).done(function() {
// your code here
});
});
Try on the window load event :
$(window).load(function() {
//Stuff here
});
To be sure, Try window load
$(window).load(function(e) {
mark_active_menu();
}
Before(sometimes, doesn't load absolutely at the beginning, a few milliseconds after(0-200ms about)):
$(document).ready(function(){
$('body').hide(0);
});
After:
$(window).load(function(){
$('body').delay(500).show(0);
});
In my situation of work with AJAX and HTML. I have the same problem with functions $(document).ready() and $(window).load(). I solved this problem by adding handler of my event (that should work at HTML DOC), to the jQuery function that runs right after AJAX reguest was finished. Read this: "
jQuery.post()" (third parameter in the function).
In my code it looks like this:
var RequestRootFolderContent = function(){
$.post(
'PHP/IncludeFiles/FolderContent.inc.php',
function(data){
$('[class~="folder-content"]').html(data);
//Here what you need
$('[class~="file"]').dblclick(function(){
alert("Double click");
});
}
)
}
Basically my app work like that :
Index.php manage call to other pages.
Each page contains 2 function onLoad() and onClose() which are redefined in each page
Index.php call the pages and execute the onLoad
Basically, i preload the page in a hidden div, i execute the predefined $.onLoad function and the i put the loaded content into a visible div
My question is only about the onLoad() scope, i want to remove code from the jquery eval seq when i change page, but i need a way to define it in the page.php file without knowing the container
The eval/seq is probably the eval queue of jquery, can't found info about that, just obtain with firebug...
In 2 words, i would like to be able to remove injected dom and script when i change context (pages)
index.php
$.onLoad = function() {}
$("#blabla").onChange(function() {
$("#data_iframe").load(chaineUrl, {}, function(responseText, textStatus, XMLHttpRequest) {
$("#data_iframe").ready(function() {
$("#data_div").children().remove();
$.onLoad();
$("#data_iframe").children().hide().appendTo($("#data_div")).show(); $("#data_iframe").children().remove();
$.onLoad = undefined;
}
});
});
page.php
<script>
$.onClose = (function(){
$('#container').blablabla();
//alert("test");
});
$.onLoad = (function(){
$('#container').blablabla();
}
</script>
The problem is that the jquery EVAL/SEQ keep growing each time a page is opened
and there are some side-effect like calling multiple time a function...
I guess its a scope problem so can you help me correct my code
(i've try with or without the $ but doesn't change anything)
just for information
<div id="data_div"></div>
<div id="data_iframe"></div>
Thanks
I usually use $(document).ready instead of onload. No need to do the "onload" trigger in load complete function. The ready function within the page.php will do the same job.
And how about direct load into data_div?
index.php
$("#blabla").onChange(function() {
$("#data_div").load(page.php);
});
page.php
<script>
$(document).ready(function() {
$('#container').blablabla();
});
</script>
I didn't try page close function before, may be it is not what you want. But you can try:
<script>
$(document).ready(function() {
$('#container').blablabla();
$(window).unbind('unload');
$(window).unload(function(){
$('#container').blablabla();
//alert("test");
})
});
</script>