Question

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 🙂

Answer 1

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?