Solved

Desperate need of Jquery/Ajax expert coder

Posted on 2010-08-27
1
227 Views
Last Modified: 2012-05-10
I have a search page developed for me making use of jquery slider function to allow visitors to search for diamonds. The code works great once the page loads, but therein lies the problem - it takes about 15 seconds to load in Chrome and in IE it takes over 30 seconds. The developer is unable to figure out why it takes so long in the code he wrote versus the code from the site that I had him model the search after.

The page that was developed for me is live at http://www.eishosting.net/diamond/

I have uploaded the two files with the code that is used to fetch the data and build the sliders. I am not familiar with how jquery works as I am not a developer which is why I hired someone to build this. If anyone here has some insight as to why this code is not loading quickly and how to fix it I would GREATLY appreciate it.
<?php
// Connecting, selecting database
$link = mysql_connect('removed:3306', 'user', 'password')
    or die('Could not connect: ' . mysql_error());

mysql_select_db('diamonds') or die('Could not select database');

// Performing SQL query
$query = "SELECT status, shape, weight, color, clarity, cut_grade, total_price, parcel_id, id from products where special_deal < 1 and status < 2 and parcel_type = 'loose' and weight>=0.5 and weight<=20 and color<=11 and color>=1 and clarity<=10 and clarity>=2 and cut_grade>=3 and cut_grade<=8 and total_price>=2000 and total_price<=200000 and shape in ('Round Brilliant','Princess','Emerald','Radiant','Pear','Marquise','Heart','Oval','Cushion','Asscher')";
$result = mysql_query($query) or die('Query failed: ' . mysql_error());

$products = array();
if(mysql_num_rows($result)) { 
	while($product = mysql_fetch_assoc($result)) { 
		$products[] = array('product'=>$product);
	}
} 

//header('Content-type: application/json');
//echo json_encode(array('product'=>$products));


/*header('Content-type: text/xml');
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>";
echo '<products>';
foreach($products as $index => $product) { 
	if(is_array($product)) { 
		foreach($product as $key => $value) { 
			echo '<',$key,'>';
			if(is_array($value)) { 
				foreach($value as $tag => $val) { 
					echo '<',$tag,'>',htmlentities($val),'</',$tag,'>';
				} 
			} 
			echo '</',$key,'>';
		} 
	} 
} 
echo '</products>';
*/

/*
foreach($products as $index => $product) { 
	if(is_array($product)) { 
		foreach($product as $key => $value) { 
			echo '<tr>';
			if(is_array($value)) { 
				foreach($value as $tag => $val) { 
					echo '<td>',htmlentities($val),'</td>';
				}
			} 
			echo '</tr>';
		} 
	} 
} 
*/

foreach($products as $index => $product) { 
	foreach($product as $key => $value) {
		$idH = htmlentities($value["parcel_id"]);
		$id2 = htmlentities($value["id"]);
		$statusH = htmlentities($value["status"]);
		$status = str_replace("1", "<span class='avail'>Available</span>", $statusH);
		$status = str_replace("0", "<a target='_self' href='checkstatus2.asp?itemid=$idH'>Check Status</a>", $status);
		$shape = htmlentities($value["shape"]);
		$shapeH = $shape;
		$weight = htmlentities($value["weight"]);
		$weightH = 100*$weight;
		$weight = sprintf("%01.2f", $weight);
		$colorH = htmlentities($value["color"]);
		$colorArray = array("","D","E","F","G","H","I","J","K","L","M","N");
		$color = $colorArray[$colorH];
		$colorH--;
		$clarityH = htmlentities($value["clarity"]);
		$clarityArray = array("","","I2","I1","","SI3","SI2","SI1","","VS2","VS1");
		$clarity = $clarityArray[$clarityH];
		$clarityH--;
		$cutH = htmlentities($value["cut_grade"]);
		$cutArray = array("","","","Very Good","","Premium","","Excellent","Ideal");
		$cut = $cutArray[$cutH];
		$priceH = htmlentities($value["total_price"]);
		$priceH = intval($priceH);
		$price = "$".number_format ($priceH , 0 , "." , "," );
		$sessionId = "";
		$id = "<a target='_self' href='viewproduct.asp?ID=$sessionId&ProductID=$id2&type=loose&parcel_id=$idH&itemstatus=$statusH'><img src='lib/images/view.gif' alt='View'/></a>";
		echo "<tr>";
		echo "<td>",$status,"</td>";
		echo "<td>",$shape,"</td>";
		echo "<td>",$weight,"</td>";
		echo "<td>",$color,"</td>";
		echo "<td>",$clarity,"</td>";
		echo "<td>",$cut,"</td>";
		echo "<td>",$price,"</td>";
		echo "<td>",$id,"</td>";
		echo "<td>",$statusH,"</td>";
		echo "<td>",$shapeH,"</td>";
		echo "<td>",$weightH,"</td>";
		echo "<td>",$colorH,"</td>";
		echo "<td>",$clarityH,"</td>";
		echo "<td>",$cutH,"</td>";
		echo "<td>",$priceH,"</td>";
		echo "</tr>";
	}
} 

// Free resultset
mysql_free_result($result);

// Closing connection
mysql_close($link);

?>

Open in new window

diamonds.html
0
Comment
Question by:diamondguys
1 Comment
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 33547863
For starters, your table data is HUGE:

http://www.eishosting.net/diamond/productsWebService.php

You got about a 1MB file you're loading there... which is going to take seconds even on a fast connection.

Then, you use the datatable plugin for jQuery.  This plugin has to parse a MB worth of table nodes.  This would take a very very long time (seconds) even with highly optimized code.

See if you can trim your data down.  There is no need to send ALL that data when the page loads.  Only send up the first 50 or so rows.  If the user wants more, make him ask for it (paging).  

You have a web services... so just call on it whenever you need data.... pass it a start and end row, and just send up what you need.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now