Jquery Mockjax X-editable

Question

我正在尝试使用X-editable select2来允许用户在图像下插入标签。我有它来创建标签，你可以点击并弹出框进行编辑。它还会将新标记附加到页面。但是，问题是，它根本不会触发mockjax / ajax调用。

我在我的标题中包含了mockjax.js文件，jquery文件被链接。我的浏览器控制台中没有得到任何响应。我已经在我的网站的其他部分测试了mockjax，它们都正常启动，只是这个似乎不起作用。

如果我使用类似的东西，它可以工作并将数据发送到控制台：

使用HTML代码：

<p class="text-center itemName">click to edit this text</p>

使用jQuery代码：

$('.itemName').editable({
                                        type: 'text',
                                          pk: 1,
                                         url: 'update.php',
                                     send: 'always'
                                    });

非工作jQuery：

$.fn.editable.defaults.mode = 'popover';

$('.tags').editable({
    placement: 'right',
    select2: {
        tags: ['cake', 'cookies'],
        tokenSeparators: [",", " "]
    },
    display: function(value) {
        $.each(value,function(i){
           // value[i] needs to have its HTML stripped, as every time it's read, it contains
           // the HTML markup. If we don't strip it first, markup will recursively be added
           // every time we open the edit widget and submit new values.
           value[i] = "<span class='label'>" + $('<p>' + value[i] + '</p>').text() + "</span>";
        });
        $(this).html(value.join(" "));
    }
});

$('.tags').on('shown', function() {
    var editable = $(this).data('editable');
    value = editable.value
    $.each(value,function(i){
       value[i] = $('<p>' + value[i] + '</p>').text()
    });
});

$('[id^="tags-edit-"]').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('#' + $(this).data('editable') ).editable('toggle');
});

$.mockjax({
    type: 'text',
                                              pk: 1,
                                             url: 'update.php',
                                         send: 'always'
});

update.php：

<?php
    /*
    Script for update record from X-editable.
    */

    //delay (for debug only)
    sleep(1); 

    /*
    You will get 'pk', 'name' and 'value' in $_POST array.
    */
    $pk = $_POST['pk'];
    $name = $_POST['name'];
    $value = $_POST['value'];

    /*
     Check submitted value
    */
    if(!empty($value)) {
        /*
          If value is correct you process it (for example, save to db).
          In case of success your script should not return anything, standard HTTP response '200 OK' is enough.

          for example:
          $result = mysql_query('update users set '.mysql_escape_string($name).'="'.mysql_escape_string($value).'" where user_id = "'.mysql_escape_string($pk).'"');
        */

        //here, for debug reason we just return dump of $_POST, you will see result in browser console
        print_r($_POST);


    } else {
        /* 
        In case of incorrect value or error you should return HTTP status != 200. 
        Response body will be shown as error message in editable form.
        */

        //header('HTTP 400 Bad Request', true, 400);
        echo "This field is required!";
    }

?>

Answer 1

OP找到解决方案，就在这里。

$.fn.editable.defaults.mode = 'popover';

$('.tags').editable({

    placement: 'top',
    select2: {
        tags: ['cookies', 'pie','cake'],
        tokenSeparators: [","]
    },
    display: function(value) {
        $.each(value,function(i){
           value[i] = "<span class='tagBox'>" + $('<p>' + value[i] + '</p>').text() + "</span>";
        });
        $(this).html(value.join(" "));
    }
});

$('.tags').on('shown', function() {
    var editable = $(this).data('editable');
    value = editable.value
    $.each(value,function(i){
       value[i] = $('<p>' + value[i] + '</p>').text()
    });
});

$("#content").on("click", '[id^="tags-edit-"]', function(e) {

    e.stopPropagation();
    e.preventDefault();

    $('#' + $(this).data('editable') ).editable('toggle');
});


$('.tags').on('save', function(e, params) {
    var itemId = $(this).attr('data-pk');
    var dataString = 'value='+ params.newValue +'&id='+ itemId;

            $.ajax({
            type: 'POST',
                        data: dataString,
                         url: 'update.php',
                        send: 'always'
                });

});