CODEWITHSUNDEEP
jquery
user597757
user597757

Reputation: 1

simple jquery to load external content from div problem

I found and tried to change a short bit of jquery code to load external content into an existing div that I can't get to work. The problem I'm having is trying to make the code more usable since I have many links on the page. I'm a novice so I'm trying to see if I could keep it simple and I don't know where the problem is. The bit of code I am trying to modify:

$(function() {
  $('div[class="subNav"]').click(function() {
    $('#mainText').load$(this).attr('href'); 
       return false;
    });
});

mainPage.html has a div that wraps the main text of the page.

<div id="mainText">Content Change Here</div>

I have multiple sub links (using an accordion menu & javascript) on this page under a different div.

<div class="subNav">

    <h3 class="heading">heading1</h3>
    <ul class="navListings">
      <li><a href="sub1a.html">link 1a</a></li>
      <li><a href="sub1b.html">link 1b</a></li>
      <li><a href="sub1c.html">link 1c</a></li>
    </ul>

    <h3 class="heading">heading2</h3>
    <ul class="navListings">
      <li><a href="sub2a.html">link 2a</a></li>
      <li><a href="sub2b.html">link 2b</a></li>
    </ul>

    ....and so on......</div>

All pages have the same mainText div for content. I just want to replace the mainText div on mainPage.html with the correct content from the sub-pages on click. Can someone help me? I'm guessing my code is a bit too simple....

I've tried many alternatives to the second line of code, but nothing works. I either get nothing to show up or the link just goes to page as if the script isn't even working. Thanks in advance to anyone that might be able to help...

Upvotes: 0

Views: 1377

Answers (2)

benmarte
benmarte

Reputation: 11

Change your code to this:

$('div.subNav').click(function() {
$('#mainText').load($(this).attr('href')); 
   return false;
});

Remember to wrap this in a document.ready function

Upvotes: 1

Raynos
Raynos

Reputation: 169391

$(function() {
  $('div[class="subNav"]').click(function() {
    // missing `(` after load. as well as everything else.
    $('#mainText').load$(this).attr('href'); 
       return false;
    });
});

What are you trying to achieve with .load ?

$("#mainText").load("url", function() {
    // what are you doing here?
    $(this).attr("href");
    return false;
});

This should work though for that:

$(function() {
    $('div[class="subNav"]').click(function() {
        $('#mainText').load($(this).attr('href')); 
    });
});

Upvotes: 0

Related Questions