2

I used this code as an easy example to grab the content of another HTML file and put it in a div, whenever I click the link. It works great in Firefox and Safari, but not in Chrome, IE or Opera.

<a class="ajaxLink" href="RS.html">Click to load RS content</a>

<div id="page">
    Initial TEXT - will be substituted with RS when clicking ajaxLink
</div>

<script>
    $(function () {
        $('a.ajaxLink').click(function(e) {
            e.preventDefault();
            $('#page').load($(this).attr('href'));
        });
    });
</script>

In Chrome, IE & Opera, whenever I click the link, nothing happens, independent of the content of the HTML file. Might it be my code is not compatible?

To be honest, I got this code from here: Javascript wont load into ajax div

I do not fully understand how the ($(this).attr('href')); works, but understood that it should be correct to load the HTML in #page.

Community
  • 1
  • 1
JuliaWatanabe
  • 67
  • 1
  • 9
  • 1
    Code looks fine. Track the request in the network tab of your browser's dev tools (e.g. Firebug, Dragonfly etc) and see if it's loading the content OK or not. Also check the console for errors. – Mitya Mar 15 '14 at 22:39
  • Maybe event listener is no being registered to anchor at all. Register is using $(document).ready(function(){$('a.ajaxLink').click(function(e) { e.preventDefault(); $('#page').load($(this).attr('href')); });});, since script might be loaded before the dom is ready. – Tauri28 Mar 15 '14 at 22:41
  • you are fast :) - I just found this in the Chrome console: ' OPTIONS file:///G:/WEBSITE/TEST-2014-01/RS.html **No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.** jquery-1.11.0.min.js:4 **XMLHttpRequest cannot load file**:///G:/WEBSITE/TEST-2014-01/RS.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. ajax-main.html:1` --- I don't understand – JuliaWatanabe Mar 15 '14 at 22:46
  • I'm having the 2 involved html-files locally on my HDD, in the same folder. So I wonder why some browsers won't allow it, and where I would have to add something to give access.. – JuliaWatanabe Mar 15 '14 at 22:56

2 Answers2

2

There is no problem with your code my friend try it on mozilla instead of chrome it wont work on chrome because

You won't be able to access the URL from same domain due to the same-origin policy. As the source (origin) page and the target URL are at different domains, your code is actually attempting to make a Cross-domain (CORS) request, not an ordinary GET in simple words : for localhost and getting page from same domain u can;t access the file

Suraj Rawat
  • 3,685
  • 22
  • 33
  • ah ok, I didn't know that this also does not work for localhost, if both files are in same folder :-/ - so how do I from now on test my site locally? – JuliaWatanabe Mar 15 '14 at 22:59
  • you can test your site on mozilla firefox or any other browser which is not using chrome engine :) – Suraj Rawat Mar 15 '14 at 23:02
  • hgrmpf. thanks a lot. At least I have a reason... Ok I also found this [here](http://stackoverflow.com/questions/3849200/localhost-cross-domain-ajax) --- seems not too easy to accomplish – JuliaWatanabe Mar 15 '14 at 23:05
  • it seems to work in browserstack.com, though :) -- but slooow – JuliaWatanabe Mar 15 '14 at 23:25
  • [works with Chrome --disable-web-security](http://superuser.com/questions/384871/overriding-access-control-allow-origin-restriction-in-google-chrome) – JuliaWatanabe Mar 16 '14 at 00:29
  • is it possible to do with windows machine ? in chrome not chromium ? if u get the solutio kindly post here ok thnx frnd – Suraj Rawat Mar 16 '14 at 03:46
  • yes if we talk about the same thing. I just created another shortcut to windows chrome-browser like this: `"D:\blah\Google\Chrome\Application\chrome.exe" --disable-web-security` – JuliaWatanabe Mar 18 '14 at 19:57
0

The $(this).attr('href') simply takes the 'href' attribute from the anchor (in this case 'RS.html')

You should debug your code by adding some breakpoints / console.log statements to find out at what point its not working (the click event should be firing at least), I cannot see any reason that Chrome would behave any differently.

DaveB
  • 2,953
  • 7
  • 38
  • 60
  • thanks. Click seems to fire, at last, because when clicking, the console in Chrome updates itself by returning the error messages (see my comments above) – JuliaWatanabe Mar 15 '14 at 22:57