Adding html file to div tag jquery

Question

I am trying to add html page to <div> tag using jQuery. I tried using load, get function but that did not work. Any advice how this can work?

I am learning and working on turn.js with just some basic knowledge of jQuery, please advise.

I am using jQuery 3.1

 <div id="flipbook">
      <div class="hard"> Turn.Js </div>
      <div class="hard"></div>
      <div id="page1"> </div>
      <div> Page 2 </div>
      <div> Page 3 </div>
      <div> Page 4 </div>
      <div class="hard"></div>
      <div class="hard"></div>
 </div>

<script type="text/javascript">
    $("#flipbook").turn({
        width: 400,
        height: 300,
        autoCenter: true
    });

    $(function () {
       $.get("page1.html", function(data) {               
           $("#page1").append(data);
       });
    });
</script>

Are there any error getting thrown in the console? What is the network tab returning for the `get` request? — GAntoine, Nov 12 '16 at 17:59
jquery.js:4 XMLHttpRequest cannot load file:///home/me//page1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. This error i found in network tab same i tried in Edge / IE , same issue , i dont have firefox — Mushtaq Ali, Nov 13 '16 at 01:53
I see what the problem is, take a look at this: http://stackoverflow.com/a/10752078/1179430 — GAntoine, Nov 13 '16 at 03:55

score 0 · Accepted Answer · answered Nov 12 '16 at 18:02

0

Assuming you are getting data back from page1.html, try:

$.get("page1.html", function(data) {
    $("#page1").html(data);
});

answered Nov 12 '16 at 18:02

Simon Adcock

3,554
3
25
41

score 0 · Answer 2 · answered Nov 13 '16 at 07:38

0

It was not importing data due to file path was starting with file:/// .. once i installed lamp it started working ! Thanks

answered Nov 13 '16 at 07:38

Mushtaq Ali

15
3

Adding html file to div tag jquery

2 Answers2