0

I've researched this for a few days now and I can't seem to get a div from another page on my site to load in and empty div on my page. Ultimately I'm working towards the div results from another page opening up in a tooltip so that a user can select from a list of links but this is the first step.

I created a fiddle here http://jsfiddle.net/Learjet/3Mxcc/9/ and the external page that is necessary to do what I'm trying to do.

Is there something obvious here that I'm missing?

Here's the code

HTML

<div id="links"> <a href="http://jsfiddle.net/Learjet/VrQj3/" data="http://jsfiddle.net/Learjet/VrQj3/">Antioxidants</a>
</div>
<div id="results_after_hover">
<!-- Need Results after hover Here -->
</div>

JQuery:

$('#links a[href]').hover(function () {
$("div#results_after_hover").load('http://jsfiddle.net/Learjet/VrQj3/embedded/result');
});

Many thanks for your wisdom!

Humbly, EJ

Learjet
  • 1
  • 1
  • You forget to open your console – A. Wolff Jan 08 '14 at 16:56
  • I think you are confused. A "DIV in a different page" in your example is not exactly a DIV but a URL to a Fiddle result section, which apears on the Fiddle page in a small area but it is included there using a IFRAME. – Fabricio Jan 08 '14 at 17:05

2 Answers2

2

You aren't allowed to load another page like this for security reasons. If you open Firebug, and check the console tab, you will notice an error popping up :

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

You can only do this, if the page you are trying to load sends the access-control-allow-origin header.

If you want to know how to do this, look at this question on stackoverflow

Community
  • 1
  • 1
Timothy Groote
  • 8,614
  • 26
  • 52
  • Hi Tim, The source file is in the same site, they are both on the fiddle. Thanks for your help though. – Learjet Jan 08 '14 at 17:04
  • If you open your jsfiddle, and your console, you'll notice that the executing page is actually calling from a different subdomain (`http://fiddle.jshell.net`). this is in violation of the cross-domain policy – Timothy Groote Jan 08 '14 at 17:07
  • (of course, i have no idea if this is the same for your actual project, but still... look at your console) – Timothy Groote Jan 08 '14 at 17:07
  • Thanks Tim! I didn't notice it was a subdomain! I'm using it on the same domain in the source – Learjet Jan 08 '14 at 17:28
2

You may use a iframe like this:

$("div#results_after_hover").html('<iframe src="http://jsfiddle.net/Learjet/VrQj3/embedded/result"></iframe>');

http://jsfiddle.net/XS7q2/

But it will only load the full page. Not a specific element inside the page.

Fabricio
  • 839
  • 9
  • 17
  • That is probably the most sane and quick alternative. You could also try to load the page from code-behind and transfer it back via AJAX. this could make it possible to extract only a specific portion of the page (see http://stackoverflow.com/questions/14999573/jquery-load-external-site-page) – Timothy Groote Jan 08 '14 at 17:11
  • Here's the actual site: http://www.foodmaster.com/ in the 'Browse Ingredients' box when you hover over a link there I,m trying to get the results of the ".DIRECTORIES-CHILDPRODUCTS" ul on the next page to show in a popup (using a toolip). This way a user can skip the intermediary page and go right to the actual company listings. My first step is getting the call right, then I think I can manage getting it in a tooltip. Thanks for your patience friend! – Learjet Jan 08 '14 at 17:35
  • @Learjet - As said, browser security policy will not allow access to content inside another page using jQuery (or JavaScript in general). This said, the only hope you may have to make the tooltip come to live is doing what Timothy Groote said in the first comment: create a server side page to be called with AJAX. Alternatively you may build your page with the information you need hidden and then just display it on demand. Good luck! – Fabricio Jan 09 '14 at 07:41