user3369592 user3369592 - 1 year ago 38
Ajax Question

Ajax replace div with another div (new css)

I have a button and user's name on the template and if a user clicks on button, Ajax should replace user's name and button with some messages using new CSS styling.

This is my Ajax :

$('#fulfillButton').bind('click',function() {
type : "GET",
contentType : "application/json; charset=utf-8",
url : "/tt/fulfill/order/${orderID}",
dateType : "json",
cache: false,
success: function (data) {
$('#replace').replaceWith("<div class ="error_message">"+ data.body +"</div>");

error: function (data) {

alert("Something went wrong, please retry again");

This is my html:

<div id= "replace">
<div class="full_name">
<button id="fulfillButton" type="button" class="action-button shadow animate green">
<button id="goBackButton" type="button" class="go_back_button">
Go Back

However, when I clicked on the button, nothing happened. I am missing something here? I am using Jquery 1.6.

Answer Source

You code is fine in general, and working. The only thing went wrong, is the html escaping of the replace element:

// before
$('#replace').replaceWith("<div class ="error_message">"+ data.body +"</div>");

// after
$('#replace').replaceWith('<div class="error_message">' + data.body + '</div>');

And you should really update your jQuery version. 1.6 is a hundred years old! :)

Working example.