show loading png in the short delay whilst data is loading using jquery

Question

I am trying to display a loading.png graphic in the very short time it takes to do my query e.t.c Everything below works perfectly currently. I just need to get the graphic loading in the td.available only when the productcode has been entered and is being checked.

Any ideas?

Here is my JS

$("#prodcodecheck").blur(function() {
        var $this = $(this);
        $this
            .closest('tr') // find the parent tr
            .find('td.available') // find the imgsample in the row
            .html( $(this).attr('id')) // update the contents
            //.animate({'opacity':1},200);

        var available = $this.closest('tr').find('td.available')

        $.post('checkstock.php', //this page reads the image code and gives you the image location
                 { action: 'searchimage', productcode: $(this).val() },
                function(data) {available.html(data);}
                );
    });

And here is checkstock.php

//Find Stock Value
function checkstock($prodCode) { 

  $prodCode = strtoupper($prodCode);

  require '../../../../config.php';
  $dbh = new PDO(DB_DSN, DB_USER, DB_PASS);
  $sql = "SELECT * FROM isproducts WHERE prodCode = '".$prodCode."'"; 
  $stmt = $dbh->query($sql);
  $obj = $stmt->fetch(PDO::FETCH_OBJ);

  $count = $stmt->rowCount();

  echo ($count == 1 ? 'The current stock value of item '.$obj->prodCode.' is '.ROUND($obj->FreeStockQuantity, 0).'' : 'Invalid product code');  

}

//Call Stock Function
checkstock($_POST['productcode']);

karim79 · Accepted Answer · 2010-11-23 15:08:38Z

1

A simple way to do it would be:

...
// reveal a 'loading' div/span or whatever right before the request
$("#loading").show();
$.post('checkstock.php', { action: 'searchimage', productcode: $(this).val() },
    function(data) {
        available.html(data);

        // hide it again once the request has completed
        $("#loading").hide();
    }
);

answered Nov 23, 2010 at 15:08

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

simshaun · Accepted Answer · 2010-11-23 15:09:11Z

0

You create a jQuery selector that contains the loading img and append it to the td before the ajax code.

var loadingImg = $('<img src="/assets/images/loading.gif">');

available.append(loadingImg);

answered Nov 23, 2010 at 15:09

simshaun

21.5k1 gold badge60 silver badges73 bronze badges

Comments

denislexic · Accepted Answer · 2010-11-23 15:11:11Z

0

Why don't you use Jquery load or ajax? And before launching the load function place the loading image inside.

answered Nov 23, 2010 at 15:11

denislexic

11.5k26 gold badges89 silver badges138 bronze badges

Collectives™ on Stack Overflow

show loading png in the short delay whilst data is loading using jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related