Question

在此测试页面上，我希望能够开始输入项目，智能建议将有助于完成它。更改该字段后，应通过ajax处理项目值并将其发送到div“updatediv”。

现在，它适用于某些已提交的项目，但不适用于其他项目。它永远不会是不起作用的相同项目。

指数：

<!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);

?>

Answer 1

我不确定这是否真的是答案，但在关闭index.php中的数据库连接后，问题就消失了......

Ajax表单更新不能始终如一地工作

1 个答案: