Solved

Desperate need of Jquery/Ajax expert coder

Posted on 2010-08-27
1
232 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
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)

617 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