Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Desperate need of Jquery/Ajax expert coder

Posted on 2010-08-27
1
Medium Priority
?
234 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 2000 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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

705 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