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.
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 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 have my jquery mobile app pulling data from our mysql db using JSONP. The data is pulling fine, but the problem comes when I go back to the previous "page" in my app then click on a different option, it doubles the data on the next screen, and it will just keep stacking the data as many times as I do that. What am I missing?
The app doesn't look right in any browsers, but it looks fine in the ios simulator or appmobi simulator. I can post some code if needed, just know it won't look right in your browser.
Thank you for any help you can provide
$('#two').bind('pagecreate',function(event){
var img = getUrlVars()["st"];
var photo = $('#img');
$.ajax({
type: 'GET',
url: 'http://serverhidden/json/img.php?st='+img,
dataType: 'jsonp',
success: function(data) {
$.each(data, function(i,item){
var image = '<img class="stmap" src="images/states/lrg/'+item.img+' "/>';
photo.html(image);
});
},
error: function(e) {
//called if there is an error
//console.log(e.message);
}
});
});
Make sure you are not subscribing your event multiple times. It seems silly but is easy to do.
I would recommend you add logs to your JQM site so that you can see how many times your site is being updated.
You should also be aware that updating a JQMobile page often requires a call to a method to update content after a page is rendered. See here: jQuery Mobile rendering problems with content being added after the page is initialized
Hope those help.
So without any code from your project this is a shot in the dark but it seems like you populate a pseudo-page with information on pageshow with an .append() call. Instead of using .append(), use .html() as it will replace the information already present rather than add to it.
If each state has an individual page then you can bind to the pagecreate (or similar) event so the data will only be appended once rather than on each pageshow event.
I'm looking for a way to load a part of an external page (possibly selected by an id in the external page) into a div. Something similar to Ajax.Updater, but with the option of specifying an id to look for in the external page.
Does anything like this exist in prototype. I've been googling for examples without luck. If I can't find it soon I'll have to do some "gymnastics" with Ajax.Request and some function tied to onSuccess.
You could do something like this, though it is by no means an elegant solution.
new Ajax.Updater("container", 'www.babes.com', {
onSuccess: function() {
$("container").update( $('idOfSomeLoadedElement') );
}
});
I don't think there is an actual elegant way of doing this purely in js. Ideally, you'd make your AJAX request only for what you need. You might be able to do some server-side stuff to lop out what you don't need (basically, offload the onsuccess functionality above to the server).
Instead of AJAX you might get by with an iframe.
// dollar function calls Element.extend
var iframe = $(document.createElement('iframe'));
// control how and what it loads
iframe.addEventListener('onLoad', function() {
$('container').update(iframe.contentDocument.select('#someID').first());
});
iframe.setAttribute('src', 'http://URL');
// add it as invisible, content isn't loaded until then
iframe.setAttribute('hidden', true);
document.body.appendChild(iframe);
From a minimal test it's clear that you'll have to be as concious about cross-origin policies as any AJAX method, that is, it's a PITA.