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