JavaScript - Filter Results In Table Help

Hey there everyone.

I'm a bit of a newb with javascript and php so apologies if this question is a bit simple, although I can't get my head round how to go about doing it.

I have a search page where a user can type in a search box, or they can use an alphabetical list to search for the record they're looking for. Eg they click 'a' and all the records beginning with the letter 'a' appear.

I'd also like to have it so that each record has a number of tags, and I'd then like to be able to filter records according to which tags have been selected - preferably using checkboxes.

For example, perhaps the tags would be colours and the records represented shoes. There'd be checkboxes for blue, yellow, black, brown and so on. At first all colours would be shown, but if the user clicks on brown the all but the brown shoes dissappear.

like I say, I'm new to learning php so please be gentle. Also I'm using Cakephp so if there's anyway to make it easier using Cake then I'd love to know.

thanks

I got no idea how to create a filter based on multiple drop menus to filter & sort data from php mysql query. Can anyone help me to write javascipt for this problem?

My php mysql query as below:-
mysql_select_db($database_winwin, $winwin);
$query_rsMobile = "SELECT product_detail.product_Id, product_detail.product, product_detail.product_category, product_detail.product_brand, product_detail.product_name, product_detail.product_price, product_detail.thumbnail_url, product_detail.product_url, product_detail.product_status, product_detail.commission, product_detail.product_added_date FROM product_detail WHERE product_detail.product='Mobile Devices' AND product_detail.product_status='For sales'";
$rsMobile = mysql_query($query_rsMobile, $winwin) or die(mysql_error());
$row_rsMobile = mysql_fetch_assoc($rsMobile);
$totalRows_rsMobile = mysql_num_rows($rsMobile);

Whereby:-
Product Brand: product_brand
Product price: product_price
Commission: commission
Product name: product_name
Product Thumbnail: thumbnail_url
Product URL: product_url

HTML for filters & sorter:-
<div id="filters">
<form action="" method="post" name="form_filters" id="form_filters">
<table width="750" border="0">
<tr>
<td>Brand:</td>
<td><select name="productBrand" id="productBrand">
<option value="All Brands">All Brands</option>
<option value="Sony Ericsson">Sony Ericsson</option>
<option value="Samsung">Samsung</option>
<option value="Nokia">Nokia</option>
</select></td>
<td>Price:</td>
<td><select name="priceRange" id="priceRange">
<option value="All Price">All Price</option>
<option value="Below RM1000">Below RM1000</option>
<option value="RM1000-RM1999">RM1000-RM1999</option>
<option value="RM2000 & Above">RM2000 & Above</option>
</select></td>
<td>Sort by:</td>
<td><select name="productSort" id="productSort">
<option value="Sort By Name">Name</option>
<option value="Sort By Price">Price</option>
</select></td>
<td><input name="Apply Filters" type="submit" value="Apply Filters"/></td>
<td><input name="Reset Filters" type="Reset" value="Reset Filters"/></td>
</tr>
</table>
</form>
</div>

Once user click on "Apply Filters" javascript has to sort list the product items.

HTML for Pager (Value for total items, display some page numbers with hyperlink (1,2,3....10,11,12), hyperlink to previous page, hyperlink to next page) :-

<div id="pager">
No. of items per page:
<select name="NumOfItem" id="NumOfItem">
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
Total Item:
Pages ...
Next...
Previous
</div>

Javascript has to manage pager column.

HTML for Product display:-
<div id="product">
<div id="Thumbnail">
Here Javascript has to display Thumbnail image based on filters & sorter drop menus inputs. When click on this image page must redirect to "Product URL".
</div>
<div id="Price">
Here Javascript has to display "Price" based on filters & sorter drop menus inputs. When click on this "Price" page must redirect to "Product URL".
</div>
<div id="Commission">
Here Javascript has to display "Commission" image based on filters & sorter drop menus inputs. When click on this "Commission" page must redirect to "Product URL".
</div>
</div>

Javascript has to repeat regions (<div id="product"></div>)based on "NumOfItem" drop menu (number of items display per page) and also update the pager column

I wrote a script that should delete all table rows at once.

For loop deletes all rows except row 1 and row 3. Further clicking on the delete button, deletes row 1 and then 3.


While loop ,on the first click on the delete button, also leaves rows 1 and 3 not deleted. Further clicking on the delete button, does not delete these rows.

I was sure that both version of the script should delete all rows in the table at once. Could someone look at the script and tell me what is wrong?

Thank you very much

Code:

<html>
<head>
<title>Deleting All Table Entries</title>
</head>
<script  type="text/javascript">
/* WHILE LOOP
var i=0;
function deleteAll() {
document.getElementById("deleteButton").onclick=function() {
var table=document.getElementById("myTable");

while(i<table.rows.length) {
table.deleteRow(i);
i++; 
}

}
}

*/

/*FOR LOOP*/
function deleteAll() {
document.getElementById("deleteButton").onclick=function() {
var table=document.getElementById("myTable");

for(var i=0; i<table.rows.length; i++) {
table.deleteRow(i);
}

}
}


