CODEWITHSUNDEEP
javascriptjqueryajax
mdgrech
mdgrech

Reputation: 955

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

Upvotes: 1

Views: 98

Answers (5)

Mark Kinsella
Mark Kinsella

Reputation: 205

You'll have to structure each included page to have the same div name, such as #container, where the data you wanted loaded into the #articles div is located. Then you can simply do:

$(document).ready(function() {
  $("#topics ul li a").click(function() {
    var url = $(this).attr('href');
    $('#articles').load(url + ' #container');
    return false; 
  });
});

This will only fetch the #container div and exclude all the extra html/body tags that you don't want and you don't have to deal with callback functions. See http://api.jquery.com/load/

Upvotes: 0

webdad3
webdad3

Reputation: 9080

This kinda sounds like what you are looking for... The following function calls a ASP.Net Webservice. I then use the JSON data returned from the Webservice to append html to my element. I think you can probably see from this example what I'm doing and apply it to your own code. Let me know if you need me to clarify anything.

$(function () {
    $.ajax({
        type: "POST",
        data: "{}",
        datatype: "json",
        url: "../webServices/myTestWS.asmx/testMethodTV",
        contentType: "application/json; charset-utf-8",
        success: function (msg) {
            var len = msg.d.rows.length;
            $('#sidetree').append('<ul id="treeview">');
            for (i = 0; i < len; i++) {
                $('#sidetree').append("<li><span class='expandable'>" + msg.d.rows[i].data + "</span></li>");
            }
            $('#sidetree').append('</ul>');

    });
});

Upvotes: 0

Matt Sach
Matt Sach

Reputation: 1170

Using

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

would vaguely work, but then you'd end up with the whole remote document loaded in, including duplicate head/body tags.

To get more complex, you could specify a callback function in the .load() and use it to read the returned content, collect only the children of the <body> element, and insert those children into your #articles element.

Upvotes: 0

user113716
user113716

Reputation: 322492

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

Upvotes: 4

Teja Kantamneni
Teja Kantamneni

Reputation: 17472

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

Try that....

Upvotes: 0

Related Questions