I'm using jQuery to Ajax submit a comment and append it after the submission form when the AJAX status is successful. However it's not working correctly.
HTML:
<div class="reply_form_div">
<textarea name='reply' type='text' class="form-control reply" rows="3" ></textarea>
<button type="submit" STYLE="align: right;" class="btn btn-info reply_button yGreenButton">Submit</button>
</div>
jQuery:
$(function()
{
$('.reply_button').click(function(){
var reply = $(this).siblings('textarea').val();
$.ajax({
type:"POST",
url: base_url + "interview/reply_upload",
data:{reply: reply},
dataType: "json",
success: function(data,status){
if(data.state == 'succ')
{
this_a.html('Success');
$(this).parent().append("<b>Hello world!</b>");
}
else
{
this_a.html('fail');
}
}
});
});
}):
The server end language is working correctly, and I can see the append information if I place it outside the ajax brackets.
Thanks!
The issue here is that $(this)
refers to the AJAX response when inside of a callback. In this case, you need to cache a reference to the original element that fired the click event.
$('.reply_button').click(function(){
var $this = $(this);
Now you can perform the append in the success using the cached reference defined above.
$this.parent().append("<b>Hello world!</b>");