2015-05-18 110 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

你能幫我解開按鈕嗎? –

相關問題