Ajax replace div with another div (new css)

Question

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.

@JaxTeller If I remove ""<div class ="error_message">" tag, it works perfectly. So the problem is that I am probably not using div tag correctly. — user3369592
– user3369592, Commented Jul 27, 2016 at 10:09

eisbehr · Accepted Answer · 2016-07-27 10:06:55Z

2

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.

answered Jul 27, 2016 at 10:06

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3369592 Over a year ago

I agree with you..but our framework is still using 1.6...I can not update it by myself..

eisbehr Over a year ago

This is up to you. ;) But it even works with 1.6, I've tested it. @user3369592

Collectives™ on Stack Overflow

Ajax replace div with another div (new css)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related