Ajax ( this keyword) success callback issue

Question

I am having troubles using ajax to append HTML to dynamically generated 's

##### in the code is where the main points are

• I am using php as the back-end, and I am pretty sure it is fine, because I have debugged it. It seems like it has something to do with the jquery. It seems to not allow the html to be appended in the ajax call, but allows it outside.

Thank you for the help I really appreciate it. Please let me know if there are any misunderstandings and I will clarify ASAP.

And I have an on click event that will add html to the spans

$(document).ready(function () { 

    // Sort default refresh
    var selected_skill = $('#order').find(":selected").text();
    sortBySkill(selected_skill); ##### Creates the dynamic <span>'s #####


    $("#feed").on('click', '.post', showForm); ##### Problem lies within this code, where I am appending html to a <span> #####

});

It seems like the appending does not work in the ajax call, but works outside of it. Does anyone know why and how would I approach this problem?

function showForm(){
    // Check if the user is logged in
    var username = $('#username').val();
    var form_id = "form_comment_" + this.id;
    var comment_span = "comment_span_" + this.id;


    if ($("#" + form_id).length == 0)
    {
        //Displays all of the comments already made
        $.ajax({
            type: "POST",
            url: "ajax_calls.php",
            data: {fpost_id:this.id, xswitch:"SFC"},
            dataType: "json",
            error: function (qXHR, textStatus, errorThrown) { 
                console.log(errorThrown); 
            },
            success: function (result){
                // Display comments 
                console.log(result[0].username);
                for (var i = 0; i < result.length; i++){
                    var comments_html = result[i].username + " : " + result[i].comment + "<br>";
                    $("#span_post_" + this.id).append(comments_html); // ##### This is not being appended #####
                    $("#span_post_" + this.id).append("Why does this not append?");
                }
            }
        });
          $("#span_post_" + this.id).append("This appends fine"); // ##### THIS APPENDS FINE #####

    } else{
        $("#" + comment_span).remove(); // Remove the element if already exists
    }
    return false;
}

Essentially I have a sort by skill generating dynamic span's (where I want to add data to using ajax)

function sortBySkill(selected_skill){
        $.ajax({ 
            type: "POST", 
            url: "ajax_calls.php", 
            data: {skill:selected_skill, xswitch:"SBS"},
            dataType:"json", 
            error: function (qXHR, textStatus, errorThrown) { 
                console.log(errorThrown); 
            }, 
            success: function (result) { 
                for (var i = 0; i < result.length; i++){ // ##### Dynamically generated span #####
                    var str_post = "<span id='span_post_" + result[i].idPost + "'>" +
                    "<a href='' class='post' id='" + result[i].idPost + "'>" + 
                    "Username:" + result[i].username + " | " + 
                    "Steam: " + result[i].steam + " | " +
                    "Skill Level: " + result[i].skill + "<br>" + 
                    "Post: " + result[i].description + "<br>" + 
                    "Date: " + result[i].date + "<hr> </a> </span>";

                    $("#feed").append(str_post);
                }
            } 
        });
}

Answer 1

this inside the success handler represents the jhxQR object

You would need to save the reference of this and use it in the Ajax callback

1st Approach

 var self = this;
  // Save the reference
 //Displays all of the comments already made
        $.ajax({  ...

               success : function() {

                   //use self here 

                    $("#span_post_" + self.id).append(


               }

2nd Approach

A better approach it to use the $.proxy to to bind the reference to the invoked object.

3rd Appraoch

you can also pass the context parameter to Ajax

  dataType: "json",
    context : this, // in the list of options
    success : 

Answer 2

You'll probably wanna change these lines to something along these lines...

Assuming your result data set includes an id...(it might be fpost_id though)

  $("#span_post_" + result[i].id).append(comments_html); // ##### This is not being appended #####
  $("#span_post_" + result[i].id).append("Why does this not append?");

Or declare it before...

var id = this.id;
$.ajax({
        type: "POST",
        url: "ajax_calls.php",
        data: {fpost_id:this.id, xswitch:"SFC"},
        dataType: "json",
        error: function (qXHR, textStatus, errorThrown) { 
            console.log(errorThrown); 
        },
        success: function (result){
            // Display comments 
            console.log(result[0].username);
            for (var i = 0; i < result.length; i++){
                var comments_html = result[i].username + " : " + result[i].comment + "<br>";
                $("#span_post_" + id).append(comments_html); // ##### This is not being appended #####
                $("#span_post_" + id).append("Why does this not append?");
            }
        }
    });