Jquery Mockjax X-editable

Question

I am trying to use X-editable select2 to allow users to insert tags under images. I have got it to create the tags, you can click and box pops up to edit. It will also append the new tag to the page. But, the problem is, it will not fire the mockjax/ajax call at all.

I have included the mockjax.js file in my header, jquery file is linked. I do not get any response in my browser console. I have tested mockjax on other parts of my site and they all fire correctly, just this one doesn't seem to work.

If I use something like this it works and sends the data to the console:

Working HTML code:

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

Working jQuery code:

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

Non-working 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 Found solution, here it is.

$.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'
                });

});