CODEWITHSUNDEEP
javascriptajaximagebutton
Evan
Evan

Reputation: 5

Need to Show a gif on button click

I am working in Unbounce. I want a gif of a spinner to be hidden, but show when the user clicks the button. I have a button labeled #lp-pom-button-279 and an image labeled #lp-pom-image-288

I tried using JS and CSS to hide/show the gif but for some reason I only see it hidden or completely shown – it doesn't load on click. 

<script>
  $('#lp-pom-button-279').click(function() {
  $('#lp-pom-image-288').show(); //<----here
  $.ajax({
    ....
    success: function(result) {
      $('#spinner').hide();  //<--- hide again
    }
  }
</script>

<style>
  #lp-pom-image-288 {
    display: none;
  }
</style>

Upvotes: 0

Views: 3441

Answers (3)

Syno
Syno

Reputation: 1136

You don't need to use ajax to simply hide an image. First, you have to hide the picture and on button click, you show it.

You can solve this problem with the jQuery function hide()/show() or change the style with the jQuery css() function.

with hide() and show()

$('#picture').hide(); // hide at beginning

$('#button').click(function(){
  $('#picture').show(); // show on button click
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Show picture</button>
<br />
<img id="picture" src="https://dummyimage.com/600x400/000/fff"/>

with css()

$('#picture').css("display", "none"); // hide at beginning

$('#button').click(function(){
  $('#picture').css("display", "block"); // show button on click
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Show picture</button>
<br />
<img id="picture" src="https://dummyimage.com/600x400/000/fff"/>

Upvotes: 2

Pingolin
Pingolin

Reputation: 3417

The id you use in your success callback function is wrong:

$('#lp-pom-button-279').click(function() {
  $('#lp-pom-image-288').show(); // <- Show spinner here
  $.ajax({
    url: 'https://reqres.in/api/users',
    success: function(result) {
      $('#lp-pom-image-288').hide(); // <- Hide spinner here
    }
  });
});
#lp-pom-image-288 {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="lp-pom-button-279">Button</button>
<div id="lp-pom-image-288">Spinner</div>

Upvotes: 0

ellipsis
ellipsis

Reputation: 12152

You are hiding the spinner with wrong id. 

success:function(result){
       $('#lp-pom-image-288').hide();  //<--- hide again
   }

Upvotes: 0

Related Questions