user6410893 user6410893 - 5 months ago 94
HTML Question

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

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 pass the
requestId
and show the success
div
?

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


$.ajax({
url:
type:
data:
success: function(resObj){
$("#showResponseArea span").removeClass("hide");
var requestId = resObj.requestId;
}
error: funciton(resObj){
alert("Some Error Occured");
}
});

Answer

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); 
}