views:

91

answers:

1

Hi all,

I'm new to jquery and php and I'm having trouble doing this...

I have a php webpage that gathers content from a mysql table. I want to be able to filter through this content with some checkboxes, but have no idea how to create the checkbox jquery code and for it to get the selected or checked results back from the database to display on the page.

Any help on this would be amazing.

I'll post the entire script below so you can see what I mean. I'm finding it pretty difficult to select(check) a box and then send the id to the sql query. So if I only check the 'automotive' box, the page will only display results from the automotive category.

Script (I have hardcoded 'automotive' in the query, the script does not work):

<?php
  $ids=$_GET['id'];
  echo $ids;

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SUPERMAN</title>
<link href="../style.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" >

$(document).ready(function() {    
    $(":checkbox").change(function(){

    });    
});



</script>


</head>

<body>

<div class="check_filter">


    <div id="filter">
        <input name="marketing" type="checkbox" id="marketing" /><label for="marketing">Marketing</label>
        <input name="automotive" type="checkbox" id="automotive" /><label for="automotive">Automotive</label>
        <input name="sports" type="checkbox" id="sports" /><label for="sports">Sports</label>
    </div>

</div><!-- End check_filter -->

<?php
    include('connect.php'); 

    $tableName="explore";       
    $targetpage = "index.php";  
    $limit = 10; 

    $query = "SELECT COUNT(*) as num FROM $tableName WHERE category='$ids'";
    $total_pages = mysql_fetch_array(mysql_query($query));
    $total_pages = $total_pages[num];

    $stages = 3;
    $page = mysql_escape_string($_GET['page']);
    if($page){
        $start = ($page - 1) * $limit; 
    }else{
        $start = 0; 
        }   

    // Get page data ".$_POST["id"]."
    //$query1 = "SELECT * FROM $tableName LIMIT $start, $limit";
    $query1 = "SELECT * FROM explore WHERE category='automotive' ORDER BY category LIMIT $start, $limit";
    $result = mysql_query($query1);

    // Initial page num setup
    if ($page == 0){$page = 1;}
    $prev = $page - 1;  
    $next = $page + 1;                          
    $lastpage = ceil($total_pages/$limit);      
    $LastPagem1 = $lastpage - 1;                    


    $paginate = '';
    if($lastpage > 1)
    {   




        $paginate .= "<div class='paginate'>";
        // Previous
        if ($page > 1){
            $paginate.= "<a href='$targetpage?page=$prev'>previous</a>";
        }else{
            $paginate.= "<span class='disabled'>previous</span>";   }



        // Pages    
        if ($lastpage < 7 + ($stages * 2))  // Not enough pages to breaking it up
        {   
            for ($counter = 1; $counter <= $lastpage; $counter++)
            {
                if ($counter == $page){
                    $paginate.= "<span class='current'>$counter</span>";
                }else{
                    $paginate.= "<a href='$targetpage?&id=$ids&page=$counter'>$counter</a>";}                   
            }
        }
        elseif($lastpage > 5 + ($stages * 2))   // Enough pages to hide a few?
        {
            // Beginning only hide later pages
            if($page < 1 + ($stages * 2))       
            {
                for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
                {
                    if ($counter == $page){
                        $paginate.= "<span class='current'>$counter</span>";
                    }else{
                        $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}                    
                }
                $paginate.= "...";
                $paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
                $paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";       
            }
            // Middle hide some front and some back
            elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
            {
                $paginate.= "<a href='$targetpage?page=1'>1</a>";
                $paginate.= "<a href='$targetpage?page=2'>2</a>";
                $paginate.= "...";
                for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
                {
                    if ($counter == $page){
                        $paginate.= "<span class='current'>$counter</span>";
                    }else{
                        $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}                    
                }
                $paginate.= "...";
                $paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
                $paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";       
            }
            // End only hide early pages
            else
            {
                $paginate.= "<a href='$targetpage?page=1'>1</a>";
                $paginate.= "<a href='$targetpage?page=2'>2</a>";
                $paginate.= "...";
                for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
                {
                    if ($counter == $page){
                        $paginate.= "<span class='current'>$counter</span>";
                    }else{
                        $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}                    
                }
            }
        }

                // Next
        if ($page < $counter - 1){ 
            $paginate.= "<a href='$targetpage?page=$next'>next</a>";
        }else{
            $paginate.= "<span class='disabled'>next</span>";
            }

        $paginate.= "</div>";       


}
 echo $total_pages.' Results';
 // pagination
 echo $paginate;
?>

<ul id="pagination">

<?php 


        while($row = mysql_fetch_array($result))
        {

        echo '<li>'.$row['site_name'].'</li>';

        }

    ?>
</ul>


</body>
</html>
A: 

Here's some sample code to get you started:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
    <script>
        $(document).ready(function(){
            $("#test").click(function()
            {    
                if ($(this).is(":checked"))
                {
                        $("#example").hide();

                }else{
                        $("#example").show();
                }

            });
        });
    </script>
</head>
<body>
    <input type="checkbox" id="test"/>

    <div id="example">Hide Show</div>
</body>
</html>

You should really read up on jQuery to get an understanding of what's going one, but to get you started: This piece $("whatever") - is called the selector. Basically, it's how you find what you're looking for in the DOM.

  • $("#whatever") gets an item by its ID
  • $(".whatever") gets an item(s) by its class name
  • $("whatever") gets an item(s) by its node
  • $(whatever) usually used for selecting something special like "document" or "window"

After you've found the item you want, then you can add on events or call methods. That's everything after $("whatever").

Please realize this is a super basic summary, so please read up on it when you get a chance.

Brandon Boone