0

I get list of all products (say 100) from my database using sql query, then I have to pick each row from result set using foreach loop to get more information about the product (using few more sql queries) and then generate html for display. But the page comes back alive after the entire foreach loop for all 100 items completed. (it takes a long time).

I want it to be like if there are 100 items, and when I load the page the view should be like 1st loading... the moment that is loaded it updates the view with that and proceed to show second one is loading and so on.

Also how can it have that effect when a new one is added it is green background and slowly fades in to default white background, indicating it is added just now.

Thanks.

karmendra
  • 2,206
  • 8
  • 31
  • 49
  • 3
    Try JavaScript and something called `AJAX` – lin Jan 27 '15 at 09:17
  • @lin can you direct me to some tutorial to get started with php and ajax – karmendra Jan 27 '15 at 09:19
  • Take a closer look at ajax, this is no trivial task, but once you read enough about how everything works, it should be doable. However here's another idea: You make it sound as if your PHP takes a long time to execute. Maybe something you're doing (PHP or MySQL) is done the wrong way and could be optimized to speed things up? – mmgross Jan 27 '15 at 09:19
  • 1
    possible duplicate of [Basic PHP and AJAX](http://stackoverflow.com/questions/5298401/basic-php-and-ajax) – lin Jan 27 '15 at 09:20
  • Check the duplicate marked in the comment above. – lin Jan 27 '15 at 09:22
  • 1
    See this article this will help you http://stackoverflow.com/q/11077857/2125924 – Chintan Gor Jan 27 '15 at 09:27

4 Answers4

2

You need to break up your request into several. The first request renders the loading page. From there you retrieve the 100 products as JSON via an AJAX call. Then you loop through the retrieved items in JavaScript and request the detail information one at a time (also via an AJAX call). In the success handler of the AJAX call you insert the detail data for that one item into your DOM. If you use jQuery you will access to several fade and tween animations for your newly injected elements.

Markus Müller
  • 2,611
  • 1
  • 17
  • 25
1

If you want to load data one by one than you should have to use Ajax.

First you have to fetch data from database and pass in form of JSON.

Than in Javascript you can get in JSON format than you can append in table while looping.

You can look here as an example not exact you want.

You can use some jquery animation to load your data smoothly.

Load data from database + ajax + php

Community
  • 1
  • 1
Hardik Patel
  • 706
  • 5
  • 14
0

One thing you can do is just get the basic listings and if a user clicks on the row make a ajax call and then get the rest of the details for the same this way you can manage the load and you will not have to get all the rows and their details at the same time

Veerendra
  • 2,562
  • 2
  • 22
  • 39
0

You can do this by repeatedly calling the ajax call for some certain time limit to update that part with jquery.

Rathina Ganesh
  • 157
  • 11