60 comments found.
Hello acarignan100,
It looks like you have bumped into the same origin policy.
JavaScript wasn’t designed to handle cross domain security issues. As a result, what you are trying to achieve cannot be done with JavaScript alone. However I have a answer for you.
One solution to work around the same origin policy would be to set up a simple reverse proxy on the server, which will allow the browser to use relative paths for the AJAX requests, while the server would be acting as a proxy to any remote location. You can use this to remote to as many different websites as you’d like.
If using mod_proxy in Apache, the fundamental configuration directive to set up a reverse proxy is the ProxyPass. It is typically used as follows:
ProxyPass /external/ http://www.cardiocarelive.com/en_CA/guest/news/
In this case, the browser would be able to request /external/index.html as a relative URL , but the server would serve this by acting as a proxy to http://www.cardiocarelive.com/en_CA/guest/news.
Then in your JavaScript, you would be able to use the jQuery load() method as follows:
$(".CCL-PressReleases").simpleAjaxImageLoader({ //options
'ajaxLocation' : 'http://www.cardiocarelive.com/en_CA/guest/news',
'background' : '#ffffff',
'downloadSpeedSim' : 0,
'image' : '',
'selector' :'#CCL-PressReleases',
'zIndex' : 99,
'order' : 1
});
And everything will work.
Cheers, crivers
Hey, so I am trying to use this plugin and it doesn’t work in any browser on my Mac. I get a 404 error although, it does work fine in Live View in Dreamweaver. Is there something I’m doing wrong? Here is the page as of now:
http://www.platformq.com/EventMaterials/PQ-Site-Redesign/Site/News2.htmlAny feedback would be greatly appreciated!
Thanks
Hey rumbella,
This plugin is was tested an approved by myself an code canyon. It supports all major browsers including Google Chrome.
Click this link to my demo using Chrome and you will see what I mean:
http://codecanyon.net/item/ajax-image-loader-plugin/full_screen_preview/268112So the problem has to do with your code. To better assist you, copy some of your source code into this comment so i can help you further.
crivers
ok, it works fine bur not in Google Chrome… doesn’t load new content… any idea about?
thanks
Hey steveeyes,
If you can send me a link, I can better help you trouble shoot.
But the first thing that I’ve noticed about your code is that your not even using your page in the plugin settings. Your code should look like this:
$(".mydiv").simpleAjaxImageLoader({ //options
‘ajaxLocation’ : ‘dan.html ’,
‘background’ : ’#ffffff’,
‘downloadSpeedSim’ : 1000,
‘image’ : ‘ajax-loader.gif’,
‘selector’ : ’’, // or just remove this line all together
‘zIndex’ : 99,
‘order’ : 1
});
<div class="mydiv"></div>
Note, the only thing that I’ve done here was use the dan.html on the setting.
Let me know how it goes or if you need anymore help!
crivers
No need to reply, I give up.
This partially worked:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Jquery Simple Ajax Image Loader Plugin</title>
<link href="demo.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="../simpleAjaxImageLoader.js"></script>
<script type="text/javascript">
$(function(){
// Init Plugin
$(".imageArea").simpleAjaxImageLoader({ //options
'ajaxLocation' : 'ajax-page.html',
'background' : '#ffffff',
'downloadSpeedSim' : 1000,
'image' : 'ajax-loader.gif',
'zIndex' : 99,
'order' : 1
});
});
</script>
</head><body>
<div class="imageArea"></div>
</body>
</html>
But it only pulled in the images, not the content.
So next I tried i one of my sites so I changed the ajaxlocation to a site url and got a 404 (yes the url address was correct, I copied it from the browser address bar).
This probably works well for individual elements on a page, but to bring in a whole html page, it doesn’t work well. If it does, it isn’t documented well enough to explain how.
cheers.
I also tried this but it did not work either:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Jquery Simple Ajax Image Loader Plugin</title>
<link href="demo.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="../simpleAjaxImageLoader.js"></script>
<script type="text/javascript">
$(function(){
// Init Plugin
$(".imageArea").simpleAjaxImageLoader({ //options
‘ajaxLocation’ : ‘ajax-page.html’,
‘background’ : ’#ffffff’,
‘downloadSpeedSim’ : 1000,
‘image’ : ‘ajax-loader.gif’,
‘selector’ : ’’, // or just remove this line all together
‘zIndex’ : 99,
‘order’ : 1
});
</script>
</head>
<body>
<div class="sortingWrapper">
<div class="imageArea"></div>
</div>
</body>
</html>
I must be doing something wrong. Because I can’t get a whole page to load.
Here is the entire coding I used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Jquery Simple Ajax Image Loader Plugin</title>
<link href="demo.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="../simpleAjaxImageLoader.js"></script>
<script type="text/javascript">
$(function(){
// Init Plugin
$(“mydiv”).simpleAjaxImageLoader({ //options
‘ajaxLocation’ : ‘ajax-page.html’,
‘background’ : ’#ffffff’,
‘downloadSpeedSim’ : 1000,
‘image’ : ‘ajax-loader.gif’,
‘selector’ : ’’, // or just remove this line all together
‘zIndex’ : 99,
‘order’ : 1
});
</script>
</head>
<body>
</body>
</html>
Do I need to put something between the body tags?
I create a html file called dan.html with the above coding.
dan.html is in the same folder as ajax-page.html
Thanks
Hey steveeyes,
Sorry I am just getting back to you. I was on vacation. To answer your question, to get the entire page, just don’t include a selector. Using the selector option is only if you want to load a specific part of the site. Otherwise leave it blank and it will pull the entire page via AJAX .
For example use:
$(“mydiv”).simpleAjaxImageLoader({ //options ‘ajaxLocation’ : ‘ajax-page.html’, ‘background’ : ’#ffffff’, ‘downloadSpeedSim’ : 1000, ‘image’ : ‘ajax-loader.gif’, ‘selector’ : ’’, // or just remove this line all together ‘zIndex’ : 99, ‘order’ : 1 });
I’m around if you need more help.
Enjoy! crivers
I want to load an entire html page. Not just individual content. I read your instructions, but did not see an example of how to load an entire html page.
I tried the following coding, but it did not work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Jquery Simple Ajax Image Loader Plugin</title>
<link href="demo.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="../simpleAjaxImageLoader.js"></script>
<script type="text/javascript">
$(function(){
// Init Plugin
$(".imageArea").simpleAjaxImageLoader({ //options
'ajaxLocation' : 'http://www.filipinaeyes.com/email-asian2/lay3/layout5.html',
'background' : '#ffffff',
'downloadSpeedSim' : 1000,
'image' : 'ajax-loader.gif',
'selector' : '.image1',
'zIndex' : 99,
'order' : 1
});
</script>
</head>
<body>
</body>
</html>
I did not put any code in the body, because your example showed only individual content, not the whole html page.
Again, I want to load the entire html page (sorry to keep repeating this but someone already asked you this same question above but you must of misunderstood and did not answer it).
So the questions is, how do I code it to show the ENTIRE html page? Do I have to put coding in both the header and the body to show the ENTIRE html page?
I want to include the entire html page at: http://www.filipinaeyes.com/email-asian2/lay3/layout5.html
Thanks
Hey sparilla05,
Yes, on the demo, they are all loading content from an external page.
crivers
Do you have an example where it loads an external web page?
Yes. Its up on Code Canyon!
crivers
Hello,
Great !
Is the update available ?
Thanks,
Mick
Hey Mick,
This is an excellent question! I just added error handling! I added a handler for if the Ajax fails for whatever reason, and one for if the element you chose for your selector doesn’t exists on the remote page.
Enjoy! crivers
Hello,
Interesting, but would it be possible to display a notice if the Ajax request encounters an error ?
Error Response: Sorry but there was an error: 404 error ...
Thanks !
Mick
This is very clean.
Nicely done!
Hello SportsTipsWorld,
Yes, to simulate the Ajax fetch, there is a delay set because my server is so fast and I wanted to provide a useful demo. Note that this is a setting that you can turn on and off.
I know a lot of people who were looking for this kind of solution. I wanted to provide you with a way to control the aesthetics of the loader by allowing you to set a minimum for the loader to show.
Also, like i said before, this is a true solution to using an Iframe. Even though I called it Ajax Image Loader, it technically loads anything that you want. It loads Paragraphs, Headlines, Divs, Images ect. Anything that exist on the remote page can be loaded.
crivers
Nice.
I note you are using some form of delay to throttle the text from loading. In the bottom div you made.
IS this to simulate ajax fetch delay . Or can the speed be adjusted, so as not to produce a “pseudo delay”
