单击搜索按钮时jQuery隐藏div

Question

I have a table that generates content using php that called "tab1" and has a search button called with an Id with "cmdsearch". 我有一个表，该表使用名为“ tab1”的php生成内容，并具有一个带有“ cmdsearch”的ID的搜索按钮。 My content seems not to hide when I clicked search. 当我单击搜索时，我的内容似乎没有隐藏。 My code so far 到目前为止我的代码

$(document).ready(function() {

    $( "#datepicker" ).hide();
    $( "#datepicker2" ).hide();
    $( "#datepicker" ).datepicker({dateFormat: 'yy/mm/dd'});
    $( "#datepicker2" ).datepicker({dateFormat: 'yy/mm/dd'});
    $("#category").on('change',function(){
        if($("#category").val() == 'ORIGINAL_DEADLINE'){
        $( "#datepicker" ).show();
        $( "#datepicker2" ).show();
         $( "#datepicker2" ).show();

             }else{
               $( "#datepicker" ).hide();
               $( "#datepicker2" ).hide();
     }      
    $("#cmdsearch").click(function(){

        $("#tab1").hide();
    });
});
});

here is my html code 这是我的HTML代码

 <?php  
    // session_start();  

    // if (!isset($_SESSION['username'])) {  
        // header("Location: login.php");  
        // exit;  
    // }
// $username=$_SESSION['username'];

 ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./js/sample.js"></script>
<script src="./js/quicksearch.js"></script>
<script src="./js/lytebox.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="./css/sample.css">
<link rel="stylesheet" type="text/css" href="./css/table_blue.css">
<link rel="stylesheet" type="text/css" href="./css/lytebox.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script>
$(document).ready(function() {

    $( "#datepicker" ).hide();
    $( "#datepicker2" ).hide();
    $( "#datepicker" ).datepicker({dateFormat: 'yy/mm/dd'});
    $( "#datepicker2" ).datepicker({dateFormat: 'yy/mm/dd'});
    $("#category").on('change',function(){
        if($("#category").val() == 'ORIGINAL_DEADLINE'){
        $( "#datepicker" ).show();
        $( "#datepicker2" ).show();
         $( "#datepicker2" ).show();

             }else{
               $( "#datepicker" ).hide();
               $( "#datepicker2" ).hide();
     }      
});
});

$("#cmdsearch").click(function(){

    $("#tab1").hide();
    });


</script>

