Solved

HTML Select Box - How to improve load times when populating....

Posted on 2008-10-29
6
923 Views
Last Modified: 2012-08-14
Hi, Currently I have I have some PHP which reads a list of players from a player table in a mySql database. I create an array of players and poulate each of 2 HTML select boxes on the HTML Page.

This is so I can compare one player against another player. This works fine as you can see  
in the URL Link.

However my problem is that the number of players will grow to a few thousand and the loading of the SELECT boxes is slow. What is the best technique to perform a comparision like this. Some code would be great if you could provide this.

See below for the PHP Code and the HTML Code. The HTML Link will give understanding as to how it works.


---------------------------------------------------------------------------
Code Snippet A - Html for showing the two Select boxes. 
---------------------------------------------------------------------------
<td valign="top">Player 1:<br>
  <select name="player1" size="5" style="width: 150px;">
      <!--{html_options values=$player1_id selected=$player1_sel output=$player1_name}-->
  </select>
</td>
 
<td valign="top">Player 2:<br>
   <select name ="player2"  size="5" style="width: 150px;">
      <!--{html_options values=$player2_id selected=$player2_sel output=$player2_name}-->
   </select>
</td>
 
---------------------------------------------------------------------------
Code Snippet B - PHP Code to load values for the Select boxes
---------------------------------------------------------------------------
 
$sql_names = "SELECT playerName FROM qwscores_players ORDER by playerName ASC";
$sel_names = $db->get_results($sql_names);
 
$player1_name = array();
$player2_name = array();
 
foreach($sel_names as $row) {
    	array_push($player1_name, stripslashes($row["playerName"]));
     	array_push($player2_name, stripslashes($row["playerName"]));
}
 
 $tpl->assign("player1_name", $player1_name);
 $tpl->assign("player1_id", number_array($player1_name));
 $tpl->assign("player1_sel", $player1);
 
 $tpl->assign("player2_name", $player2_name);
 $tpl->assign("player2_id", number_array($player2_name));
 $tpl->assign("player2_sel", $player2);
 
  	 $player1_sql = $player1_name[$player1];
  	 $player2_sql = $player2_name[$player2];

Open in new window

0
Comment
Question by:9703403
[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
  • 3
  • 2
6 Comments
 
LVL 6

Expert Comment

by:fourice
ID: 22832492
Why do you want all the players in one time?
Perhaps it is better to first choose the first letter (ie. f) and then load all names with a f? (of course seperate for both selectboxes).
0
 

Author Comment

by:9703403
ID: 22832586
Yeah I was thining of different ways of doing it. One was to have a filter where the user could limit players by time. I.e Only populate the Selection Box with players active within last 24 hours but some users will want to compare players as they scroll down through them.

Also I am not sure hwo I would go about coding that as you suggested anbd whether it would work well.
0
 
LVL 15

Accepted Solution

by:
OMC2000 earned 125 total points
ID: 22832870
I guess you mean potential problem with "select" rendering when there are too many options. If so, you could build complete HTML string on the server side and assign it to parent HTML element using JavaScript funtion called on load event. It used to work much faster regular way of select definition in HTML code.


<html>
<body onload="doLoad();">
<table>
<tr>
<td colspan=4>
<select id='lstSource' name='lstSource'>
</select>
</td>
</tr>
<tr>
<td colspan=4>
<select id='lstDest' name='lstDest'>
</select>
</td>
</tr>
</table> 
<script language="JavaScript">
var firstSelect = "<select id='lstSource' name='lstSource'>"
+"<option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option>"
+"</select>"; 
var secondSelect = "<select id='lstDest' name='lstDest'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>"; 
 
function doLoad()
{
  obj = document.getElementById("lstDest").parentNode;
  obj.innerHTML = firstSelect;
  obj = document.getElementById("lstSource").parentNode;
  obj.innerHTML = secondSelect;
}
</script>
</body>
</html>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:9703403
ID: 22833474
OMC2000: But the list I have is dynamic so I would need to read from DB and the load each time.
Is that possible with the code you have above. Not sure how that works compared to mine.
Cheers
0
 
LVL 15

Expert Comment

by:OMC2000
ID: 22839593
if you reload page you can fill these lists from the database during this process, it must not be a problem for modern servers to build such lists from the database

If you want to rebuild them without page reloading you could use one of dynamic page part filling technique
1. Ajax - assign to JS vars result of Ajax function execution and then reassign it to selection parent nodes
2. run separate PHP file whith parameters in the hidden frame and include into the code of that PHP file JS block, which assign newly constructed content of selection list to selection parent nodes
3. make dynamic source for JS script block. Use named SCRIPT block <script ID="reloadSels" ...>
and assign path to PHP file, which build js content and selection lists string from the database, to SRC property. When this file gets loaded browser executes it. This way you also can assign newly constructed content of selection list to selection parent nodes
0
 

Author Comment

by:9703403
ID: 22899837
Hey. Thanks for your suggestions. I still have not resolved this but am working through your suggestions. Will let you know how i get on. Thanks.
0

Featured Post

Ransomware-A Revenue Bonanza for Service Providers

Ransomware – malware that gets on your customers’ computers, encrypts their data, and extorts a hefty ransom for the decryption keys – is a surging new threat.  The purpose of this eBook is to educate the reader about ransomware attacks.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

739 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