Ajax embed page load not working

Question

I'm trying to use AJAX to load an html page located on my server into a div frame (iframe won't scroll properly using a custom scrollbar) and it loads fine in firefox but not anything else it seems (tho it was working in IE at one point I am pretty sure).

<div id="scroll" class="news frame" style="position:absolute;width:570px;height:430px;margin:0px auto;left:143px;top:70px;background:#fff;overflow:auto;overflow-y: hidden;">
<div id="load"></div>
<script>
   $(document).ready(function(){
        $('#load').load('http://www.bizzaromatic.com/news.html');
    });
</script>
</div>

Obviously I need some sort of cross-browser solution but my limited knowledge of JS and Jquery has led me to here.

Edit: If someone has a better method to embed a page in a frame that isn't iframes I will gladly listen to that as well.

JS/jQuery can't dot that. you need server-side code to get that URL and pass it to your JS — Michael B., Aug 29 '13 at 06:03
maybe a cross domain issue. see the conlsole window by pressing f12 key in most browser — Idrees Khan, Aug 29 '13 at 06:21
In Chrome I get this error "XMLHttpRequest cannot load http://www.bizzaromatic.com/news.html. Origin http://bizzaromatic.com is not allowed by Access-Control-Allow-Origin." — Bizzaro, Aug 29 '13 at 06:45
It's working in everything but IE right now. It was seeing my own website as a cross domain for some reason. However I am no longer getting the above error in Chrome or IE so... — Bizzaro, Aug 29 '13 at 07:14

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

There are topics with several solutions to this issue, check this topic: jQuery's .load() not working in IE - but fine in Firefox, Chrome and Safari

One of the answers (adapted to your code):

<div id="scroll" class="news frame" style="position:absolute;width:570px;height:430px;margin:0px auto;left:143px;top:70px;background:#fff;overflow:auto;overflow-y: hidden;">
  <div id="load"></div>
  <script type="text/javascript">
  jQuery(document).ready(function() {
      jQuery.get("http://www.bizzaromatic.com/news.html", function (data) { 
          data = '"' + data + '"';    
          $("#load").html(data);
          var newHTML = $('#load').html();
          $('#load').html(newHTML.substr(1,newHTML.length-2));
      });
  });
  </script>
</div>

Hope this helps.

edited May 23 '17 at 10:25

Community

1
1

answered Aug 29 '13 at 06:18

José SAYAGO

798
6
15

Still not working except in FF. As per a suggestion above I checked the dev console in Chrome and get "XMLHttpRequest cannot load bizzaromatic.com/news.html. Origin bizzaromatic.com is not allowed by Access-Control-Allow-Origin.". I tried to fix it via .htaccess but no luck so far. – Bizzaro Aug 29 '13 at 06:46
Ok so now it works in chrome adding "Header add Access-Control-Allow-Origin "http://bizzaromatic.com" but not in IE as of yet. – Bizzaro Aug 29 '13 at 07:04
I'm wondering if the origin (where you're using this frame) is the same as the one you're pulling the HTML file. To avoid cross-domain issues both elements must be on the same bizzaromatic.com domain. If not, then you could try something like this: [Cross-Domain requests with jQuery](http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/) – José SAYAGO Aug 30 '13 at 14:05

score 0 · Answer 2 · answered Aug 31 '13 at 22:33

Thanks to Dotnet Dreamer for the hint/reminder about browser console stuff. That was a launchpad to get this working.

I put:

Header add Access-Control-Allow-Origin "http://bizzaromatic.com"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

in my .htaccess and it all seems fine now. Thanks to everyone else as well for taking time out of your day to help.

Ajax embed page load not working

2 Answers2