1

I have the following in my navigation menu:

<ul>
  <li><a href="#" id="folio1"><img src="img1.jpg" border="0" /></a></li>
  <li><a href="#" id="folio2"><img src="img2.jpg" border="0" /></a></li>
</ul>

Which calls the jQuery:

<script type="text/javascript">
    $("#folio1").click(function () { 
      $('#folioWrap').load('folio1.html');
    });

    $("#folio2").click(function () { 
      $('#folioWrap').load('folio2.html');
    });
</script>

This should update the div #folioWrap but right now it's just showing up blank. So, I have 2 questions:

1 - Is there a fundamental problem with what I've got here that's causing the blank page load?

2 - Is there a way that I can write the jQuery so that I only need one instance and can instead pass all the info from the anchor link? That way I could have a huge number of links which reference a variety of pages instead of creating a jQuery ref for each and every one?

brianrhea
  • 3,674
  • 3
  • 34
  • 57
  • 1
    Are you trying to access this on your local machine? Sometimes there are security issues to prevent you from loading a local file – Jonathon Bolster Jan 10 '11 at 15:38
  • no, it's in the same directory as the source page on the server – brianrhea Jan 10 '11 at 15:40
  • Is it a full HTML page? With `...` etc? I recommend opening it in Chrome developer tools with XHR Request Logging turned on. Then you can see what it's requesting / coming back with – Jonathon Bolster Jan 10 '11 at 15:41

3 Answers3

4

I think part of your issue might be you're running it on a local machine (and trying to access a local file through .load() which can cause issues at times. Another reason might be that the HTML file is a full one, causing your browser issues in rendering (for example, if it has another head, etc). You can load only a section of your page by doing:

$("#element").load("file.html #divName");

As for using the ID rather than duplicating the code, you can do this:

$("a").click(function () { 
  $('#folioWrap').load(this.id + '.html');
});
Jonathon Bolster
  • 15,811
  • 3
  • 43
  • 46
4

1

I think you forgot the jQuery onload event?

2

What I would do is create your anchor tags that you want to load ajax with some css class. There will probably be cases where you don't want to change the folioWrap content (for example: opening an external link)

<ul>
    <li><a href="folio1.html" class="load"><img src="img1.jpg" border="0" /></a></li>
    <li><a href="folio2.html" class="load"><img src="img2.jpg" border="0" /></a></li>
</ul>

<script type="text/javascript">
    $(function(){
        $("a.load").click(function (e) { 
            e.preventDefault();
            $("#folioWrap").load($(this).attr("href"));
        });
    });
</script>
hunter
  • 62,308
  • 19
  • 113
  • 113
3

You could store the url in the href attribute:

<ul>
  <li><a href="folio1.html" id="folio1"><img src="img1.jpg" border="0" /></a></li>
  <li><a href="folio2.html" id="folio2"><img src="img2.jpg" border="0" /></a></li>
</ul>

<script>
$("#folio1, #folio2").click(function (e) { 
    $('#folioWrap').load($(this).attr("href"));
    e.preventDefault();
});
</script>

This has the advantage that it doesn't break tabbed browsing, and it still works with javascript disabled. (Both these "advantages" assume that it doesn't look totally broken for folio1.html or folio2.html to appear on their own.)

As for your first issue with load not working, have a look at jQuery .load() not working in Chrome

Community
  • 1
  • 1
Emmett
  • 14,035
  • 12
  • 56
  • 81