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

});