CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
NotMe
NotMe

Reputation: 111

My loading.gif does not display on button click

I'm trying to create a loading screen whenever my button clicks, it executes the Ajax and everything but not the loading screen.

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">')

And Below is for closing of the loading GIF through Ajax.

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

Where did I go wrong?

Upvotes: 0

Views: 2649

Answers (2)

Drunken M
Drunken M

Reputation: 2694

Your image tag is wrong. It should not put in like that.

It better to hide the image by id or any class using 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">to click</button>

Upvotes: 1

rahul singh
rahul singh

Reputation: 33

check your image path it not should be E&C both drive

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

Use only Loading_icon.gif if you are in jmdsantos folder.

Upvotes: 1

Related Questions