</head>
<body>
<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Overdue</a></li>
        <li><a href="#tab2">Next 60 days</a></li>
        <li><a href="#tab3">Others</a></li>
        <li><a href="#tab4">No Deadline</a></li>
        <li><a href="#tab5">Finished Documents</a></li>
        <li><a href="./reg.php">Register User</a></li>
        <li><a href="./report.php">Generate Report</a></li>
        <li><a href="./manage_users.php">Manage Users</a></li>
        <li><a href="./logout.php">Logout</a></li>
    </ul>
    <form method="post" action="table.php">
    Category<select name="category" id="category">
        <option value='APP_NUMBER' >APP_NUMBER</option>
        <option value='SPOC_ASSIGNED' >SPOC_ASSIGNED</option>
        <option value='BORROWER_NAME' >BORROWER_NAME</option>
        <option value='DEFERRED_TYPE' >DEFERRED_TYPE</option>
        <option value='ORIGINAL_DEADLINE' >ORIGINAL_DEADLINE</option>
        </select>
    Search Text<input type="text" name="txtsearch" placeholder="Type to Search" />
     <input type="text" id="datepicker" name="date1" placeholder="Input Start Date"> 
     <input type="text" id="datepicker2" name="date2" placeholder="Input End Date">  
    <input type="submit" id="cmdsearch" name="cmdsearch" value="Search" />
    </form>



    <div class="tab-content">
     <div id="tab1" class="tab active" >

     <?php
        //conection: 
    include "conn.php";
     //consultation: 
     $query = "SELECT * FROM export_workflow.COLLATERAL_MANAGEMENT where DATEDIFF(CURDATE(),ORIGINAL_DEADLINE)>1 and SUBMITTED_PENDING='PENDING'"; 
     //execute the query. 
     if($result = $link->query($query)){
           echo "<table class='data' id='table_example'>".
                "<thead>".
                "<tr>".
                "<td>App Number</td>".
                "<td>Spoc Assigned</td>".
                "<td>Borrower Name</td>".
                "<td>App Finish Date</td>".
                "<td>Developer & Project</td>".
                "<td>Collateral Address Details</td>".
                "<td>Deferred Document</td>".
                "<td>Deferred Type</td>".
                "<td>Original Deadline</td>".
                "<td>Date Completed</td>".
                "<td>SPOC Remarks</td>".
                "<td>File Location</td>".
                "<td>JUW MA Remarks</td>".
                "<td>COSU Remarks</td>".
                "<td>SMU Notes</td>".
                "<td>SUBMITTED/PENDING</td>".
                "<td> EDIT </td>".
                "</tr></thead>";

          while($row = $result->fetch_assoc()){
                echo "<tr><td>".$row['APP_NUMBER']."</td>".
                 "<td>".$row['SPOC_ASSIGNED']."</td>".
                 "<td>".$row['BORROWER_NAME']."</td>".
                 "<td>".$row['APP_FINISH_DATE']."</td>".
                 "<td>".$row['DEVELOPER_PROJECT']."</td>".
                 "<td>".$row['COLLATERAL_ADDRESS_DETAILS']."</td>".
                 "<td>".$row['DEFERRED_DOCUMENT']."</td>".
                 "<td>".$row['DEFERRED_TYPE']."</td>".
                 "<td>".$row['ORIGINAL_DEADLINE']."</td>".
                 "<td>".$row['DATE_COMPLETED']."</td>".
                 "<td>".$row['SPOC_REMARKS']."</td>".
                 "<td>".$row['FILED_LOCATION']."</td>".
                 "<td>".$row['JUW_MA_REMARKS']."</td>".
                 "<td>".$row['COSU_REMARKS']."</td>".
                 "<td>".$row['SMU_NOTES']."</td>".
                 "<td>".$row['SUBMITTED_PENDING']."</td>".
                 "<td><a href='spoc_remarks.php?id=".$row['ID']."' class='lytebox'><image src='./images/pen.png' height=30 width=30></a></td>".
                 "</tr>";

          }
          $result->close();
          echo "</table>\r\n";
        } else {
          printf("<p>Error: %s</p>\r\n", $mysqli->error);
        }
        ?>
        </div>

        <div id="tab_result">
        <?php 
    if(isset($_POST['cmdsearch'])){
    $category=$_POST['category'];
     $text=$_POST['txtsearch'];
     $date1=$_POST['date1'];
     $date2=$_POST['date2'];



//connect to db

     $link = mysqli_connect("10.20.8.70","stcutie","qwerty123","export_workflow") or die("Error " . mysqli_error($link)); 
     if($link->connect_error){
          printf("Connect failed: %s\n", $mysqli->connect_error);
          exit();
     }

    if($category==='ORIGINAL_DEADLINE'){
         $sql="SELECT * FROM COLLATERAL_MANAGEMENT where ($category BETWEEN '$date1' AND '$date2')";

    }else{
            $sql="SELECT * FROM COLLATERAL_MANAGEMENT where $category LIKE '%$text%'";

    }

    if (mysqli_query($link, $sql)) {

            } else {
                echo "Error: " . $sql . "<br>" . mysqli_error($link);

            }

        $result = $link->query($sql);
         echo "<table class='data' id='table_example'>".
                "<thead>".
                "<tr>".
                "<td>App Number</td>".
                "<td>Spoc Assigned</td>".
                "<td>Borrower Name</td>".
                "<td>App Finish Date</td>".
                "<td>Developer & Project</td>".
                "<td>Collateral Address Details</td>".
                "<td>Deferred Document</td>".
                "<td>Deferred Type</td>".
                "<td>Original Deadline</td>".
                "<td>Date Completed</td>".
                "<td>SPOC Remarks</td>".
                "<td>File Location</td>".
                "<td>JUW MA Remarks</td>".
                "<td>COSU Remarks</td>".
                "<td>SMU Notes</td>".
                "<td>SUBMITTED/PENDING</td>".
                "<td> EDIT </td>".
                "</tr></thead>";

        while($row = $result->fetch_assoc()){
                echo "<tr><td>".$row['APP_NUMBER']."</td>".
                 "<td>".$row['SPOC_ASSIGNED']."</td>".
                 "<td>".$row['BORROWER_NAME']."</td>".
                 "<td>".$row['APP_FINISH_DATE']."</td>".
                 "<td>".$row['DEVELOPER_PROJECT']."</td>".
                 "<td>".$row['COLLATERAL_ADDRESS_DETAILS']."</td>".
                 "<td>".$row['DEFERRED_DOCUMENT']."</td>".
                 "<td>".$row['DEFERRED_TYPE']."</td>".
                 "<td>".$row['ORIGINAL_DEADLINE']."</td>".
                 "<td>".$row['DATE_COMPLETED']."</td>".
                 "<td>".$row['SPOC_REMARKS']."</td>".
                 "<td>".$row['FILED_LOCATION']."</td>".
                 "<td>".$row['JUW_MA_REMARKS']."</td>".
                 "<td>".$row['COSU_REMARKS']."</td>".
                 "<td>".$row['SMU_NOTES']."</td>".
                 "<td>".$row['SUBMITTED_PENDING']."</td>".
                 "<td><a href='spoc_remarks.php?id=".$row['ID']."' class='lytebox'><image src='./images/pen.png' height=30 width=30></a></td>".

                 "</tr>";
    }
    }
        ?>
        </div>




