?
Solved

Jquery Tools - Overlay - Load External Page

Posted on 2012-08-13
6
Medium Priority
?
3,745 Views
Last Modified: 2012-08-14
Hello.  I downloaded the Demo from JQuery Tools here http://jquerytools.org/demos/overlay/external.html and I'm having trouble. Basically, I went back to the very beginning with the code I downloaded and cannot figure out why it DOES load an external page in the Demo on the site, but DOES NOT when I download the demo to my personal workspace.  I've attached the demo here.  

Made a modification to the overlay color, but that's it.  Can you help me figure out how to get the external pages to load in the <div> container?  See ZIP file attached. jquery-overlay.zip
0
Comment
Question by:webgirl29
  • 3
  • 3
6 Comments
 
LVL 16

Accepted Solution

by:
Steve Krile earned 2000 total points
ID: 38291460
When I try to run that demo on my PC, I get the following error in the browser console (running Chrome btw):

XMLHttpRequest cannot load http://jquerytools.org/demos/overlay/external-content.htm. Origin null is not allowed by Access-Control-Allow-Origin.


This is referring to the following code in the jquery tools library:

            // grab wrapper element inside content
            var wrap = this.getOverlay().find(".contentWrap");

            // load the page specified in the trigger
            wrap.load(this.getTrigger().attr("href"));


This bit of code find the anchor tag (a class="contentWrap") and picks up the href attribute.  Then, using jquery's built-in $.load() function, fills the contents of the overlay element with href target.

You will find all modern browsers will dis-allow this type of content loading.  There are work-arounds to this problem, but the easiest is to serve content from your own server.



So, a setup like this:

<a href="external-content2.htm" rel="#overlay" style="text-decoration:none">
  <button type="button">Show another page</button>
</a>

Would work perfectly provided there was a page called "external-content2.htm" on YOUR server.
0
 

Author Comment

by:webgirl29
ID: 38293464
Thanks. Once I placed all my files on the same testing server it worked. Question though... are we able to pull in an external page that's not on the same server? Like when I try to use http://www.google.com, it does not work.  Seems to only work when you pull in external content from the same server.  Is that true?  Or is it because it's part of the same domain name?
0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 38293477
XMLHttpRequest will be blocked when the page you are referencing is ON A DIFFERENT SERVER.  So, mysite.com cannot use $.load("http://google.com")


It really depends on your intent, but ultimately this is a HUGE security hole if it were allowed.  People do iFrames to show redirected content, or use JSONP services which ARE allowed to come from external domains to feed data rather than a "page".
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 

Author Comment

by:webgirl29
ID: 38293550
Ok, understood.  Thank you for the quick response. So as long as it's on the same server, I should be fine. If I was pulling content from a different "sister" company website that's on the same server (different domain though), you're saying that will work as well?  Just curious.
0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 38293559
Good question re: Domain versus Server.  I am actually not sure, but it would be easy to test.  My guess is it WILL NOT work.
0
 

Author Comment

by:webgirl29
ID: 38293632
Ok, not a problem.  I may test that out, but not a requirement for me at this time.  Was just curious.  Thank you for your assistance and feedback.  Much appreciated!
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

599 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question