CODEWITHSUNDEEP
jqueryajax
Mi7ai
Mi7ai

Reputation: 27

How to load an image with jquery after clicking a button and get data with ajax?

I can't find a way to load an image before getting my data. Practiclly what I want to do is:

  1. click a button
  2. display a loading image
  3. after 2 second the loading image should disapear
  4. after the image is out display my text

This is my code. I change it so many times that i don't know if is still good

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="libreria/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("input[name=campo1]").click(function(){
                function imagen(){
                    $("#imagen").css("display", "block") ;
                    setTimeout(imagen, 2000);
                }

                var ajax = $.ajax({
                    type: "GET",
                    url : 'datos.txt',
                    /*beforeSend: function(){
                    });*/
                });

                ajax.done(function(data){            
                    $("div").html(data);
                });

                ajax.fail(function(data){
                    alert("No se ha podido cargar el archivo");
                });
            });
        });         
    </script>
</head>
<body>
    <div>
        <img id="imagen" src="images/loader.gif" style="display:none"> 
    </div> 
    <input type="button" name="campo1" value="Traer fichero de texto"/>
</body>
</html>

Upvotes: 2

Views: 11541

Answers (2)

Philip G
Philip G

Reputation: 4104

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="libreria/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("input[name=campo1]").click(function(){
                $("#imagen").show();
                var ajax = $.ajax({
                              type: "GET",
                              url : 'datos.txt',
                              success : function(data){
                                    $("#imagen").hide();
                                    $("div").html(data);
                              },
                              error: function(){
                                    $("#imagen").hide();
                                    alert("No se ha podido cargar el archivo");
                              }
                           });
            });
        });         
    </script>
</head>
<body>
    <div>
        <img id="imagen" src="images/loader.gif" style="display:none"> 
    </div> 
    <input type="button" name="campo1" value="Traer fichero de texto"/>
</body>

</html>

By doing this, your loader image will show before you make your ajax call and disapear once completed. If en error has occured eg. the call fails: an alert is shown!

EDIT If you really want the loading pic to disapear after 2 secounds you could remove all $("#imagen").hide(), and paste this after $("#imagen").show(). But i would disencurage you from doing that since the ajax request could take considerably longer time then that!

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

setTimeout(function(){
              $("#imagen").hide();
           },2000);

var ajax = $.ajax({
                  type: "GET",
                  url : 'datos.txt',
                  success : function(data){
                                           $("div").html(data);
                  },
                  error: function(){
                                    alert("No se ha podido cargar el archivo");
                              }
                });

One additional problem, that probably may be One of your conserns is that you are replacing the image with the loaded content. Since the image is in the same div that you place your data into. Try using $("div").append(data) instead of .html(data) Or move your image outside the div.

Upvotes: 1

traviswingo
traviswingo

Reputation: 315

The best way to do this is to display the loading image onclick and hide the loading image on success of the call, not a timeout.

Here's a example:

$("button").click(function(){
  // Show the spinner after the user clicks
  $("#imagen").show();

  $.ajax({url:"datos.txt",success:function(result){
    // Hide the spinner on success of the call
    $("#imagen").hide();
    // Put the returned data into your element
    $("div").html(result);
  }});
});

You don't want to use a timer for a spinner as sometimes asynchronous calls can take a long time. You want to display a loading indicator for the actual duration of the load.

I hope this makes sense.

Upvotes: 0

Related Questions