Looking to display a gif when a user clicks a button

I need help with making a spinner gif hidden in Unbounce and then show when the user clicks a button. The button is labeled #lp-pom-button-279 and the image is labeled #lp-pom-image-288

My attempts to use JS and CSS have resulted in the gif being either always hidden or always shown – it doesn't appear on click like I want it to.

<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>
javascriptajaximagebutton

Answer №1

To hide an image without using ajax, you can simply hide the picture initially and then reveal it upon button click.

This issue can be resolved using jQuery's hide()/show() functions or by modifying the style with the css() function.

Using hide() and show()

$('#picture').hide(); // Initially hide

$('#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"/>

Using css()

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

$('#button').click(function(){
  $('#picture').css("display", "block"); // 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"/>

Answer №2

The spinner is being hidden using an incorrect ID.

Upon successful completion of the action, the spinner with the ID 'lp-pom-image-288' should be hidden again.

Answer №3

The identifier specified in the success callback function does not match:

$('#lp-pom-button-279').click(function() {
  $('#lp-pom-image-288').show(); // <- Display 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Discovering a button press using the Gamepad API: A Step-by-Step Guide

I'm currently building a web page that can detect button presses on an Xbox controller and display a boolean value based on the pressed button. Right now, I have successfully managed to detect when a controller is connected and show it as a string. Ho ...

javascripthtmlgamepad-api

Instant Access to a Precise Slide

Using a slider named mySlider or SL_Slider, which is powered by the MooTools library. When on the page with the slider, there is a simple script for the href to call the appropriate slide: <a href="javascript:mySlider.numPress(3);">link</a> ...

javascripthtmlmootools

How can parameters be passed to a JavaScript or jQuery function?

I am currently utilizing a JS/JQ function to convert values into currency by adding commas. Although the function is running smoothly, I am encountering an issue when attempting to pass parameters to it. Kindly provide assistance on how to successfully pas ...

javascriptjqueryfunctionparametersparameter-passing

When using Ajax in Jquery and expecting data of type JSON, the response always seems

Looking to create a basic jQuery Ajax script that checks a user's discount code when the "Check Discount Code" button is clicked? Check out this prototype: <script> jQuery(function($) { $("#btn-check-discount").click(function() { c ...

javascriptjqueryajaxwordpress

Adding AngularJS to Syncfusion grid or making the rows clickable and running AngularJS functions can be achieved by following these steps

I'm currently incorporating angularJs and Syncfusion to display data in a table using the Syncfusion grid (). However, I'm encountering difficulties in utilizing angularjs functions within this grid: <div class="table-responsive grid-tog ...

javascriptangularjssyncfusion

Utilizing the JQuery .not() method to fade out all div elements except for the one that is selected and its corresponding children

I have a grid consisting of images, each with a hover function that changes the opacity of a div. The image is set as a background image, while the information is placed within a div in each grid-item. <div class="grid"> <div class="grid-it ...

javascriptjqueryfadeoutchildren

Ways to activate onChange multiple times for a single item within material ui's autocomplete feature

I am utilizing the autocomplete component in the Material UI. Upon selecting an item, the onChange props are triggered and certain actions are performed. However, I am encountering an issue where I can select the same object multiple times without the on ...

javascriptreactjsautocompletematerial-ui

Best practices for transferring data in node.js (unresolved)

Is it possible to pipe a file from an external server through localhost using Node.JS? (Imagine loading localhost as if it were another site like ) Here is the scenario: A PC requests http://localhost:80/highres/switch.html The Node application then ...

javascriptnode.jsproxynode-modulesvpn

Leveraging jQuery to manipulate an SVG file

jQuery is designed to work within HTML pages that contain JavaScript code. While SVG and HTML both use the same DOM Level 2, SVG is XML-based and employs ECMAScript. What potential issues could arise from utilizing jQuery with SVG? Is it more advisable t ...

javascriptjqueryhtmldomsvg

Npm publish seems to be stuck without generating any output

I'm having trouble trying to publish a package that I created. The files can be found at this Github Repo. When I run the command npm publish, it just seems to hang without any errors or output. I've attempted logging in using npm login and npm a ...

javascriptnode.jsnpm

Guide to refreshing the webpage content via ajax with Laravel View/Layout approach

Currently utilizing Laravel 4, I am looking to refresh a view and update the content (essentially change the language) Upon arriving at the index page : In my controller : public function getIndex() { $lang = $this->retrieveLang("FR"); ...

phpajaxlaravel-4

Addressing the issue of audio files not being cached by IOS web browsers

I am currently developing a language learning website where users can listen to audio by clicking on objects. Many of the site's users are in remote areas with slow Internet connections, so I need to cache the audio files before each activity loads to ...

javascriptiosreactjsaudiosafari

What mechanism triggers the browser to run a callback function upon receiving a cross-domain JSONP request?

When conducting cross domain AJAX requests, how does the returned resource (callback wrapped around JSON) get executed within the client's callback method? Is this functionality (callback execution) built into the AJAX client itself, or is it a funct ...

ajaxcross-domainjsonpjquery-callback

Guide to periodically updating and displaying a <b-img> element in VueJS

Recently delving into the world of JS and Vue. Within my Bootstrap-Vue project, there's an image element that looks like this: <b-img src="/api/camera" fluid alt="camera"></b-img> Whenever the page is refreshed, the br ...

javascripthtmlvuejs2bootstrap-vue

What is the best way to store the JSON data that is returned in a JavaScript function as a variable

My goal is to save the client's IP address in a variable after fetching it in JSON format from api.ipify.org. I have managed to display the IP if I alert the result, but I am struggling to store it in a variable. This code snippet works: <script& ...

javascriptjsonfunctionvariablesip-address

The URL not functioning properly after including the .active class with JQuery

This website is built on the Shopify platform. To highlight an active link in a subcategory list, I am using JQuery and CSS to add the .active class to the element. However, after adding the JQuery code, the link element is not functioning properly and d ...

javascriptjqueryshopify

A simple guide on integrating personalized color palettes into Material-UI Theme

One enhancement I'd like to make in my theme is the inclusion of a custom color called warn import React from 'react' import { MuiThemeProvider } from '@material-ui/core/styles' import createMuiTheme from '@material-ui/core/s ...

javascriptreactjsmaterial-ui

Exploring Symfony2 controller integration with Javascript arguments

I am currently working on a project with Symfony2 and I have a question regarding receiving arguments from a template in a controller. My goal is to take the value of the argument and store it in the database. The argument's value will be generated by ...

phpjavascriptjquerysymfony

How do I retrieve a nested object element based on the value of a specific field in Mongoose?

Below is the teamModelSchema schema that I am working with. var teamMemberModelSchema = new mongoose.Schema({ "email": { "type": String, "required": true, "min": 5, "max": 20 }, "name": { "type": String ...

javascriptnode.jsmongodbexpressmongoose

Creating a Distinct Interior Array Separate from the Exterior

I'm currently working on a project that involves creating a 2D array. I want the interior elements of this array to be black while the exterior elements should be white. However, my 2D array doesn't seem to be forming correctly - it looks more li ...

javascripthtmlcssarrays