jQuery Loads .aspx Page But Doesn't Execute the Script Inside - javascript

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!

Related

HTML link with GET parameters: load page html and javascript before executing ajax request

When I paste the HTML link below in my address bar or press the browser "previous page" button my ajax GET request is executed before the html content is fully loaded resulting in my ajax returned content being displayed above my nav bar and therefore breaking my site.
If the same request gets executed from within the site then everything is fine.
How can I make sure the page HTML and javascript loads before the ajax request is fired?
EDIT: SOLVED (answer in post below)
HTML LINK
https://domainName/?action=listy&p=test
JS pushstate
var container = document.querySelector('.lnk');
var url = "";
container.addEventListener('click', function(e) {
if (e.target != e.currentTarget) {
e.preventDefault();
if (e.target.getAttribute('name')) {
var data = e.target.getAttribute('name')
url = "?action=list&p=" + data;
history.pushState(data, null, url);
}
}
e.stopPropagation();
}, false);
window.addEventListener('popstate', function(e) {
window.location.replace(url);
});
JQuery AJAX
$(document).ready(function() {
// .....
success: function(dataBack) {
$('.content-area').html(dataBack);
},
});
PHP
if(isset($_GET['action']) && !empty($_GET['action'])) {
$action = $_GET['action'];
$var = $_GET['p'];
switch($action) {
case 'list' : list($var);break;
}
}
This works for me (Note this uses the jquery library):
$(document).ready(function () {
Your code here...
});
This will wait for the page to load then run the function. I personally use this for animations but then the animations also take more time for me so I have to also include the setTimeout function like this:
setTimeout(function () {
Your code here...
}, 1000);
It waits a specific amount of milliseconds before executing the function.
Turns out the issue was coming from my index.php structure;
I moved the php code in separate files and included it at the end of index.php instead of the top.
Now Im having other issues but the main question is resolved.

How to call function after ajax content fully loaded like $(window).load() or window.onload?

I'm using ajax but is there any option to call function after ajax content fully loaded like $(window).load() or window.onload? When i'm in fresh page everything working fine with $(window).load() or window.onload function because some scripts work after window complete load. But the problem is in ajax and when i click on a link and page is dynamically load contents from another page so we don't need $(window).load() or window.onload function but because some script only work when window loaded or content fully loaded so how to call function after ajax content fully loaded like $(window).load() or window.onload ?
function windowload() {
//Some functions works only after window load
};
$(function() {
$(window).on('load', windowload);
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
var $this = this.href;
$.ajax({
url: '' + $this + '',
dataType: 'html',
success: function(html) {
var div = $('#style', $(html));
$('#style').html(div);
//call windowload but not working
windowload();
//Also tried this but not working
$('#style').on('load', function(){
windowload();
//Some functions work only after ajax content fully loaded
});
});
});
Edit :
I need a function after ajax content fully loaded not after ajax request complete.
I have been trying to find the solution to this exact same problem for hours. What worked for me was
$(document).ajaxComplete()
I put my code in there and when Ajax was complete and the content of the div fully reloaded, I added the style I wanted to add. Hope this helps someone. Calling the method from ajax success won't work.
If you need to call a single function at multiple points in the pages lifecycle (as you describe above, where the logic is needed on both page load and also when an AJAX request completes), then you can extract the required logic to its own function to be called as needed. Try this:
function htmlLoaded() {
// Some functions work only after window load
}
$(window).load(htmlLoaded); // called on page load
$(function() {
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
$.ajax({
url: this.href,
dataType: 'html',
success: function(html) {
var styleHtml = $(html).find('#style');
$('#style').html(styleHtml);
htmlLoaded(); // called after the AJAX request completes successfully
});
});
});
});
Also note that I made a couple of amendments to improve the logic in your JS code.
Try this:
$("#Style").ready(function(){
console.log('Style is fully loaded.');
windowload();
});
Hope this will help.
When you call a function you must use the () symbol like windowload().
Here is the fixed, well-indented code : (I removed the empty quotes, useless here)
function windowload() {
//Some functions works only after window load
};
$(function() {
$(window).on('load', windowload);
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
var $this = this.href;
$.ajax({
url: $this, // Removed the empty quotes which are useless here
dataType: 'html',
success: function(html) {
var div = $('#style', $(html));
$('#style').html(div.html());
$('#style').ready(windowload);
}
});
});
});
By adding a new script tag which will run the windowload() function, we solve the problem. Because when this script is runned all HTML content placed before this tag has been loaded.

run jquery code on loaded page via jquery ajax request (load)

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...

Jquery manage local script with full ajax site

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>

JQuery event binding

I'm loading from DB some html (using ajax post request), it looks like:
<div id="slides_control">
<div>
</div>
</div>
With html I also load JS-code:
<script>
$('#slides_control a').bind('click', function() {
alert('achtung');
});
</script>
Script goes right after the html (in received data).
But when I click at some link inside new html, I don't see the alert. What's wrong?
I also tried to bind it after ajax ended:
$.post('page.php', {}, function(data) {
document.write(data);
$('#slides_control a').bind('click', function() {
alert('achtung');
});
});
Didn't help me.
You probably running bind function before your html has been loaded, so it does not find element
So, put your code to run on dom load:
$(function(){
$('#slides_control a').bind('click', function() {
alert('achtung');
});
}):
Try wrapping the jQuery call:
<script>
$(function(){
$('#slides_control a').bind('click', function() {
alert('achtung');
});
});
</script>
execute this script when data is loaded. You are executing this script before data is loaded.

Categories

Resources