How to append external content using ajax?

Question

hello

Please have a look

<div class="item">
    <div class="section">
        <a href="/test.php?id=1" class="clickme">Click Item 1 </a>
    </div>
</div>
<div class="item">
    <div class="section">
        <a href="/test.php?id=2" class="clickme">Click Item 2 </a>
    </div>
</div>
<div class="item">
    <div class="section">
        <a href="/test.php?id=3" class="clickme">Click Item 3 </a>
    </div>
</div>


$('.clickme).click(function(event) {
    event.preventDefault();
    var stringURL = $(this).attr("href");
    $.ajax({
        type: "get"
        , url: stringURL
        , data: "ajax=1"
        , success: function(html){ //so, if data is retrieved
            //append 
        }
     });    
}); //close click(    

If it were a single section area I could target it using its id and append content. But any ideas how do I know which section to populate with latest content depending upon the click and if the external content is already there (i.e. call made already) just update that section only. It would be nice if you help how to show/hide a loading image to that section only.

Thanks

Answer 1

You will have to let the javascript function know which section to update. Instead of using a class for every section, assign an onclick to every <a> which gives the function the section number of the section:

<a href="/test.php?id=2" onclick="javascript: updateContent(2);">Click Item 2 </a>

Also, give the sections unique id's (for instance):

<div class="section" id="section2">

Then you're JavaScript will look something like;

updateContent(id) {
    event.preventDefault();
    var stringURL = "index.php?id=" + id;
    $.ajax({
        type: "get", 
        url: stringURL, 
        data: "ajax=1", 
        success: function(html, id){ 
             //use javascript to update the correct section
        }
     });    
}

Please note that I'm not sure if the function(html, id){} in the success part will work, maybe you will need to create a seperate function for that.

Answer 2

As far as knowing which content area to populate, you can know which one was clicked using $(this), and can reference its section with $(this).parent() assuming the element you want is the .section element.

$('.clickme').click(function(event) {
    event.preventDefault();
    var stringURL = $(this).attr("href");
      // store the parent of the element clicked
    var $section = $(this).parent();
    $.ajax({
        type: "get"
        , url: stringURL
        , data: "ajax=1"
        , success: function(html){ 
                // Append html to the section
             $section.append(html);
        }
     });    
});

If the only thing that the <a> is doing is the AJAX call, then one option would be to unbind the event in the success callback.

var $th = $(this);

Then in AJAX success:

$th.unbind('click');

If that is not an option, then as far as knowing whether or not it has already been populated, you could do a find for some content received before you .append() (or before you even make the request if the content is known).

Another option would be to place some sort of marker, like a class, on the .section element, like:

$section.addClass('populated');

...to indicate that it has already been populated. Then check for that class, and prevent the ajax if it exists.

There are other options as well, depending on the actual circumstances.

Answer 3

well, you could in jquery, get the parent of the clicked $(href) object and then populate the 'section' div depending on that selection. you'd test for null and append or overwrite depending on that condition.

jim

Answer 4

First, assign some local variable inside your click function to be "this" (or a jQuery wrapper of "this"):

var that=$(this);

Because functions defined within that function (such as your success function for the ajax return) are closures, that means that your new variable will stay defined during the ajax call and return. So then, within your success function, you can do

if (html) {
    that.parent().append(html);
}

Answer 5

$('.clickme).click(function(event) {
    event.preventDefault();
    var stringURL = $(this).attr("href");
    var currentSection = $(this).parent().get(0);
    $.ajax({
        type: "get"
        , url: stringURL
        , data: "ajax=1"
        , success: function(html){ //so, if data is retrieved
            //append 
            $(currentSection).append(html);
        }
     });    
});

BTW, if you are using the "ajax=1" parameter just to identify if the request is ajax, you could completely do away with it. jQuery sends a "HTTP_X_REQUESTED_WITH" header with ajax requests and you could use this to detect is request is ajax. detecting ajax