1

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!";
    }

?>
4

1 に答える 1