</div>

<?php
$link->close();
?>
</body>
</html>

Answer 1

You have the click event listener registration in change event handler, so unless you change the value of the #category the click handler is not added. 您已在更改事件处理程序中注册了单击事件侦听器，因此，除非您更改#category的值，否则不会添加单击处理程序。 Also there is a possibility that it will add multiple click handler(1 new handler each time you change the value of category ) 也有可能会添加多个点击处理程序（每次更改category的值时，都会添加1个新处理程序）

$(document).ready(function () {

    $("#datepicker").hide();
    $("#datepicker2").hide();
    $("#datepicker").datepicker({
        dateFormat: 'yy/mm/dd'
    });
    $("#datepicker2").datepicker({
        dateFormat: 'yy/mm/dd'
    });
    $("#category").on('change', function () {
        if ($("#category").val() == 'ORIGINAL_DEADLINE') {
            $("#datepicker").show();
            $("#datepicker2").show();
            $("#datepicker2").show();

        } else {
            $("#datepicker").hide();
            $("#datepicker2").hide();
        }
    });
    //should be outside of the change event hanlder
    $("#cmdsearch").click(function (e) {
        e.preventDefault();//prevent the form submit since the button is inside a from 
        $("#tab1").hide();
    });
});

But it could be simplified as 但是可以简化为

$(function () {

    var $dtps = $("#datepicker, #datepicker2"); //use a class selector to simplify this

    $dtps.hide().datepicker({
        dateFormat: 'yy/mm/dd'
    });
    $("#category").on('change', function () {
        $dtps.toggle(this.value == 'ORIGINAL_DEADLINE')
    });
    //should be outside of the change event hanlder
    $("#cmdsearch").click(function (e) {
        e.preventDefault();//prevent the form submit since the button is inside a from 
        $("#tab1").hide();
    });
});

Demo: Fiddle 演示：小提琴

Note: Since the button is of type submit and is inside a form, the default action of the button click is to submit the button, since you want to do a custom action you need to prevent it by calling event.preventDefault() or by changing the type of the button to button (like <input type="button" id="cmdsearch" name="cmdsearch" value="Search" /> ) 注意：由于按钮的类型为submit ，并且位于表单内，因此单击按钮的默认操作是提交按钮，因为您要执行自定义操作，因此需要通过调用event.preventDefault()或将按钮的类型更改为button （例如<input type="button" id="cmdsearch" name="cmdsearch" value="Search" /> ）

单击搜索按钮时jQuery隐藏div

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-05-18 02:57:33

单击搜索按钮时jQuery隐藏div

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-05-18 02:57:33

解决方案1
1 已采纳 2015-05-18 02:57:33