javascriptjqueryajax

Basic JQuery Help


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 :)


Solution

  • 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; 
        });
    });