Solved

Desperate need of Jquery/Ajax expert coder

Posted on 2010-08-27
1
230 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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…

828 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