Can someone help me with my ajax code?

Question

I wanted to change the visibility of the thumbnail to visible right after when I click the button what should I do? please help me on this one because I cannot figure it out by myself because I do not know so much about ajax and web programming. Thanks in advance.

 function ha(){ $('#tabExe').click(function(event){ $.ajax({ url:'backEnd/ROOMS.php', success:function(result){ $('#room1').css({ // this is just for style "visibility" : "visible", }); } }); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button style="border-radius:0px;" type="submit" name="tabExe" onClick="function ha();" id="tabExe" href="#Exec" class="btn btn-primary"> Executive Room </button> <div id = "rm1" class="col-xs-12 col-md-3"> <a id="room1" value="sa" href="#" class="thumbnail" style="visibility:hidden;"> <img class="img-responsive" src="../backEnd/res/img/login/roomActive.png" style="width:100px;"> </a> </div> 

Answer 1

If you just need to show the thumbnail (and you're not concerned about the response), include a beforeSend callback, like this:

$('#tabExe').click(function(event){
    $.ajax({
        url:'backEnd/ROOMS.php',
        beforeSend: function() {
            $('#room1').css({ // this is just for style        
                "visibility" : "visible",
            }); 
        },
        success:function(result){

        }
    });
});

This will call before making the ajax request. success and error only are called when the request completes.

Here's a fiddle demonstrating:

http://jsfiddle.net/jpattishalljr/rzr5mrL1/

EDIT: IF you need the thumbnail to show when a response comes back, then you'll want to look into the ajax response and see why success is not being called. One way to test is to add complete , something like this:

$('#tabExe').click(function(event){
    $.ajax({
        url:'backEnd/ROOMS.php',
        beforeSend: function() {
            $('#room1').css({ // this is just for style        
                "visibility" : "visible",
            }); 
        },
        success:function(result){

        },
        complete: function(results) {
            alert(results.status);
        }
    });
});

http://jsfiddle.net/jpattishalljr/rzr5mrL1/1/

Should alert (404)

Good luck.