CODEWITHSUNDEEP
jqueryposthtmlappend
SoulieBaby
SoulieBaby

Reputation: 5471

jquery post and append data inside clicked div?

I'm trying to write up a function which will post data (and append the results inside a div) when you click on the div. I've got it so it will alert the data, but for some reason I can't get it to append the data back inside the clicked div?

The clickable div:

<div class="qaContainer">
  <h2>testing title</h2>
  <input type="hidden" name="catid" id="catid[]" class="catid" value="3">
</div>

And the jquery:

jQuery(".qaContainer").click(function () {
  var cat_id = jQuery(this).find(".catid").val();
  if (cat_id) {
    jQuery.post("/index.php?option=com_qa&view=questions&catid=2&Itemid=33", { catid: cat_id }, function(data) {
    jQuery(this).append(data);
  });
};

The data which it's returning:

<div class="info">
  <div class="question">testing 1</div>
  <div class="answer">testing 2</div>
</div>

Now I want the returned data to sit back inside the qaContainer div, after the hidden input, which is why I'm trying to use append, but it's not working. I'm getting this error in FF:

Error: b.createDocumentFragment is not a function
Source File: jquery-1.4.2.min.js
Line: 20

If anyone could help that would be great :)

Upvotes: 1

Views: 3982

Answers (2)

Chris Laplante
Chris Laplante

Reputation: 29658

I stored a reference to this in that to see if it makes a difference. Although, I don't think post() redefines this. Anyway, give this a shot:

jQuery(".qaContainer").click(function () {
  var cat_id = jQuery(this).find(".catid").val();
  var that = this;
  if (cat_id) {
    jQuery.post("/index.php?option=com_qa&view=questions&catid=2&Itemid=33", { catid: cat_id }, function(data) {
    jQuery(that).append(data);
  });
};

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630369

You can keep a reference to the <div> you clicked, like this:

jQuery(".qaContainer").click(function () {
  var div = jQuery(this),
      cat_id = div.find(".catid").val();
  if (cat_id) {
    jQuery.post("/index.php?option=com_qa&view=questions&catid=2&Itemid=33", { catid: cat_id }, function(data) {
      div.append(data);
    });
  }
});

As a side note, did you mean to pass the catid in the querystring (as a constant) and in the POST data?

Upvotes: 2

Related Questions