jQuery load works on Dreamweaver but not in browsers

Question

I used the .load() function. It works in Dreamweaver's Live View, but not in Firefox, Chrome, or IE.

Here is my HTML section:

<script src="js/jquery.js"></script>
<script src="tabsPull.js"></script>
<h1>Homework Assignments</h1>
<ul id="button-menu">
    <li id="a1"><input class="no" type="button" onClick="ChangeActive(1)" value="Mon"></li>
    <li id="a2"><input class="no" type="button" onClick="ChangeActive(2)" value="Tues/Wed"></li>
    <li id="a3"><input c    lass="no" type="button" onClick="ChangeActive(3)" value="Thurs/Fri"></li>
</ul>
<div id="tabInner" class="tabInner">

</div>

The ChangeActive() is in a separate JS file (tabsPull.js):

var active = 0
function ChangeActive(active){
    if (active==1) {
        document.getElementById("a1").className = "active";
        document.getElementById("a2").className = "";
        document.getElementById("a3").className = "";
        $('#tabInner').load('http://axoplanner.weebly.com/monday.html #content');
    } else if (active==2) {
        document.getElementById("a2").className = "active";
        document.getElementById("a1").className = "";
        document.getElementById("a3").className = "";
        $('#tabInner').load('http://axoplanner.weebly.com/tuesdaywednesday.html #content');
    } else if (active==3) {
        document.getElementById("a3").className = "active";
        document.getElementById("a1").className = "";
        document.getElementById("a2").className = "";
        $('#tabInner').load('http://axoplanner.weebly.com/thursdayfriday.html #content');
    }
}

What's the problem? It works in DW, but why not the browsers??? The reason I pull things from Weebly is because I need others to update it, and Weebly is easier.

Odds are that if you looked at the error console in the browser it would report an error message that you could plug into a search engine and discover that you're violating the same origin policy. You need to do some basic debugging (the first step of which is looking at your error messages) and not just report "it doesn't work". — Quentin, Nov 27 '13 at 00:18
@Quentin There are no relative errors, and then I click on a button, this pops up: _[16:21:48.508] GET http://axoplanner.weebly.com/monday.html [HTTP/1.1 200 OK 182ms]_ — Brandon Nguyen, Nov 27 '13 at 00:26
Is there a way around this? I heard something about _CORS_ but I'm still confused on how to use it. — Brandon Nguyen, Nov 27 '13 at 00:47
Stop testing from a file on your hard disk and use the same origin for the host page as the files you are loading with Ajax. — Quentin, Nov 27 '13 at 00:48
I'm testing on a domain separate from Weebly. I'm on domain.x10.mx and want to pull from axoplanner.weebly.com — Brandon Nguyen, Nov 27 '13 at 01:07
[Duplicate](http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy) — Quentin, Nov 27 '13 at 01:10

score 1 · Answer 1 · answered Nov 27 '13 at 00:42

1

See this page from the jQUery documentation.

From the Documentation:

"Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol."

So, DreamWeaver must not have the security restrictions that most browsers have, so it works in DreamWeaver. But an absolute path will not work as an argument for .load() in most browsers.

answered Nov 27 '13 at 00:42

zsaat14

1,110
2
10
20

Is there a way around this? I heard something about _CORS_ but I'm still confused on how to use it. – Brandon Nguyen Nov 27 '13 at 00:47
@BrandonNguyen Yes, there is a way around it. I don't know about CORS, but here is a discussion about how to use PHP to get around it: http://stackoverflow.com/questions/14999573/jquery-load-external-site-page – zsaat14 Nov 27 '13 at 01:58

jQuery load works on Dreamweaver but not in browsers

1 Answers1

Related