0

index.html :

<div id="divTestArea2"></div>
<script type="text/javascript">

$("#divTestArea2").load("index-2.html #test");

</script>

index-2.html :

<div id="test"><b>Hello World!</b></div>

Why the "load" doesn't work?

Felipe Oriani
  • 37,948
  • 19
  • 131
  • 194
user3552862
  • 57
  • 7
  • 4
    Do you receive a js error in your console. That would be helpful. – idrumgood Sep 10 '14 at 21:49
  • 1
    Do you test it locally? – Ram Sep 10 '14 at 21:52
  • ReferenceError: $ is not defined index.html:61 The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. – user3552862 Sep 10 '14 at 21:54
  • Read this. http://stackoverflow.com/questions/8277462/jquery-append-external-html-file-into-my-page – Perlica Sep 10 '14 at 21:59

2 Answers2

2

Hypotheses:

  1. $ is not yet defined; your script may need to be run after jQuery is included in your page. You should see a console error if this is the case.
  2. index-2.html is not a valid relative URL based on the current page's URL. Look at your developer tool's network tab to see if the request for index-2.html is being performed. If you're getting a 404 error, then maybe the URL isn't correct.

Edit

Now that you've posted the error, we know the cause is #1; $ will only be defined if you're including jQuery in your page. If you already have that script tag, move your code to after that. If you don't, try adding something like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Jacob
  • 77,566
  • 24
  • 149
  • 228
  • 2
    jQuery can already have been included but is using `noConflict` also as happens so often on wordpress sites – charlietfl Sep 10 '14 at 21:57
  • And the OP might need to enclose the script in a document ready handler. – Jay Blanchard Sep 10 '14 at 21:58
  • 1
    @JayBlanchard if the script element appears after the referenced `div` then it will work. – Jason Sperske Sep 10 '14 at 21:59
  • That is why I said 'might' @JasonSperske. I have seen some cases where, even if all of the scripts were loaded prior to the closing body tag, none of the scripts worked without a document ready handler. – Jay Blanchard Sep 10 '14 at 22:00
  • 1
    It's not a bad habit to get into (especially when learning JavaScript and jQuery in the beginning), it just has the (admittedly small) trade off of waiting longer than is necessary. However it sounds like you have experienced some deeper edge case where it became necessary, were you using a script loader like http://yepnopejs.com/ or http://requirejs.org/? – Jason Sperske Sep 10 '14 at 22:07
  • 1
    No @JasonSperske, neither of those were being used at the time but Modernizr may have been. I'll have to check if that was the case in each situation though. – Jay Blanchard Sep 11 '14 at 12:27
-2

Try to add the # char to select the element by id and put your code inside the ready event. 

$(document).ready(function() {

    $("#divTestArea2").load("index-2.html");

});

You could separate the div into another file to get only the necessary part instead trying to read a div inside the file.

Felipe Oriani
  • 37,948
  • 19
  • 131
  • 194