window.onload=deleteAll;

</script>
<body>
<table id="myTable">
<tr>  
<td>Row 0</td>
</tr>
<tr>  
<td>Row 1</td>
</tr>

<tr>  
<td>Row 2</td>
</tr>

<tr>  
<td>Row 3</td>
</tr>


<tr>  
<td>Row 4</td>
</tr>

</table>
<button id="deleteButton"> Delete All Rows in the Table </button>
</body>
</html>

view the rest of my comments works on the first page but when i extend the search results the rest of the view comments wont expand.

click View all 3 comments and it will show all comments
then click more button
try to click the view all comments on the next comment and nothing happens but the screen jumping up to the top.

http://www.runningprofiles.com/membe...ll_Script.php#

Why is this??

What do i need to do to fix it?

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>9lessons Applicatio Demo</title>
<link href="frame.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.oembed.js"></script>
 


<script type="text/javascript">
$(function() 
{
$('.more').live("click",function() 
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');

$.ajax({
type: "POST",
url: "http://www.runningprofiles.com/members/shout/data/ajax_more.php",
data: "lastmsg="+ ID, 
cache: false,
success: function(html){
$("ol#updates").append(html);
$("#more"+ID).remove(); // removing old more button
}
});
}
else
{
$(".morebox").html('The End');// no results
}

return false;
});
});




$(function() 
{
$(".view_comments").click(function() 
{
var ID = $(this).attr("id");

$.ajax({
type: "POST",
url: "../viewajax.php",
data: "msg_id="+ ID, 
cache: false,
success: function(html){
$("#view_comments"+ID).prepend(html);
$("#view"+ID).remove();
$("#two_comments"+ID).remove();
}
});
return false;
});
});



$(function() {

$(".comment_button").click(function() {

var element = $(this);
   
    var boxval = $("#content").val();
    
    var dataString = 'content='+ boxval;
    
    if(boxval=='')
    {
    alert("Please Enter Some Text");
    
    }
    else
    {
    $("#flash").show();
    $("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle">&nbsp;<span class="loading">Loading Update...</span>');
$.ajax({
        type: "POST",
  url: "update_ajax.php",
   data: dataString,
  cache: false,
  success: function(html){
 
  $("ol#update").prepend(html);
  $("ol#update li:first").slideDown("slow");
  
   document.getElementById('content').value='';
   $('#content').value='';
   $('#content').focus();
  $("#flash").hide();
  
    
    $("#expand_url").oembed(boxval);
    
  }
 });
}
return false;
    });


//comment slide
$('.comment').live("click",function() 
{

var ID = $(this).attr("id");
$(".fullbox"+ID).show();
$("#c"+ID).slideToggle(300);

return false;
});


//commment Submint

$('.comment_submit').live("click",function() 
{

var ID = $(this).attr("id");

var comment_content = $("#textarea"+ID).val();
    
    var dataString = 'comment_content='+ comment_content + '&msg_id=' + ID;
    
    if(comment_content=='')
    {
    alert("Please Enter Comment Text");
    
    }
    else
    {
    
   
       $.ajax({
        type: "POST",
  url: "comment_ajax.php",
   data: dataString,
  cache: false,
  success: function(html){
  
 
  $("#commentload"+ID).append(html);
    document.getElementById("textarea"+ID).value='';
   
   $("#textarea"+ID).focus();
  
  }
 });
    
    
    }

return false;
});

// Delete Wall Update

$('.delete_update').live("click",function() 
{
var ID = $(this).attr("id");
var dataString = 'msg_id='+ ID;
var parent=$("#bar"+ID);
    jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', 
                
                    function(r) {
                    
                    
                    if(r==true)
                    {
$.ajax({
        type: "POST",
  url: "delete_comment.php",
   data: dataString,
  cache: false,
  success: function(html){
 
 $("#comment"+ID).slideUp();
    
  }
 });
}
return false;
});




return false;

});
});


</script>


