在 X-Editable 中通过 Ajax 提交数据

Question

我正在尝试使用 X-Editable 通过 Ajax 提交数据，但在使用运行在 url 参数中定义的 php 脚本时遇到了问题。实际上，我从工作中得到了基本的例子：

Html:

<a href="#" id="username" data-type="text" data-pk="1" data-name="username" data-original-title="Enter username" class="editable">superuser123</a>

Js:

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

这是有效的（post.php 已执行）。但现在我想要更多可编辑的字段，并在单击按钮时运行它们。这是我的 html（我正在使用 Smarty）：

{foreach from=$categories key="category_key" item="category_item"}
<tr>
    <th scope="row">{$category_key + 1}</th>
    <td>
        <span  id="edit-button-{$category_key + 1}" data-pk="1" data-original-title="Edit category name"  data-toggle="#edit">
            {$category_item["name"]}
        </span>
        <button  class="btn edit"><span class="glyphicon glyphicon-pencil"></span></button>
    <td>0</td>
</tr>
{/foreach}

和相关Javascript:

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

    $('.edit').click(function(e){    
        e.stopPropagation();
        var button = $(this).prev('span').attr('id');

        $('#'+button).editable('toggle',{
            url: 'post.php',
            type: 'text',
            pk: 1,
            name: button,
            title: 'Edit category'                   
        });  
    });
});

问题在于，这会按预期创建可编辑字段，但不会调用 post.php 脚本（与第一个示例不同）。我做错了什么？

Answer 1

我已经通过执行以下操作解决了这个问题：

$('#' + button).editable({
    url: 'post.php',
    type: 'text',
    name: button,
    title: 'Edit category',
    ajaxOptions: {
        type: 'post'
    },
    //  success: function(data) {
    //   alert(data);
    // }, 
});

在 X-Editable 中通过 Ajax 提交数据

Submitting data via Ajax in X-Editable

html

php

ajax

jquery

x-editable