Jquery hide and show not working

Jquery hide and show not working

Hi,

I am new to jquery and learning it. I am facing a problem while I use jquery hide and show.
I want to show the error message below the login form from the success call back if some condition is not met. But the error message is appearing for a while and disappearing and I am left with login form. Please help. Please find the code at http://jsfiddle.net/yxW8L/1/

  1. $.ajax({
                url : "/RestTest/rest/getJson",
                type : "POST",
                dataType : "json",
                data : inputdata,
                contentType : "application/json",
                cache : false,
                async:false,
                beforeSend : function() {
                    $("#userForm").hide();
                    $("#loadingImg").show();
                },
                success : function(data) {
                    console.log(data);
                    if(data.invalidCred) {
                        alert(data.invalidCred);
                        $("#loadingImg").remove();
                        $("#userForm").show();
                        $("#valErrorDiv").show();
                    }else {
                        alert(data.SessionID);
                        $("#container").remove();
                        $("#responseDiv").show().append(
                                "<ul><li>" + data.OperatorID
                                + "</li><li>" + data.SessionID
                                + "</li></ul>");
                    }
                },