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

时间:2021-11-29 21:17:03

I am trying to submit data via Ajax using X-Editable and having trouble with running the php script defined in url parameter. Actually, I got basic example from working:

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

Html:

HTML:

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

Js:

JS:

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

And this is working (post.php is executed). But now I want to have more editable fields and to run them on button click. This is my html (I am using Smarty):

这是有效的(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}

And related Javascript:

和相关的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'                   
        });  
    });
});

The thing is that this creates editable fields as it should, but it doesn't call post.php script (unlike in the first example). What I am doing wrong?

问题是,这会创建可编辑的字段,但它不会调用post.php脚本(与第一个示例不同)。我做错了什么?

1 个解决方案

#1


2  

I have solved it by doing next:

我通过下一步解决了这个问题:

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

#1


2  

I have solved it by doing next:

我通过下一步解决了这个问题:

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