Ajax内联编辑mysql结果答案

【问题标题】：Ajax inline editing mysql resultsAjax内联编辑mysql结果
【发布时间】：2014-02-05 18:46:32
【问题描述】：

我从 MySQL 查询中获取行列表，其中显示了 用户名 列表，我需要能够使用 ajax 内联编辑它们，但是我正在使用这个脚本只能编辑结果中列出的第一个，请帮助！

我从 mysql 结果中得到这些，3 行带有用户名，我只能编辑内联第一个，而不能编辑另一个：

  <div>
    <span>Username1:</span>
    <a href="#" id="username" data-id2="101">user1</a>
  </div>


  <div>
    <span>Username2:</span>
    <a href="#" id="username" data-id2="102">user2</a>
  </div>


  <div>
    <span>Username3:</span>
    <a href="#" id="username" data-id2="103">user3</a>
  </div>

这是我的自定义 JS 脚本：

$(document).ready(function() {
    //toggle `popup` / `inline` mode
    $.fn.editable.defaults.mode = 'inline';     

    //make username editable
    $('#username').editable({

    //uncomment these lines to send data on server
        id: 'id',
        id2: 'id2',
        url: './ajax_editor.php'

    });
});
</script>

请记住，我需要能够从结果中单独编辑（内联）每个用户名

这是我正在使用的 JS 和 CSS 源代码：

  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>  

  <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script>

谢谢

【问题讨论】：

你使用id。切换到class，如果脚本工作正常，你应该没问题。

标签： java php jquery mysql inline

【解决方案1】：

使用class 而不是id

<div>
    <span>Username1:</span>
    <a href="#" class="username" data-id2="101">user1</a>
  </div>


  <div>
    <span>Username2:</span>
    <a href="#" class="username" data-id2="102">user2</a>
  </div>


  <div>
    <span>Username3:</span>
    <a href="#" class="username" data-id2="103">user3</a>
  </div>

并像这样通过 jquery 访问：

$(document).ready(function() {
    //toggle `popup` / `inline` mode
    $.fn.editable.defaults.mode = 'inline';     

    //make username editable
    $('.username').editable({

    //uncomment these lines to send data on server
        id: 'id',
        id2: 'id2',
        url: './ajax_editor.php'

    });
});
</script>

【讨论】：