PDA

View Full Version : table sorting doesnt work in firefox



cluce
Sep 12th, 2007, 08:56 PM
i have a table sorting feature on my website that works everywhere else except firefox. but the example code does work in firefox. this has me stumped.

The problem is the links in the table headers wont show up so they can be clicked on to sort the colunm. I dont think its the actual javascript file because as soon as I take out the string with the table data that is being populated from the databsase and use the example table data it works.

Is there something in my code that firefox doesnt support???
can someone check this out? any help is gladly appreciatted?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head>
<title>Product Inventory</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type='text/javascript' src='common.js'></script>
<script type='text/javascript' src='css.js'></script>
<script type='text/javascript' src='standardista-table-sorting.js'></script>
</head>
<?php
//connect to database
include'db.php';

//checks if category is selected or submitted
if (!isset($_POST['submit'])||(($_POST['select']) == 'All categories')){

//get all data from table
$sql = "SELECT * from products";
$result = @mysqli_query($mysqli, $sql) or die(mysqli_error($mysqli));

}else{

//get selected data of records
$get_list_sql = "SELECT * FROM products WHERE Category = '".$_POST['select']."'";
$result = mysqli_query($mysqli, $get_list_sql) or die(mysqli_error($mysqli));
}
$display_block = "<p align = 'center'> <table class='sortable' border = '1' bordercolor = 'black' cellpadding= '0' cellspacing = '0'>
<thead>
<th bgcolor = 'orange'>Item Number</th>
<th bgcolor = 'orange'>Manufacturer</th>
<th bgcolor = 'orange'>Category</th>
<th bgcolor = 'orange'>Description</th>
<th bgcolor = 'orange'>Model</th>
<th bgcolor = 'orange'>Quantity</th>
<th bgcolor = 'orange'>Kw</th>
<th bgcolor = 'orange'>Hours</th>
<th bgcolor = 'orange'>Price</th>
</thead>";
//if authorized, get the values
while ($info = mysqli_fetch_array($result)) {

//create display string
$display_block .= "
<tr>
<td>".$info['Item_No']."</td>
<td>".$info['Manufacturer']."</td>
<td>".$info['Category']."</td>
<td>".$info['Description']."</td>
<td>".$info['Model']."</td>
<td>".$info['Qty']."</td>
<td>".$info['Kw']."</td>
<td>".$info['Hours']."</td>
<td>".$info['Price']."</td>
</tr>";
}
$display_block .= "</table></p>";
?>

<style type="text/css">
<!--
body {
background-color: #333333;
background-image: url(images/bg_tile.gif);
}
.style8 {font-size: 12px}
.style10 {font-family: "Times New Roman", Times, serif; font-size: 14px; font-weight: bold; }
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #FF6600;
background-color: #999999;
text-decoration: underline;
}
a:link {
color: #000000;
text-decoration: none;
}
a:active {
color: #FF6600;
text-decoration: none;
}
.style12 {font-size: 14px}
.style13 {font-family: "Times New Roman", Times, serif; font-size: 18px; }
.style14 {color: #FF0000}
</style>
<div align="center">
<table width="1035" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th height="42" colspan="3" align="left" valign="middle" background="images/BG11.jpg" bgcolor="#CCCCCC" scope="col"><div align="center">
<p><img src="images/reagman_L.gif" alt="Reagan logo" width="99" height="98" /><img name="ReaganPower" src="images/Reagan Power.gif" width="581" height="59" border="0" id="ReaganPower" alt="Reagan logo" /><img src="images/reagman_R.gif" alt="Reagan logo" width="99" height="98" /></p>
</div>
<div align="center"></div></th>
</tr>
<tr>
<th height="23" colspan="3" align="left" valign="middle" bgcolor="#EDA350" scope="col"><div align="center"></div></th>
</tr>
<tr> </tr>
<tr>
<td width="88" align="left" valign="top" bgcolor="#FFFFFF"><p><br />
</p>
<blockquote>
<p class="style10">&nbsp;</p>
</blockquote> </td>
<td width="881" align="left" valign="top" bgcolor="#FFFFFF"><p><br />
Click on column heading to sort.<br />
<a href="product_inventory.php5"></a></p>
<form id="form1" name="form1" method="post" action="">
<label>
<div align="right">Display by Category:
<select name="select" class="input">
<option>All categories</option>
<option>Diesal</option>
<option>Engines</option>
<option>Generators</option>
</select>
<input name="submit" type="submit" id="submit" value="enter" />
</div>
</label>

</form>
<p><?php echo "$display_block";

//free results
mysqli_free_result($result);
?></p>
<p>&nbsp;</p></td>
<td width="66" align="left" valign="top" bgcolor="#FFFFFF">&nbsp;</td>
</tr>

<tr>
<td height="24" colspan="3" bgcolor="#EDA350"><div align="center"></div></td>
</tr>
<tr>
<td colspan="3" background="images/BG11.jpg" bgcolor="#CCCCCC"><div align="center"><span class="style8"><strong>Reagan Equipment Co., Inc.</strong><br />
Toll free: 800.264.7767<br />
Email: <a href="mailto:[email protected]">[email protected]</a></span></div></td>
</tr>
<tr>
<td colspan="3" background="images/BG1.png" bgcolor="#CCCCCC"><div align="center">
<p class="style8">Copyright &copy; 2007<br />
<a href="http://www.point2pointhosting.com/" class="style12"> Hosted by point2point</a></p>
</div></td>
</tr>
</table>
</div>
</body>
</html>

Fang
Sep 12th, 2007, 09:43 PM
How are the links inserted into the headers? Code?

Hopefully the embedded css will be placed in the head later.

cluce
Sep 12th, 2007, 10:43 PM
How are the links inserted into the headers? Code?

Hopefully the embedded css will be placed in the head later.

thanks for the reply.
OK, I narrowed it down to these lines of code in standardista-table-sorting.js


// create a link with an onClick event which will
// control the sorting of the table
var linkEl = createElement('a');
linkEl.href = '#';
linkEl.onclick = this.headingClicked;
linkEl.setAttribute('columnId', i);
linkEl.title = 'Click to sort';

// move the current contents of the cell that we're
// hyperlinking into the hyperlink
var innerEls = row.cells[i].childNodes;
for (var j = 0; j < innerEls.length; j++) {
linkEl.appendChild(innerEls[j]);
}

// and finally add the new link back into the cell
row.cells[i].appendChild(linkEl);

var spanEl = createElement('span');
spanEl.className = 'tableSortArrow';
spanEl.appendChild(document.createTextNode('\u00A0\u00A0'));
row.cells[i].appendChild(spanEl);

}

