Show Success message is not Working in JavaScript

Question

$.ajax({ 
     type: "POST",
     url:'/saveLayout',          
     data: {id : layoutId, section :  arrSection},
     success: function(response){  
               $('#successMsg').addClass("errorBox");
               document.getElementById('successMsg').innerHTML="Your data has been successfully          saved.";
              }
    });

Show success message in ajax success function is not working in second time in Crome.
The success message works at first time. But its not working after that.

Answer 1

Your code is reusing the same HTML block to display the success message, so the second message will simply replace the first. If you want it to display two success messages at the same time, then you will need to append the message. Is that the problem?

Here is an example of appending the message:

$.ajax({
    type: "POST",
    url:'/saveLayout',
    data: {
        id : layoutId,
        section : arrSection
    },
    success: function(response) {
        $("#successMsg").addClass("errorBox").append("Your data has been successfully saved.");
    }
});

Answer 2

I think you need to remove the errorbox class before add.

$('#successMsg').removeClass("errorBox"); 
$('#successMsg').addClass("errorBox");