Jquery Tools - Overlay - Load External Page

Posted on 2012-08-13
Last Modified: 2012-08-14
Hello.  I downloaded the Demo from JQuery Tools here 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.
Question by:webgirl29
    LVL 16

    Accepted Solution

    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 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

    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>

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

    Author Comment

    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, 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?
    LVL 16

    Expert Comment

    XMLHttpRequest will be blocked when the page you are referencing is ON A DIFFERENT SERVER.  So, cannot use $.load("")

    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".

    Author Comment

    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.
    LVL 16

    Expert Comment

    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.

    Author Comment

    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!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
    JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
    Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
    In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

    779 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

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now