Question

基本上我试图使用ajax概念来玩编辑功能。

大家都知道，我现在处于起步阶段，现在我从这个网址下载了一些代码。 http://vitalets.github.io/x-editable/docs.html

我的代码在这里

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Ajax Edit using PHP</title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap-editable.css" rel="stylesheet">
    <script src="jquery-2.0.3.min.js"></script> 
    <script src="bootstrap.min.js"></script>
    <script src="bootstrap-editable.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

    $('#username').editable({
        type: 'text',
        url: 'post.php',
        title: 'Enter username'
    });

    });
    </script>
    </head>

    <body>
    <?php
    mysql_connect("localhost", "root", "password") or die(mysql_error());
    mysql_select_db("test") or die(mysql_error());
    $result = mysql_query("SELECT * FROM books") or die(mysql_error()); 
    ?>
    <div style="margin-top:100px;margin-left:40px;">
    <?php while($row = mysql_fetch_array( $result )) { ?>
    <a href="#" data-pk="<?php echo $row['book_id']; ?>" id="username"><?php echo $row['book_name']; ?></a>
    <br>
    <?php } ?>
    </div>
    </body>
    </html>

上面的代码共显示四个书名（因为db只有四个书名）。我能够单独编辑第一本书名，它也在db中编辑，剩下的书名不能编辑。

当我用萤火虫检查时，我得到以下代码

          <a id="username" class="editable editable-click" data-pk="1" href="#">Book Name 1</a>
          <br>
          <a id="username" data-pk="2" href="#">Book Name 2</a>
          <br>
          <a id="username" data-pk="3" href="#">Book Name 3</a>
          <br>
          <a id="username" data-pk="4" href="#">Book Name 4</a>

我知道，我错过了什么。

有人可以帮助我吗

谢谢， Kimz

Answer 1

您应该在可编辑元素上使用类而不是ID，如下所示：

 <a id="username" class="editable editable-click" data-pk="1" href="#">Book Name 1</a>
          <br>
          <a class="username" data-pk="2" href="#">Book Name 2</a>
          <br>
          <a class="username" data-pk="3" href="#">Book Name 3</a>
          <br>
          <a class="username" data-pk="4" href="#">Book Name 4</a>

这意味着你的JS现在应该是：

$('.username').editable({
        type: 'text',
        url: 'post.php',
        title: 'Enter username'
    });

内联编辑PHP MYSQL X-Editable

1 个答案: