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);
?>
定義:*「它永遠不會是相同的項目,不工作。」* - 給我們一個例子。 –
例如,說可供選擇的項目是Apple,Banana和Orange。有時我點擊Apple和Apple在更新div中顯示。有時我點擊蘋果,而不是。香蕉和橙子也一樣。 – user1067577
它可能是你有你的SQL設置,這不是在你的代碼中。我看到的只有3行。 –