When I click the button, the loading.gif fails to appear

I'm having trouble getting my loading screen to display when my button is clicked. The Ajax function works fine, but the loading screen is not showing up.

CSS

<style>
#display_loading{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}
</style>

jQuery

$("#submit-btn").click(function(){
  //$('#loading').show();
  $("#display_loading").html('<img src="C:\Users\jmdsantos\Loading_icon.gif" height="100px" width="100px">')

Below is how I close the loading GIF using Ajax.

$("#display_loading").html('')

Can anyone help me figure out what I'm doing wrong?

javascriptjqueryhtmlcssajax

Answer №1

Your image tag is incorrect. It should not be inserted in that way.

It would be more appropriate to hide the image using an id or a class with CSS and then display it on click function.

$("#submit-btn").click(function(){

    $("#display_loading").show();

 });
    #display_loading{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
        display:none;
    }
  

    
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="display_loading"><img src="/path to/jmdsantos/Loading_icon.gif" height="100px" width="100px"></div>

<button id="submit-btn">Click here</button>

Answer №2

Ensure to verify your image path, it should not contain both 'E' and 'C' drives.

For example: E:C:\Users\jmdsantos\Loading_icon.gif

If you are in the jmdsantos folder, use only Loading_icon.gif in the path.

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

Access information via ajax from a php script

I am currently working on an AJAX code that sends data to PHP and then receives data from PHP... function updateDatabase(syncData){ $.ajax({ type : 'POST', async: false, url : 'php/syncData.php', ...

phpmysqljsonjquery

How come flex won't let me rearrange an image?

.nav { height: 500px; } .navphoto { height: 500px; display: flex; justify-content: flex-end; } <div class="nav"> <img class="navphoto" src="images/navphoto.jpg"> </div> Just wondering why I can't seem to move an image, bu ...

htmlcssflexbox

What could be causing my div element to remain stationary despite the movement functions I have implemented?

I am attempting to move my div element by using key presses to adjust the CSS attributes of the HTML elements. However, despite implementing the necessary code, the mover refuses to budge and nothing appears when I inspect the elements or their attributes. ...

javascript

Add several converted links as variables in each section

The title may not be the clearest, but I am facing a challenge with an ecommerce site that has unmodifiable HTML. My goal is to include additional links for each product displayed on a page showcasing multiple products. Each link should be unique to its re ...

javascriptjqueryhtml

Jest v29 Upgrade Issue: Test environment jest-environment-jsdom not found

Are there any success stories of upgrading to the newest version of Jest, specifically version 29? I keep encountering an error message: Error: Test environment jest-environment-jsdom cannot be found. Please ensure that the testEnvironment configuration ...

javascriptnode.jstypescriptjestjsts-jest

Having trouble with my CSS hover not functioning properly

I need some help with my code. Can you please take a look and let me know why the hover effect is not working? Thank you! <style> #moreDiscussHome:hover{ background-color: #ffffff; } </style> <a id="moreDiscussHome" style="co ...

css

Unable to locate and interact with a concealed item in a dropdown menu using Selenium WebDriver

Snippet: <select class="select2 ddl visible select2-hidden-accessible" data-allow-clear="true" id="Step1Model_CampaignAdditionalDataTypeId" multiple="" name="Step1Model.CampaignAdditionalDataTypeId" tabindex="-1" aria-hidden="true"> <option value ...

javascriptjavaselenium-webdriver

Simple way to automatically reload your script using an npm server

Testing out a sample javascript code snippet. Locating a script named simple.js in the demos directory. Executing the demo using the command yarn build-demos && http-server demos/ The script simple.js is compiled to simple_bundle.js and the serv ...

javascriptnpmwebpack

Creating HTML code from a website by utilizing XML

As someone who is not a developer and doesn't have much knowledge about java, I am seeking advice on potential solutions to achieve the following. This web hosting service enables users to retrieve data from their XML spreadsheets and embed them anyw ...

javajavascripthtml

Checking a condition with a for loop in Javascript

I'm working on developing a function that can generate a random number between 0 and 9 that is not already included in an array. Here is the code I have come up with so far: var myArr = [0,2,3,4]; console.log("Array: " + myArr); function newN ...

javascriptarraysloopsfor-loopiteration

In the context of content security policy, the directive "script-src 'self' blob: filesystem: chrome-extension-resource:" must be observed when attempting to retrieve data

I have implemented a jQuery simple weather plugin to retrieve weather information and am attempting to create a Chrome widget. When loading the file as a Chrome extension, I encountered an error. Despite searching for solutions on Google and here, I have ...

javascriptjqueryhtmlgoogle-chromegoogle-chrome-extension

What is the best way to determine the dimensions of a KonvaJs Stage in order to correctly pass them as the height/width parameters for the toImage function

Currently, I am using KonvaJs version 3.2.4 to work with the toImage function of the Stage Class. It seems that by default, toImage() only captures an image of the visible stage area. This is why there is a need to provide starting coordinates, height, and ...

javascriptvue.jscanvaskonvajs

How to iterate dynamically over arrays using JavaScript

I am working on a JavaScript project where I need to create a graph with 25 different data points. While my current JavaScript method is effective, I am facing an issue - I have multiple arrays and I am looking for a solution that allows me to use a for lo ...

javascripthtmljqueryasp.net-mvc

Align audio and video elements in HTML5 using JavaScript

I am facing a situation where I have two files - one is a video file without volume and the other is an audio file. I am trying to play both of these files using <audio> and <video> tags. My goal is to make sure that both files are ready to pla ...

javascripthtmlaudiovideo

Create an interactive list with the ability to be edited using HTML and

I'm currently working on a UI scenario that involves a text box field with two buttons beneath it. When the user clicks the first button, a popup will appear prompting them to input an IP address. Upon submitting the IP address in the popup, it will b ...

javascripthtml

AJAX checkmark and X control

Looking to create a sleek tick and cross control for ASP.NET that functions like radio buttons or checkboxes but is more visually appealing. The idea is to have a faded tick and cross displayed next to each other, with the ability for one to become highlig ...

asp.netajaxasp.net-ajaxajaxcontroltoolkit

transform the input button into an anchor tag

How can I create a hyperlink for the code below: echo "<td><input type='button' class='btn btn-link text-dark' value='{$val_str}' onclick='redirect(\"{$value}\")'></td>" ...

phphtmlechohref

Retrieving objects from Firebase in a loop using promises

Seeking guidance on handling promises in AngularJS as a newcomer. Struggling with merging data from two asynchronous arrays into a single array within a for-loop. Encountering a bug where the same picture is displayed for all entries despite different user ...

javascriptangularjsfirebasefirebase-realtime-databaseangularfire

Having trouble fetching AJAX POST data in PHP?

Attempting to send a variable as an object to my PHP file, but it's not receiving any data. Testing with window.alert(u.un) in the AJAX call shows that data is being passed successfully without errors in the console. However, the PHP file still does n ...

javascriptphpjqueryajax

Tips for transferring data from a nested component's state to its parent component

I am facing a challenge in extracting the state value from one component to another when clicking on a tag. The goal is to append the value of the clicked tag to a list state in the Form component. Can someone suggest a simple approach to achieve this? T ...

javascriptjqueryreactjs