0

I am trying to learn JQuery and am having trouble with a simple task. I have a page (dir: root/admin/indexContent.html) where I want to load the contents of a h2 tag with the ID #header1 from another page (dir: root/index.html).

Here is the script in the head of indexContent.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
     $("#indexHeader1").load("../index.html #header1");
});
</script>

The h2 tag I want to load from index.html:

<h2 id="header1">Home</h2>

Where I want the h2 tag to load on admin/indexContent.html:

<div id="indexHeader1"></div>

From my understanding $("#indexHeader1") is the selector for where to load the content, and the argument in .load() is the path to the file I would like to load, but this script does nothing. Anyone know why?

Edit: After adding console.log($("#indexHeader1").length) to my code, and reading my console I got:

1                                                    indexContent.html:10
GET http://highstreetdeliwb.com/admin/images/navigation/logoClear.png 404 (Not Found)                                              logoclear.png:1

along with a few more lines of GET http://site/admin/images/whatever.png. I don't understand why it's trying to get those images, I just want a single H2 element. Also of note is that those images have the wrong path.

http://highstreetdeliwb.com/admin/images/navigation/logoClear.png

Should be:

http://highstreetdeliwb.com/images/navigation/logoClear.png
Russell Anthony Carpenella
  • 15
  • 1
  • 8
  • What have you done to debug this? Have you looked at your browser's JS control to see if there are any errors? Have you looked at the Net tab to see if the request is sent correctly and gets the correct response? Have you added some `console.log` statements to see if the code is being executed? Have you checked that the element you are looking for is being found (e.g. with `console.log($("#indexHeader1").length)`? – Quentin Mar 13 '15 at 18:57
  • Nothing wrong with the code.. Make sure that you are running the page from a server (eg: apache. ). Opening the html file directly wont work in some browsers (like firefox) – Sarath Kn Mar 13 '15 at 19:04
  • I just updated my post with some more information. It looks like my pathing is wrong somehow – Russell Anthony Carpenella Mar 13 '15 at 19:17
  • For just a test, try replacing "../index.html #header1" by fully qualified path of index.html. It appears "admin" is being added based on where your ajax code is running and not with reference to where index.html is. – Allen King Mar 13 '15 at 19:22
  • @AllenKing , I just tried that to no avail. The console shows it's still searching for files in admin/images – Russell Anthony Carpenella Mar 13 '15 at 19:29

1 Answers1

0

Your code seems right, but in case have you tried to use the ajax() function to get content from another page? Since you have to get a tag, you can then easily append it.

$.ajax({
url: '../index.html',
dataType: 'html',
success: function(html) {
    var div = $('#header1', $(html)).addClass('done');
        $('#indexHeader1').html(div);
    } 
});

Give it a try.

Edit I have modified the code with your ids and with the link I mentioned you in the comment.

d_z90
  • 1,213
  • 2
  • 19
  • 48
  • This actually makes my page load something! Unfortunately it loads the entire page (text contents, broken images). Any idea why it's returning the entire index.html and not just the H2 element with ID header1? – Russell Anthony Carpenella Mar 13 '15 at 19:33
  • Maybe the correct answer is on this link: http://stackoverflow.com/questions/5611746/jquery-ajax-load-certain-div. I am going to update the code for you. – d_z90 Mar 13 '15 at 21:16
  • Yes! This works! Interesting note, my console is still displaying those image errors, but I guess it doesn't matter because I won't be messing with those images. Thanks a ton! – Russell Anthony Carpenella Mar 13 '15 at 22:57
  • Glad to hear that buddy! Good luck the rest of your code! – d_z90 Mar 14 '15 at 09:29