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

Tips for configuring formik values

index.js const [formData, setFormData] = useState({ product_name: 'Apple', categoryId: '12345', description: 'Fresh and juicy apple', link: 'www.apple.com' }); const loadFormValues = async () => { ...

javascriptreactjsreact-reduxformikyup

What is the process for obtaining an AccessToken from LinkedIn's API for Access Token retrieval?

We have successfully implemented the LinkedIn login API to generate authorization code and obtain access tokens through the browser. Click here for image description However, we are looking to transition this functionality to an ajax or HTTP call. While w ...

javascriptnode.jsangulartypescript

After making a POST request, I must ensure that the page is rendered accordingly

How can I efficiently handle requests to the server and update the page without reloading it, following SPA principles using useEffect()? I attempted to implement something like this: useEffect (() => { addProduct (); }) but it proved to be ineffectiv ...

javascriptnode.jsreactjs

What is the best method for packaging a React component library?

Currently, I am working on developing a React component library that I aim to distribute via npm to reach a wide audience. In my development process, I utilize webpack and babel for packaging and code processing. However, as a newcomer to webpack, I am uns ...

javascriptreactjsnpmwebpackbabeljs

AngularJS - Unusual outcomes observed while utilizing $watch on a variable from an external AngularJS service

Within the constructor of my controllers, I execute the following function: constructor(private $scope, private $log : ng.ILogService, private lobbyStorage, private socketService) { this.init(); } private init(){ this.lobbyData = []; this.initial ...

javascriptangularjstypescript

Datatables stands out by emphasizing rows across all paginated pages

Encountering an issue with the Datatables plugin when attempting to highlight rows on paginated pages beyond the first one. In the JavaScript code below, you can see where I have commented out adding the class info to all rows. When this is done and you n ...

javascriptjquerydatatables

Saving data from Material UI forms in TypeScript

Is there an effective method for storing values entered into the text fields on this page? const AddUserPage = () => ( <div> <PermanentDrawerLeft></PermanentDrawerLeft> <div className='main-content'> < ...

javascripthtmlreactjstypescriptmaterial-ui

Efficiently Encoding Still Image Data for NextJS

Currently, I am experimenting with a completely static method in my new Next.js v12 project. I am creating 5-6 data files to use with getStaticProps. Here is an example of one of the data file structures (they are all similar): import SqAshland1 from &apos ...

javascriptnode.jsjsonimage-processingnext.js

Information regarding gender vanishes upon refreshing the page

When the page is refreshed, the variable called jso disappears. Is there an alternative method for storing information that does not involve using a button? The goal is to have it work seamlessly when the page is reloaded without requiring any user action. ...

javascriptvue.jsvuex

What is the best way to use toggleClass on a specific element that has been extended

I have been experimenting with this code snippet for a while. The idea is that when I hover my mouse over the black box, a red box should appear. However, it doesn't seem to be working as expected. Could someone please review this script and let me k ...

javascriptjquerycsshtmltoggle

Adding JSON data to an array with a click - a step-by-step guide

As I dive into working with React and integrating API JSON data into my project, I've encountered a small hurdle. I've implemented a function that allows users to enter a search query, resulting in a list of devices associated with their input be ...

javascriptarraysjsonreactjsfetch

Is there a way to confirm if the target has been successfully removed from the element using jQuery?

$(".dropdown-toggle").click(function(event) { var target = $(event.target); if (target.is(this)) { $(this).find(".caret").toggleClass("customcaret"); } }); <div class="dropdown-toggle"> <div class="caret"></div> </div> ...

javascriptjquery

Discovering error messages in Django can be made easier through the

Hey there, I'm currently working on a Django website that utilizes jQuery for its AJAX calls. The issue I'm facing is that when one of the AJAX calls fails with a '500 ERROR' from Django, the Response header indicates 'text/plain& ...

jqueryajaxdjangorequest

Assigning a CSS class during the $routeChangeStart event does not activate the animation, unless it is placed within a setTimeout function

Just dipping my toes into Angular, so feel free to correct me if I'm way off base here. I've been working on animating the clamps on both sides of my website to slide in upon the initial page load. You can check out the live version at: Current ...

javascriptangularjssettimeoutcss-animationsngroute

How to use AJAX script to call a non-static page method in ASP.NET

Is it possible to achieve this task without utilizing the UpdatePanel feature? ...

c#asp.netjavascriptajax

Issue with ngTable: Error retrieving data for server-side pagination

I am currently working on setting up a server-side table using ng-table. However, I am encountering some issues with the getData function. It keeps giving me errors such as $defer.resolve is not a function or params is not defined. I noticed that I can ac ...

javascriptangularjsngtable

The && operator is not executed when the button is disabled

There is a button on the page that has been disabled using the [disabled] property. <button class="btn btn-primary center-block" (click)="sign(sf.value)" [disabled]="validateInsuredFirstName(firstName.value) && validateInsuredLastName(l ...

javascriptangular

There seems to be an issue with the HighCharts chart export feature as it is not showing the Navigator graph

We are currently using HighCharts version 4.2.2 http://api.highcharts.com/highcharts/exporting While going through their exporting documentation, I made a decision to not utilize their default menu dropdown. Instead, I only needed access to the .exportCh ...

javascriptangularjschartshighchartshighcharts-ng

Facing issues with integrating Mixpanel with NestJS as the tracking function cannot be located

While utilizing mixpanel node (yarn add mixpanel) in conjunction with NestJS, I have encountered an issue where only the init function is recognized. Despite calling this function, I am unable to invoke the track function and receive the error message: Ty ...

javascriptnode.jstypescriptnestjsmixpanel

What is the best way to navigate through an XML document within the DOM of an HTML

I am facing an issue with HTML code. My goal is to navigate through an XML document directly from within the HTML code. Here is the XML code: <?xml version = "1.0"?> <planner> <year value = "2000"> <date month = "7" day = " ...

javascripthtmlxmldom