jQuery + PHP + MySQL: перетаскивание с двумя таблицами

Question

jQuery + PHP + MySQL: перетаскивание с двумя таблицами

к точке:

У меня есть две таблицы рядом друг с другом.
Один заполнен данными (в данном случае таблица заполнена именами всех людей, работающих в команде).
Другой пуст. Теперь я хочу перетащить имена (строки) в другую таблицу, и на капле, это вызывает вставить-запрос к базе данных.

Кроме того, имена в первой таблице, заполненной данными, всегда остаются неизменными (так как список имен никогда не меняется).

Итак, маленькая схема:

Таблица, заполненная данными, поступающими из базы данных (перетаскивание)
Пустой стол (выпадение)

Имя перетаскивается из первой таблицы во вторую, а при отбрасывании в базу данных выдается запрос на вставку. При обновлении страницы выброшенное имя все равно будет отображаться во второй таблице.

О, еще одна функция, которую необязательно следует реализовать: если я перетаскиваю имя из второй таблицы обратно в первую, имя должно исчезнуть (и, как таковое, удаляет запись из таблицы в базе данных). Перетаскивание должно использоваться в обоих направлениях.

Код у меня уже был, но как-то не работает:

            $(document).ready(function() {
var $tabs = $('#EmptyTable')
$("tbody.t_sortable").sortable({
connectWith: ".t_sortable",
items: "> tr:not(:first)",
appendTo: $tabs,
helper:"clone",
zIndex: 999990
}).disableSelection();

var $tab_items = $(".nav-tabs > li", $tabs).droppable({
accept: ".t_sortable tr",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
<?
mysql_query("INSERT INTO emptyTable_team (name) values (<datafromfirsttable>)");
?>
return false;
}
});
});

0

drag-and-drop jquery jquery-ui mysql php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы не можете вставить функции PHP в Javascript.

PHP — это язык сценариев, который сообщает вашему веб-серверу, как обрабатывать запросы, такие как обновление базы данных или рендеринг HTML. Но после обработки запроса скрипт PHP останавливается, все переменные выгружаются и т. Д.

То, что вы написали в PHP, говорит Apache, чтобы выполнить этот запрос один раз, пока страница загружается.

Что вы хотите сделать, это позвонить $ .ajax внутри функции капли. ajax-функция jQuery может отправлять данные в URL-адрес, после чего вы обрабатываете запрос, вставляя данные в базу данных.

Javascript:

$(document).ready(function() {
var $tabs = $('#EmptyTable');
$("tbody.t_sortable").sortable({
connectWith: ".t_sortable",
items: "> tr:not(:first)",
appendTo: $tabs,
helper:"clone",
zIndex: 999990
}).disableSelection();

var $tab_items = $(".nav-tabs > li", $tabs).droppable({
accept: ".t_sortable tr",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var rowData;
// looping through the cell of each row
for (var i = 0; i < $("td",this).length; i++) {
// Get the name of the column
// I don't know your HTML so I can't make a selector for this
var colName = $("selector-for-header-column").text();
// Using square brackets to access an object property by string variable,
// and selecting the text in this cell for the dropped row.
rowData[colName] = $("td",this).eq(i).text();
}
// Now we have an object whose property names are the table headers,
// and the data in each property is the text in each cell of the dropped row.
$.ajax({
type: "POST",
url: "/insertTeamMember.php",
data: rowData,
success: function (data) {
// Log the return from the ajax endpoint, this will help you debug!
console.log(data);
}
});
}
});
});

insertTeamMember.php:

<?PHP
$dbcO = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
$q = "INSERT INTO emptyTable_team (name) values ( ? )";
$stmt = $dbcO->stmt_init();
$stmt->prepare($q);
$stmt->bind_param('s', $_POST['name']);
$stmt->execute();
$stmt->close();
?>

Я использовал подготовленное заявление как простой способ предотвращения инъекций MySQL. Настоятельно рекомендуется никогда не вставлять пользовательский ввод непосредственно в строку запроса. Пользовательский ввод — это все данные, поступающие от клиента.

2