I am using ajax to retrieve xml and xsl to create output HTML. when the processing is done, we are showing loading gif icons. For IE browser, the loading gif stops playing.. it freezes when there occurs an ajax postback. Could anyone suggest what could be done?
I guess you will be doing something like a jQuery's AJAX request. If so, in the success function, add this...
$.post({
url: 'url',
success: function(){
$('img').attr('src', $('img').attr('src'));
}
});
Found a solution... which worked. There were multiple postbacks, so calling one ajax post function at callback of another with setting async = true in jquery ajax solved the issue. There was no need of reloading the image.
Related
This is in reference to http://jsfiddle.net/DLy6j/
var echoHTML = '<img src="URL-TO-MY-IMAGE.JPG"/>';
$.ajax({
type: 'post',
url: '/echo/html/',
data: {
html: echoHTML,
delay: 2
},
beforeSend: function () {
$('#slider0-4').html('Loading...');
},
success: function (markup) {
$('#slider0-4').html(markup);
$('#slider0-4 img').on('load', function () {
//$(this).after('<div>Image loaded</div>');
alert('Loaded');
});
}
});
(jQuery wait till AJAX page is fully loaded).
This is my first attempt trying to use $.ajax
I cannot get my image to load. I have changed the echoHTML to the image-URL on my server, AND have tried uploading my html on there thinking it might not work offline, but to no avail.
My guess is that somethings wrong here "url: '/echo/html/',". Have tried using my image in the JSFiddle above there and it loads just fine.
Somebody show me the correct way to do this?
I think you've just been a little mislead by that jsfiddle example.
When the url '/echo/html' is being passed in, it is sending a request to that url, which handles the data that you pass through, and then passes something back to the success function. jsFiddle allows you to simulate ajax requests because they have an Echo API which has these pages built.. but when you call it, it is trying to call http://www.bilalbinsaeed.com/echo/html/, which does not exist.. which is throwing an error, which means the success function will not run properly.
You will need to create another file which handles your ajax request. I would recommend doing a little more research into what AJAX is, and how it works.
It loads an image for me. It is a little unclear what you are asking, but it seems like you are getting hung up on getting it to load from JSFiddle to your site. Don't try to do that. Cross-Origin Resource Sharing won't work on JSFiddle without changing the headers on your site.
i developed a simple web site which uses ajax to load content and while the content is loading, i'm displaying a progress. Everything works as expected on 1st ajax call but after that, it becomes a mess
page gets stuck on ajax call
i've written a function to listen to ajax call and show loading message, it doesn't work too and the page becomes very laggy and slow after the 1st ajax call.
Here is my ajax function.
function loadPage(path) {
$.ajax({
type: "POST",
context: document.body,
dataType: "html",
timeout: 10000,
url: path
});}
i tried to async to true but its true by default. still it didn't help. a demo of the problem can be seen at : REMOVED SINCE PROBLEM SOLVED
This works perfectly fine on the localhost but as soon as i uploaded it to my remote server,problems started to occur. can an expert please be kind point out what have i done wrong ? i tried removing all little the animations from this, non helped.
the problem was me loading javascript files on each ajax cal causing too many get and post requests and unnecessary dom changes.
your page seems to be slow with every click, because you are constantly loading JavaScript files on every click instead of just loaded the JavaScript once when the page loads, since you are grabbing the whole HTML page
like for instance.. every time you click on HOME .. these files are loaded in the page again..
POST http://3rsmj.com/new/home.html
GET http://3rsmj.com/new/js/liquid/jquery.easing.1.3.js?_=1382114556389
GET http://3rsmj.com/new/js/liquid/jquery.touchSwipe.min.js?_=1382114556390
GET http://3rsmj.com/new/js/liquid/jquery.liquid-slider-custom.min.js?_=1382114556391
if using AJAX its best to just load the content in or in fragments so not having to load all the scripts on every menu click .. or load the data and populate the data in the content
have you tried looking into the jQuery load() method for loading in HTML fragments so to not have to load in the whole HTML DOM again
http://api.jquery.com/load/
like this:
$("#load_area").load("portfolio_item.html #ID_of_content_to_grab");
the above would go to portfolio_item.html and grab the html fragment from the id #ID_of_content_to_grab and insert it into #load_area
UPDATE:
you can also try to empty the #load_area before you insert new content
$("#load_area").html("");
$("#load_area").load("portfolio_item.html #ID_of_content_to_grab");
or you can use jquery empty() .. or test both out
..
I'm having troubles with a script, related to wordpress and ajax.. I think it loads really slow, and if I click a clicked link, it takes the exact same time (not caching)
What I'm doing is, loading single.php in other page. Each time a link-post is clicked, that post is loaded through Ajax inside a div.
jQuery.ajax({
'url':post_link,
'type':'POST',
'beforeSend': function(){
jQuery(".container").html('<img src="ajax-loader.gif" />');
},
'success':function(results){
// some functions
}
});
Any ideas what's the problem here?
HTTP POST instructions aren't cached; you need to use HTTP GET/HEAD if you want caching to occur.
As for why it's "slow", the information you've given isn't enough to go on.
i have a web page that once it loads, it sends a lot of Ajax calls to fill some parts of the page. It's a Django template, it's sending around six calls with code similar to this :
$.get("http://127.0.0.1:8000/purchase/?name="+me.username, function(data){
$("#purchase").append(data);
});
sometimes they are called when the user clicks on a button, but they are mostly called when the page is refreshed.
Im new to Ajax, and I want to know if it's the right way to use this technology in an optimal manner. Is it alright to send Ajax calls similar calls that are separate ?
Thanks
For now i think just put those $.get() scripts into a jQuery ready function if you want them to fire when page loads and not on refresh... And yes its normal for a page to behave like this. That's what AJAX is meant for.
$(document).ready(function(){
$.get("http://127.0.0.1:8000/purchase/?name="+me.username, function(data){
$("#purchase").append(data);
});
//other $.get 's
});
Also use the jQuery ready() documentation.
I've got some links coming in from ajax that need lightbox functionality:
<img src='...'>
Normally this is given behavior via an on page load handler, but since the content is coming from ajax, the UJS isn't getting triggered.
Any way to do this?
If the content is coming from AJAX, then din't setup the event handling during page load. Instead, let the event bubble to the topmost container that is not being changed or replaced by AJAX. Worst case, use document as the topmost node.
$('<root element selector>').on('click', 'a.lightbox', function() {
// activate lightbox on the clicked element.
});
I'm not sure how you're triggering the ajax requests, but if it's with jQuery which seems likely, you can bind the lightbox in the success callback:
$.ajax({
url: '/route',
success: function (response, status) {
$('.lightbox').lightbox();
}
});
You can pass in a context to the jQuery selector so you don't re-attached the lightbox to links that are already in the page, for example if your ajax call is adding the links to a div with id 'lightbox_links', use this selector instead:
$('.lightbox', '#lightbox_links').lightbox();