<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.update_box
{
background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px
}
a
    {
    text-decoration:none;
    color:#d02b55;
    }
    a:hover
    {
    text-decoration:underline;
    color:#d02b55;
    }
    *{margin:0;padding:0;}
    
    
    ol.timeline
    {list-style:none;font-size:1.2em;}ol.timeline li{ display:none;position:relative; }ol.timeline li:first-child{border-top:1px dashed #006699;}
    .delete_button
    {
    float:right; margin-right:10px; width:20px; height:20px
    }
    
    .cdelete_button
    {
    float:right; margin-right:10px; width:20px; height:20px
    }
    
    .feed_link
    {
    font-style:inherit; font-family:Georgia; font-size:13px;padding:10px; float:left; width:350px
    }
    .comment
    {
    color:#0000CC; text-decoration:underline
    }
    .delete_update
    {
    font-weight:bold;
    
    }
    .cdelete_update
    {
    font-weight:bold;
    
    }
    .post_box
    {
    height:55px;border-bottom:1px dashed #006699;background-color:#F3F3F3;  width:499px;padding:.7em 0 .6em 0;line-height:1.1em;
    
    }
    #fullbox
    {
    margin-top:6px;margin-bottom:6px; display:none;
    }
    .comment_box
    {
        display:none;margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px;  height:50px;
    
    }
    .comment_load
    {
      margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:30px; font-size:12px; border-bottom:solid 1px #FFFFFF;
    
    }
    .text_area
    {
    width:290px;
    font-size:12px;
    height:30px;
    }
    #expand_box
    {
    margin-left:90px;
    margin-top:5px;
    margin-bottom:5px;
    }
    embed
    {
        width:200px;
        height:150px;

    }
*{ margin:0px; padding:0px }
ol.timeline
{ 
list-style:none
}
ol.timeline li
{ 
position:relative;
border-bottom:1px #dedede dashed; 
padding:8px; 
}
.morebox
{
font-weight:bold;
color:#333333;
text-align:center;
border:solid 1px #333333;
padding:8px;
margin-top:8px;
margin-bottom:8px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.morebox a{ color:#333333; text-decoration:none}
.morebox a:hover{ color:#333333; text-decoration:none}
#container{margin-left:60px; width:580px }
    
</style>
</head>

<body>
<?php include '../../../settings.php'; ?>

<div align="center">
<table cellpadding="0" cellspacing="0" width="500px">
<tr>
<td>


<div align="left">
<form  method="post" name="form" action="">
<table cellpadding="0" cellspacing="0" width="500px">

<tr><td align="left"><div align="left">
<h3>What are you doing?</h3></div></td></tr>
<tr>
<td style="padding:4px; padding-left:10px;" class="update_box">
<textarea cols="30" rows="2" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" maxlength="145" ></textarea><br />
<input type="submit"  value="Update"  id="v" name="submit" class="comment_button"/>
</td>

</tr>

</table>
</form>

</div>
<div style="height:7px"></div>
<div id="flash" align="left"  ></div>



<ol  id="update" class="timeline">
</ol>
<ol class="timeline" id="updates">
<div id='old_updates'>
<?php
$small=mysql_query("select * from messages2 order by msg_id desc LIMIT 5");
while($r=mysql_fetch_array($small))
{ 
$id=$r['msg_id'];
$msg=$r['message'];

?>


<div align="left" class="post_box">
<span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span>
</div>



<?php
//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id ");
$array = mysql_fetch_assoc($csql);

$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>


<div class="comment_ui" id="view<?php echo $id; ?>">
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>
</div>
<?php 
}


?>


<div id="view_comments<?php echo $id; ?>"></div>
<div id="two_comments<?php echo $id; ?>">




<table width="80%">


<?php
$small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 ");
while($rowsmall22=mysql_fetch_array($small2))
{ 
$c_id=$rowsmall22['com_id'];
$comments=$rowsmall22['comment'];
?>


<div class="comment_actual_text">



<tr>
    <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top">
                   


 <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left">
                     <tr>

                 <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td>
                 <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left">
                   <strong>Jarratt</strong> <?php echo $comments; ?>
                   <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td>
        
</tr> 
</table><br />
    </td>
  </tr>








</div>
<?php } ?>
</table>
</div>



<?php } ?>
</ol>
<div id="more<?php echo $id; ?>" class="morebox">
<a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a>
</div>








</div>


</td>
</tr>
</table>
</div>
</body>
</html>


if it help here is ajax_more.php

PHP Code:
      <?php
include("../../../settings.php");
if(isSet($_POST['lastmsg']))
{
$lastmsg=$_POST['lastmsg'];
$lastmsg=mysql_real_escape_string($lastmsg);

$small=mysql_query("select * from messages2 WHERE msg_id<'$lastmsg' order by msg_id desc LIMIT 2");
while($r=mysql_fetch_array($small))
{ 
$id=$r['msg_id'];
$msg=$r['message'];

?>


<div align="left" class="post_box">
<span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span>
</div>



<?php
//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id ");
$array = mysql_fetch_assoc($csql);

$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>


<div class="comment_ui" id="view<?php echo $id; ?>">
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>
</div>
<?php 
}


?>


<div class="comments" id="view_comments<?php echo $id; ?>"></div>
<div id="two_comments<?php echo $id; ?>">




<table width="50%">


<?php
$small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 ");
while($rowsmall22=mysql_fetch_array($small2))
{ 
$c_id=$rowsmall22['com_id'];
$comments=$rowsmall22['comment'];
?>


<div class="comment_actual_text">



<tr>
    <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top">
                   


 <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left">
                     <tr>

                 <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td>
                 <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left">
                   <strong>Jarratt</strong> <?php echo $comments; ?>
                   <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td>
        
</tr> 
</table><br />
    </td>
  </tr>








</div>
<?php } ?>
</table>
</div>



<?php } ?>



<div id="more<?php echo $id; ?>" class="morebox">
<a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a>
</div>
<?php
}
?>