堆棧內存溢出
  簡體   English   中英

單擊搜索按鈕時jQuery隱藏div

[英]jquery hide div when clicked search button

 原文  2015-05-18 02:53:02  1   1    javascript/ jquery

問題描述

我有一個表，該表使用名為“ tab1”的php生成內容，並具有一個帶有“ cmdsearch”的ID的搜索按鈕。 當我單擊搜索時，我的內容似乎沒有隱藏。 到目前為止我的代碼 

$(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();
    });
});
});

這是我的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>

1 個解決方案

解決方案1
 1 已采納  2015-05-18 02:57:33

您已在更改事件處理程序中注冊了單擊事件偵聽器，因此，除非您更改#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();
    });
});

但是可以簡化為 

$(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();
    });
});

演示： 小提琴

注意：由於按鈕的類型為submit ，並且位於表單內，因此單擊按鈕的默認操作是提交按鈕，因為您要執行自定義操作，因此需要通過調用event.preventDefault()或將按鈕的類型更改為button （例如<input type="button" id="cmdsearch" name="cmdsearch" value="Search" /> ）

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 單擊搜索按鈕時，如何在jQuery中隱藏導航欄切換？ 當單擊搜索按鈕並顯示結果時，jQuery隱藏div 單擊按鈕時隱藏 div 並顯示 div 單擊按鈕時隱藏/顯示隱藏的div 使用Javascript單擊單選按鈕時隱藏DIV 設置 cookie 以在單擊按鈕時隱藏 div 單擊另一個時隱藏div 顯示div onclick並在其外部單擊時隱藏div並關閉按鈕 單擊時隱藏Div 檢測何時使用jquery在div中單擊按鈕
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM