Solved

Desperate need of Jquery/Ajax expert coder

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery scrollTop 2 41
Jquery autocomplete 10 68
JS Plugin 4 29
Error in script 11 47
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
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…

867 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

18 Experts available now in Live!

Get 1:1 Help Now