Roland Mendoza
Roland Mendoza

Reputation: 5

Can someone help me with my ajax code?

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>

Upvotes: -1

Views: 55

Answers (1)

Jack
Jack

Reputation: 9388

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.

Upvotes: 1

Related Questions