CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
user3369592
user3369592

Reputation: 1447

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() {
    $.ajax({
        type : "GET",
        contentType : "application/json; charset=utf-8",
        url : "order/${orderID}",
        dateType : "json",
        cache: false,
        success: function (data) {
            if(data.statusCode=="OK")
            {
                $('#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">
        ${name}
    </div>
    <button id="fulfillButton" type="button" class="action-button shadow animate green">
        FulFill
    </button>
</div>
<button id="goBackButton" type="button" class="go_back_button">
    Go Back
</button>

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

Upvotes: 1

Views: 230

Answers (1)

eisbehr
eisbehr

Reputation: 12452

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.

Upvotes: 2

Related Questions