2014-02-12 23 views
0

在這個測試頁面上,我希望能夠開始輸入一個項目,聰明的建議將幫助完成它。 在更改該字段時,應通過ajax處理項目值併發送到div「updatediv」。Ajax表格更新不能一致地工作

現在,它適用於某些已提交的項目,但不適用於其他項目。這絕不是同樣的項目,不工作。

指數:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" > 
    <title>Select to Autocomplete</title> 
    <script src="jquery.js"></script> 
    <script src="jquery-ui-autocomplete.js"></script> 
    <script src="jquery.select-to-autocomplete.min.js"></script> 
    <script type="text/javascript"> 
     (function($){ 
     $(function(){ 
      $('select').selectToAutocomplete(); 
      $('#update').change(function(){ 
      var input = $(this).serialize(); 
      var parts = input.split('='); 
      var box = parts[1]; 
      $.ajax({ // ajax call starts 
       url: 'serverside.php', // JQuery loads serverside.php 
       data: 'box=' + box, // Send value of the clicked button 
       dataType: 'json', // Choosing a JSON datatype 
       success: function(data) // Variable data constains the data we get from serverside 
       { 
        $('#updatediv').html(''); // Clear #content div 
        $('#updatediv').append(data); 
       } 
      }); 
      return false; 
      }); 
     }); 
     })(jQuery); 
    </script> 
    <style type="text/css" media="screen"> 
     body { 
     font-family: Arial, Verdana, sans-serif; 
     font-size: 13px; 
     } 
    .ui-autocomplete { 
     padding: 0; 
     list-style: none; 
     background-color: #fff; 
     width: 218px; 
     border: 1px solid #B0BECA; 
     max-height: 350px; 
     overflow-y: scroll; 
    } 
    .ui-autocomplete .ui-menu-item a { 
     border-top: 1px solid #B0BECA; 
     display: block; 
     padding: 4px 6px; 
     color: #353D44; 
     cursor: pointer; 
    } 
    .ui-autocomplete .ui-menu-item:first-child a { 
     border-top: none; 
    } 
    .ui-autocomplete .ui-menu-item a.ui-state-hover { 
     background-color: #D5E5F4; 
     color: #161A1C; 
    } 
    </style> 
</head> 
<body> 

<center> 
<table> 
    <tr> 
     <td style="height: 20px;"></td> 
    </tr> 
</table> 
<h1>Update</h1> 
<form id="update"> 
    <table cellpadding="10" width="800"> 
     <tr> 
      <td colspan="3" style="text-align: center;"><div class="form_result" style="color:#ff0000; font-weight: bold;"> </div></td> 
     </tr> 
     <tr> 
      <td style="text-align: left;" colspan="3">Select an Application: 
       <select name="item" id="selector" autofocus="autofocus" autocorrect="off" autocomplete="off"> 
        <option value="" selected="selected">Select</option> 
        <?php 
         // Connect to db 
      $db = new mysqli('user', 'root', 'pword', 'table'); 

        if($db->connect_errno > 0){ 
         die('Unable to connect to database [' . $db->connect_error . ']'); 
        } 

        // Creating divs 
        $result = $db->query("SELECT * FROM items"); 

         while($row = $result->fetch_assoc()) 
         { 
          echo '<option value="'.$row['name'].'">'.$row['name'].'</option>'; 
          echo '<option value="'.$row['full_name'].'">'.$row['full_name'].'</option>'; 
         } 
        ?> 
       </select> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="3" style="height: 10px;"></td> 
     </tr> 
    </table> 

    <div id="updatediv" style="width:800px;border:1px solid black;"> 
    </div> 
</form> 
</center> 

</body> 
</html> 

服務器端:

<?php 

// Get value of clicked button 
$box = $_GET['box']; 
print json_encode($box); 

?> 
+1

定義:*「它永遠不會是相同的項目,不工作。」* - 給我們一個例子。 –

+0

例如,說可供選擇的項目是Apple,Banana和Orange。有時我點擊Apple和Apple在更新div中顯示。有時我點擊蘋果,而不是。香蕉和橙子也一樣。 – user1067577

+0

它可能是你有你的SQL設置,這不是在你的代碼中。我看到的只有3行。 –

回答

0

我不知道這是否是真的答案,但在收盤的index.php數據庫連接後,這個問題就走開了。 ..