当单击搜索按钮并显示结果时，jQuery隐藏div

Question

newbie here, having problem with my jquery right now. 新手在这里，我的jQuery现在有问题。 When I clicked search the result is posted on the right div, only problem is the div1 is not being able to hide. 当我单击搜索时，结果将发布在右侧的div上，唯一的问题是div1无法隐藏。 Help please. 请帮助。

Here is the composition of my code so far. 到目前为止，这是我的代码的组成。 Just really getting messed up with the hide function of the div id=tab1 只是真的被div id = tab1的hide函数搞砸了

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

$(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.preventDefault();
        $("#tab1").hide();
        $("#tab_result").show();
    });
});
</script>
<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="beta_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>

Answer 1

Try adding this someware just call removeDiv() 尝试添加此软件，只需调用removeDiv（）

http://pastebin.com/f5EUwszt http://pastebin.com/f5EUwszt

Answer 2

You are hiding the div (with id=tab1) with onclick event of a submit button. 您正在使用提交按钮的onclick事件隐藏div（id = tab1）。

<input type="submit" id="cmdsearch" name="cmdsearch" value="Search" />

A submit button is supposed to use to submit a form. 应该使用“提交”按钮来提交表单。 So when you click it, it submits the form data to ' beta_table.php' and the page is refreshed. 因此，当您单击它时，它将表单数据提交到“ beta_table.php” ，并且页面将刷新。 If you want to hide the div (with id=tab1), you could use a button like 如果要隐藏div（id = tab1），可以使用类似

 <input type="button" id="cmdsearch_btn" name="cmdsearch_btn" value="Search" />

You have to decide according to your need. 您必须根据需要决定。 When a page gets submitted using a submit button there's no point hiding a div because the page gets refreshed. 使用提交按钮提交页面时，隐藏div毫无意义，因为页面已刷新。 I hope that helps. 希望对您有所帮助。

当单击搜索按钮并显示结果时，jQuery隐藏div

问题描述

2 个解决方案

解决方案1
0 2015-05-18 08:16:44

解决方案2
0 2015-05-18 08:20:50

当单击搜索按钮并显示结果时，jQuery隐藏div

问题描述

2 个解决方案

解决方案1 0 2015-05-18 08:16:44

解决方案2 0 2015-05-18 08:20:50

解决方案1
0 2015-05-18 08:16:44

解决方案2
0 2015-05-18 08:20:50