jQuery Show/Hide Div as per the ajax response and pass the response's requestId to the success Div

Question

I have the below code for show/hide success div as per the service call\'s response plus i need to pass the Service Response\'s request to the Success Div. How do i

Answer 1

First of all you are removing the hide class from wrong TAG span which does not have that class. hide class should be removed from from the parent div with id="showResponseArea" which has the hide class, secondly You need to wrap the <<requestId>> in span with an id. like

<div id="showResponseArea" class="alert hide">
<span>
    <strong>Success !! </strong>Your request <span id="requestId"> // Request id goes here</span> has been successfuly created !!! 
</span>

Then in the ajax success function

success: function(resObj){
    $("#showResponseArea").removeClass("hide");
    $("#showResponseArea").removeClass("alert-danger");
    $("#showResponseArea").addClass("alert-success");
    //OR $("#showResponseArea").removeClass("hide").show();

    var requestId = resObj.requestId;   
    $("#requestId").text(requestId ); 
},
error: function(err,xhr,status){
    $("#showResponseArea").removeClass("hide");
    $("#showResponseArea").removeClass("alert-success");
    $("#showResponseArea").addClass("alert-danger");
    //OR $("#showResponseArea").removeClass("hide").show();

    $("#requestId").text(xhr.responseText); 
}

Answer 2

When you are getting response msg you can use it as you want in your html. You can modify response message as you want, so use .html() in your javascript code to manipulate your response msg. Your response for example can be "<strong>Success, great, foo foo foo!<strong>" or "<strong>Error, foo foo foo!<strong>". Use ajax request as function to show response, generate response message in your req page.

jsFiddle

HTML:

<div id="showResponseArea" class="alert alert-success">
    <span></span>
</div>

JS:

$.ajax({
    url:
    type:
    data:
    success: function(msg){
        $("#showResponseArea span").html(msg); //you will paste your response msg to the span
    }
    error: funciton(msg){
        alert("Some Error Occured");
    }
});