2015-05-18 113 views
0

新手在这里,有我的jquery现在的问题。当我点击搜索结果张贴在正确的div,唯一的问题是div1无法隐藏。请帮助。jquery hide div当点击搜索按钮并显示结果

这是我的代码到目前为止的组成。只是真的越来越搞砸与DIV ID的

<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> 

回答

0

你是隐藏在div(使用id = TAB1 )提交按钮的onclick事件。

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

提交按钮应该用于提交表单。因此,当您点击它时,它会将表单数据提交到'beta_table.php'并刷新页面。如果你想隐藏div(id = tab1),你可以使用像

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

你必须根据你的需要来决定。当使用提交按钮提交页面时,没有意义隐藏div,因为页面被刷新。我希望有所帮助。

+0

现在我明白了。这是我第一次使用按钮,是否与提交一样? –

+0

编号默认情况下,提交按钮用于提交表单。但是,您也可以使用JavaScript或jQuery使用普通按钮提交表单。 –

+0

你能帮我解开按钮吗? –

相关问题