Ajax issue retrieving data

Question

is there anyway to return an array of strings that corresponds to the fetched row one by one?

Basically, if I want to retrieve all rows from my database, I do something like this:

$.post('my_script.php', {id:id}, function(data){
  $('#container').html(data);
});

my_script.php

<?php
  $id = $_POST['id'];
  $query = "SELECT image_name FROM my_list WHERE id=$id";

  if($mysql_query = mysql_query($query)){
      while($mysql_fetch_assoc = mysql_fetch_assoc($mysql_query)){
           $mysql_result_name = $mysql_fetch_assoc['image_name'];
           echo "<img src='".$mysql_result_name."'/>";
}
}
?>

The problem about this is that, it will show a blank page for couple of second as long as this statement (while($mysql_fetch_assoc = mysql_fetch_assoc($mysql_query))) is not finished. This is definitely not good for the users. I want at least to display the image one by one if they are ready to be displayed.

You might want to have a look at this: http://stackoverflow.com/q/13250976/218196. — Felix Kling, Jun 02 '13 at 13:55
a. You say you want to retrieve all the records but your query is retrieving a unique id - i.e one record only (that is if you change `id=id` to `id=$id`). b. Always better to return pure data (such as an array of images paths) and deal with the HTML messiness on the client-side. c. you can retrieve one by one only by sending multiple ajax requests. — Matanya, Jun 02 '13 at 14:04
How did imgur.com do it then? If you check this page (http://imgur.com/gallery/YHHtxfV) you will notice the sidebar thumbnails on the right side, if you repeatedly click the next, the images are displaying one by one, it is just fast enough. How do they do it then? Because I am looking to something similar to this. — user2310422, Jun 02 '13 at 14:11
@user2310422: Maybe it is slow because you don't have an index on the id column? — Felix Kling, Jun 02 '13 at 14:43

Miro Markaravanes · Answer 1 · 2013-06-02T14:20:20.330

1

It's basically impossible because of the fact that PHP is a server-side language and thus data is available when it has finished the script.

So you can't do such thing and have to wait until the script is complete

Or you can set the AJAX so that it will retrieve the rows one-by-one, That is the solution that comes to my mind right now.

EDIT:

As a better solution you can append a flush() to the end of your while so that it will print the image when it's ready but it's not a 100% solution. it MAY or MAY NOT work depending on your server and the method that you're calling the PHP page from. For example with AJAX, your success function will not be called until it receives the 200 OK response from the server which is sent when the page has fully loaded.

Edited code:

<?php
  $id = $_POST['id'];
  $query = "SELECT image_name FROM my_list WHERE id=id";

  if($mysql_query = mysql_query($query)){
      while($mysql_fetch_assoc = mysql_fetch_assoc($mysql_query)){
           $mysql_result_name = $mysql_fetch_assoc['image_name'];
           echo "<img src='".$mysql_result_name."'/>";
           flush();
}
}
?>

edited Jun 02 '13 at 14:20

answered Jun 02 '13 at 14:05

Miro Markaravanes

3,285
25
32

How did imgur.com do it then? If you check this page (http://imgur.com/gallery/YHHtxfV) you will notice the sidebar thumbnails on the right side, if you repeatedly click the next, the images are displaying one by one, it is just fast enough. How do they do it then? Because I am looking to something similar to this. – user2310422 Jun 02 '13 at 14:10
PHP doesn't LOAD the images. it just sends the HTML code which is supposed to be rendered to the browser. Your browser then renders the html and then tries to load the images. In the IMGUR it actually displays all the images in the same time and does not load them one-by-one.. That is your browser that is trying to load them one-by-one. Because you don't have enough bandwidth to load them all in a blink. If you have better connection they will load all in once. – Miro Markaravanes Jun 02 '13 at 14:13
How come when I do the code above, it is a lot slower? And that's the only code I have on my page. And when I go to imgur, it is a lot faster. So the internet connection is not the problem here. – user2310422 Jun 02 '13 at 14:20
I can not predict whats the issue that is causing the code to be slower. maybe that's because you're doing an extra task of displaying the incomplete data to the user. – Miro Markaravanes Jun 02 '13 at 14:23
can you create a fiddle that proves this? – user2310422 Jun 02 '13 at 14:26

Ajax issue retrieving data

1 Answers1