CODEWITHSUNDEEP
jqueryajaxfadein
HiDayurie Dave
HiDayurie Dave

Reputation: 1807

jQuery Ajax loop data show one by one

I'm using append on jquery. I want to show the data one by one, first show loading image for 5 seconds then fade in the data badge id from big size font to small.

Any clues on how to do that?

<div class="loading">
  <img src="https://loading.io/spinners/mac/lg.mac-fan-spinner.gif" />
  <div class="setBadgeID"></div>
</div>

$.ajax({
  url: "getDraw",
  type: "POST",
  data: { ID: ID },
  dataType: "JSON",
  success: function(jsonStr) {
    $('.loading').show();
    for (var i = 0; i < jsonStr.badgeID.length; i++) {
      var num = i + 1;
      var badgeID = jsonStr.badgeID[i];
      $('.setBadgeID').append(badgeID).fadeIn('slow');
    }
  }
});

$ID = $_POST['ID'];

$qTotalLuckyDraw = mysqli_query($con, "SELECT * FROM tbl_lucky_draw WHERE lucky_draw_id = '" . $ID . "'");
$dTotalLuckyDraw = mysqli_fetch_array($qTotalLuckyDraw);

$getTotalLuckyDraw = $dTotalLuckyDraw['total_draw'];
$getLuckyDrawID = $dTotalLuckyDraw['lucky_draw_id'];

$qGetLuckDraw = mysqli_query($con, "SELECT * FROM tbl_employee_attend WHERE flag = 'N' ORDER BY rand() LIMIT $getTotalLuckyDraw");
while($dGetLuckDraw = mysqli_fetch_array($qGetLuckDraw))
{
    $badgeID[] = $dGetLuckDraw['badgeid'];
    $update = mysqli_query($con, "UPDATE tbl_employee_attend SET flag = 'Y', lucky_drawid_fk = '" . $getLuckyDrawID . "' WHERE badgeid = '" . $dGetLuckDraw['badgeid'] . "'");
}

$data = array(
    'badgeID' => $badgeID,
    'totalLuckyDraw' => $getTotalLuckyDraw,
    'totalEmployeeLuckyDraw' => $getTotalLuckyDraw
);

echo json_encode($data);

Upvotes: 1

Views: 120

Answers (1)

Senthil
Senthil

Reputation: 777

Try below code 

     $('.loading').show();  
$.ajax({
  url: "getDraw",
  type: "POST",
  data: { ID: ID },
  dataType: "JSON",
  success: function(jsonStr) {
    $('.loading').hide();
   console.log("jsonStr" , jsonStr);
   for (var i = 0; i < jsonStr.length; i++) {
                   console.log("jsonStr[i]" , jsonStr[i]);
                  $('.setBadgeID').append(jsonStr[i]).fadeIn('slow');
                }
  }
});

Upvotes: 1

Related Questions