Question

Need basic help using JQuery and AJax. I have an ul

  <div id="topics">

<h1><a href="index.html">JQuery</a></h1>
  <h3>A Working Primer</h3>

<ul>
    <li><a href="articles/includingJQuery.html">Including JQuery</a></li>
    <li><a href="articles/tools.html">Tools of the Trade</a></li>
</ul>
  </div>

An empty div where I like the Ajax content to be loaded into on the same page as above:

  <div id="articles">
  </div>

and my script

$(document).ready(function(){
  $("#topics ul li a").click(function(){
 $('#articles').load('');

 return false; 
   });
});

Not exactly sure what to put in the load so its dynamic. Any help is appreciated 🙂

Answer 1

If the content is located at the href attribute location, then you need to get that attribute’s value:

$('#articles').load(this.href);

so try this:

$(document).ready(function(){
    $("#topics ul li a").click(function() {
              // use the content of the href attribute
              //     for the load parameter
        $('#articles').load(this.href);
        return false; 
    });
});