Of course I am not that familiar with javascript. Do you see anything that could cause firefox not to display these links?

Fang
Sep 13th, 2007, 08:25 AM
// create a link with an onClick event which will
// control the sorting of the table
var linkEl = document.createElement('a');
linkEl.href = '#';
linkEl.onclick = this.headingClicked;
linkEl.setAttribute('columnId', i); // not valid, can cause a problem
linkEl.title = 'Click to sort';

// move the current contents of the cell that we're
// hyperlinking into the hyperlink
var innerEls = row.cells[i].childNodes;
for (var j = 0; j < innerEls.length; j++) {
linkEl.appendChild(innerEls[j]);
}

// and finally add the new link back into the cell
row.cells[i].appendChild(linkEl);

var spanEl = document.createElement('span');
spanEl.className = 'tableSortArrow';
spanEl.appendChild(document.createTextNode('\u00A0\u00A0'));
row.cells[i].appendChild(spanEl);

}

cluce
Sep 13th, 2007, 03:53 PM
can you explain that line of code to me? does it relate to the colunms in my table?

$display_block = "<p align = 'center'> <table class='sortable' border = '1' bordercolor = 'black' cellpadding= '0' cellspacing = '0'>
<thead>
<th bgcolor = 'orange'>Item Number</th>
<th bgcolor = 'orange'>Manufacturer</th>
<th bgcolor = 'orange'>Category</th>
<th bgcolor = 'orange'>Description</th>
<th bgcolor = 'orange'>Model</th>
<th bgcolor = 'orange'>Quantity</th>
<th bgcolor = 'orange'>Kw</th>
<th bgcolor = 'orange'>Hours</th>
<th bgcolor = 'orange'>Price</th>
</thead>";
//if authorized, get the values
while ($info = mysqli_fetch_array($result)) {

//create display string
$display_block .= "
<tr>
<td>".$info['Item_No']."</td>
<td>".$info['Manufacturer']."</td>
<td>".$info['Category']."</td>
<td>".$info['Description']."</td>
<td>".$info['Model']."</td>
<td>".$info['Qty']."</td>
<td>".$info['Kw']."</td>
<td>".$info['Hours']."</td>
<td>".$info['Price']."</td>
</tr>";
thanks for your feedback

Fang
Sep 13th, 2007, 05:05 PM
It is document (http://developer.mozilla.org/en/docs/DOM:document.createElement).createElement(element);
You have not added the document

cluce
Sep 13th, 2007, 06:10 PM
I just did added the document.---- still no links in the header. I did find this out. I get links in the headers when I do a simple table like this...

<tr>
<td></td>
<th colspan='2'>Name</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Date</th>
<th>Forename</th>
<th>Surname</th>
<th>Number</th>
<th>Price</th>
<th>IP Address</th>
<th>Scientific</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<th class='numeric'>385</th>
<th class='numeric'>$160.91</th>
<td></td>
<td></td>

Its when I use the sql query to populate the table , I get no links. :confused:

Fang
Sep 13th, 2007, 08:01 PM
Is the table well formed (valid) ?
Use Web Developer toolbar (http://chrispederick.com/work/web-developer/) for Fx to see the generated code.

cluce
Sep 14th, 2007, 06:09 PM
it looks like it. would I get a warning message if its not?

this is the table that does not get the links in the headers. does anything nook invalid to you. Firefox is my only problem?


$display_block = "<p align = 'center'> <table class='sortable' border = '1' bordercolor = 'black' cellpadding= '0' cellspacing = '0'>
<thead>
<th bgcolor = 'orange'>Item Number</th>
<th bgcolor = 'orange'>Manufacturer</th>
<th bgcolor = 'orange'>Category</th>
<th bgcolor = 'orange'>Description</th>
<th bgcolor = 'orange'>Model</th>
<th bgcolor = 'orange'>Quantity</th>
<th bgcolor = 'orange'>Kw</th>
<th bgcolor = 'orange'>Hours</th>
<th bgcolor = 'orange'>Price</th>
</thead>";
//if authorized, get the values
while ($info = mysqli_fetch_array($result)) {

//create display string
$display_block .= "
<tr>
<td>".$info['Item_No']."</td>
<td>".$info['Manufacturer']."</td>
<td>".$info['Category']."</td>
<td>".$info['Description']."</td>
<td>".$info['Model']."</td>
<td>".$info['Qty']."</td>
<td>".$info['Kw']."</td>
<td>".$info['Hours']."</td>
<td>".$info['Price']."</td>
</tr>";
}
$display_block .= "</table></p>";
?>

Fang
Sep 14th, 2007, 08:06 PM
There is no <tr> in the head!

cluce
Sep 14th, 2007, 08:19 PM
OMG!. thanks

Fang
Sep 14th, 2007, 09:28 PM
Always check and validate the generated document.