Adrian Klark Adrian Klark - 1 year ago 66
jQuery Question

Jquery ajax php get results and fade

Don't know what is wrong i try everthing the code should take simple info from PHP file and for each should fade in delay and out.I was succesful with gething all the data at once but is not good

<script type="text/javascript">
$('button').fadeOut('slow')
var progressBar = $('.progress-bar');
var percentVal = 0;
window.setInterval(function(){
percentVal += 10;
progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%');
if (percentVal == 100)
{
percentVal = 0;
}
}, 500);

$(document).ready(function() {

$("button").click(function() {

$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "submit.php",
data: 'html', //expect html to be returned
success: function(data){

for(var i=0;i<6;i++){
$('.input-group').html(data).fadeIn(500).delay(1000).fadeOut(500);

}


}
});

});
});



</script>


PHP CODE:

$array= ['apple','orange','grapes','avocado','banana'];
$indexedOnly = array();

foreach ($array as $row) {
$indexedOnly[] = array_values($row);
}

echo json_encode($indexedOnly);

Answer Source

I think you need to abandon the loops, they wont allow you to pause to wait for the animation to finish. You can try something like this where you handle each element in data then using the callback functions of .fadeIn and .fadeOut to call the next one

 function disp_next() {
 $('.input-group').text(data.shift()).hide();
    $('.input-group').fadeIn()
  .delay(1000)
  .fadeOut(function(){
    if(data.length !== 0) {
        disp_next();
    }
  })
 }

 disp_next();

You also need to change your dataType to json as you are expecting json from the server. Here is your jquery updated

 $(document).ready(function() {

    $("button").click(function() {                

              $.ajax({    //create an ajax request to load_page.php
                type: "GET",
                url: "submit.php",
                datatype: 'json',   //expect html to be returned                
                success: function(data){ 
                 data = Object.values(data);
                 function disp_next() {
                   $('.input-group').text(data.shift()).hide();
                    $('.input-group').fadeIn()
                    .delay(1000)
                    .fadeOut(function(){
                      if(data.length !== 0) {
                        disp_next();
                      }
                    })
                 }

                 disp_next();


            }
              });

       });
    });
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download