PHP/JQuery/AJAX, few teething problems...

Question

Morning/Afternoon guys.

Writing some JQuery AJAX shizz and getting a bit stuck. I've got the actual proccess of calling the php file done perfectly, its just trying to get the html on the page to change in a way I want it to. I want to get rid of the a with the id of the one used in the ajax call etc, and replace it with the html passed from the PHP file. Code is as follows...

$(".save_places").click(function() {
  $.ajax({
    url: "{/literal}{$sRootPath}{literal}system/ajax/fan_bus.php",
    type: "POST",
    data: ({id : this.getAttribute('id')}),
    dataType: "html",
    success: function(msg){
      $(this).before(msg);
      $(this).empty();
      alert(msg);
    }
  });
  return false;
});

And the HTML is pretty simple;

<p class="links">
  <a href="#" class="save_places" id="bus_{$businesses.results[bus].id}_{$sMemberDetails.id}"><img src="{$sThemePath}images/save_places.png" alt="Save to My Places" /></a>
  <a href="#"><img src="{$sThemePath}images/send_friend.png" alt="Send to a Friend" /></a>
</p>

All the stuff in the success function is experimental mashing of code, any help please?

Thanks as always.

Answer 1

linksPara.replaceChild(newElements, oldAtag);

Answer 2

I think what you're after is .replaceWith(), like this:

$(this).replaceWith(msg);

This replaces the <a></a> with the content coming back in msg.

Also, if you're sure the elements have IDs, you can just do this:

data: {id : this.id},

Answer 3

$(".save_places").click(function() { 
  var self = this;

  $.ajax({ 
    url: "{/literal}{$sRootPath}{literal}system/ajax/fan_bus.php", 
    type: "POST", 
    data: ({id : this.getAttribute('id')}), 
    dataType: "html", 
    success: function(msg){ 
      $(this).html(msg);
    } 
  }); 
  return false; 
});