Таким образом, проблема заключается в следующем: когда вы нажимаете на эти ссылки (сохранить или удалить), вы фактически не сообщаете серверу, что именно вы обновляете.Ссылка не имеет возможности узнать, сами по себе, какие поля она отправляет, обновлены ли они или что-то еще.Вы делаете на странице что-то динамическое , и в этом случае это будет означать создание сценариев.
Это на порядок сложнее, чем то, что вы сделали с переключателем, поэтомубудьте осторожны - вы только что запрыгнули в глубокий конец.Я начал строить что-то, что покажет вам, как это можно сделать , но это ни в коем случае не является полным или точным.Мы не знаем, что на самом деле делает ваш php с помощью снимка, который вы нам дали.
Вот блок кода, который я построил просто в качестве прототипа.Я опишу это более подробно ниже:
$(function(){
let updateTeamUrl = "SET_THIS_TO_THE_UPDATE_URL";
// We'll also save these as references to all the action buttons.
let actionItems = {
editBtn: $(".btnEdit"),
saveBtn: $(".save-btn"),
deleteBtn: $(".btnDelete")
}
$(".editshow").hide();
// Here we assign the actions to the various buttons/anchors
actionItems.editBtn.on("click", toggleEdit);
actionItems.saveBtn.on("click", saveTeam);
actionItems.deleteBtn.on("click", confirmDelete)
// Below are the actions we assign above, or support functions for them
/**
* toggleEdit() is triggered when the "Edit" button is clicked. This
* hides the team name text element, and displays the editable field.
**/
function toggleEdit(event){
let teamContainer = $(this).closest("tr");
teamContainer.find(".editshow").toggle();
teamContainer.find(".editable").toggle();
}
/**
* saveTeam() crawls up the DOM tree to the closest "tr" node, and gets
* the custom "data-teamid" attribute there. Using that, we can create
* a JSON object that we will send to the backend.
**/
function saveTeam(event){
event.preventDefault();
let clickedEl = $(this),
teamContainer = clickedEl.closest("tr"),
teamNameEl = teamContainer.find(".editshow");
let payloadToSend = {
// We need a mechanism to identify what team we're updating
teamId: teamContainer.data("teamid"),
// This will eventually hold any and all updates.
updates: {
/* We'll create this empty, and fill it as we need.*/
}
};
// I created a data attribute on the input, "data-original", and
// set it to the same value as the input. By comparing these, we
// can see if an input has, in fact, been updated.
if(teamNameEl.data("original") !== teamNameEl.val() ){
/**
* The only thing we are updating in this pass is the team name.
* So we can update our "payload", then simply send the post request.
**/
payloadToSend.updates.name = teamNameEl.val();
/**
* When we POST, we need a URL and a string we'll send.
* What we'll do is take the payload, and run it through
* JSON.stringify() to convert it to a string.
* Then, when we call $.post(), we can also add a .done() and
* .fail() handler. These will run when the save is complete,
* or when it fails.
*
**/
let postRequest = $.post(UpdateTeamUrl, JSON.stringify(payloadToSend) )
.done(function(returnedData){
console.log("Update succeeded: "+returnedData)
})
.fail(function(error){
console.error("Update had an error: "+error)
})
.always(function(){
teamContainer.find(".editshow").toggle();
teamContainer.find("editable").toggle();
});
}
} // end saveTeam();
function confirmDelete(event){
event.preventDefault();
let clickedEl = $(this),
teamContainer = clickedEl.closest("tr"),
teamId = teamContainer.data("teamid"),
teamName = teamContainer.find("[name='edit_teams']").val();
if(confirm("are you sure you want to delete the team "+teamId+": "+teamName+"?") ){
console.log("Deleting!")
} else {
console.log("false alarm.")
}
}
})
Кроме того, HTML для поддержки этого должен немного измениться: <tr> получает атрибут данных data-teamid, <input> получаетАтрибут данных data-original, а элемент формы, который обернул ввод, был удален.Вот HTML-код (без PHP для его создания):
<tr data-teamid="1">
<td>
<a href='#' class='editable' style='margin-left: 2px;'>Team Name</a>: <input type='text' class='editshow form-control col-sm-3' aria-label='Sizing example input' aria-describedby='inputGroup-sizing-sm' name='edit_teams' data-original='Team Name' value='Team Name'> <a href='teams.php?save_tid={$tid}' style='margin-left: 2px; margin-top:3px;' class='btn btn-success btn-sm editshow save-btn'>Save</a>
</td>
<td>
<button class='btn btn-primary btn-sm btnEdit team-1'>Edit</button> | <a href='#' class='btn btn-danger btn-sm btnDelete'>Delete</a>
</td>
</tr>
Как я уже говорил, это становится довольно сложным.
Сначала я переместил все ваши "действия" вобъект JavaScript.Если я добавлю другие действия, я просто обновлю их там.Затем я присоединяю слушателей, используя .on(...) для каждого действия, которое я хочу обработать: редактировать, сохранять и удалять.Для каждого из них я написал функцию, которая будет обрабатывать само действие: toggleEdit(...) для редактирования, saveTeam(...) для сохранения и confirmDelete для удаления.Каждое действие является автономным, что делает редактирование немного проще.
* * * * * * * * * * * * * * * * * * * * * * - это почти то же, что и раньше.Я не думаю, что я сильно изменился в этом, так что это должно выглядеть довольно знакомо.
saveTeam(...) - это то, о чем вы сейчас спрашиваете, и это сложный бит.Сначала мы поднимаемся вверх по дереву DOM до <tr> и используем .data("teamid"), чтобы получить идентификатор команды, которую мы редактируем.Затем мы начинаем создавать объект JavaScript, который я назвал payloadToSend.В этом у нас есть атрибут teamId и вложенный объект updates.Затем мы проверяем, был ли обновлен ввод текста (сравнивая его значение с добавленным мною data-original атрибутом).Если это не изменилось, нам не нужно обновлять.Если имеет , то мы обновляем payloadToSend, добавляя name к объекту payloadToSend.updates, и мы используем $.post(...) для фактической отправки запроса POST.$ .post () принимает URL и некоторые данные.Мы отправим объект payloadToSend в качестве этих данных, которые должны отображаться в php как $_REQUEST или $_POST.Кроме того, $.post(...) включает в себя два условных обратных вызова, .done(...) и .fail(...) и один «абсолютный» обратный вызов, .always(...)
.done(...) выполняется, когда запрос на стороне сервера возвращается суспешное завершение, и .fail(...) обрабатывает внутренний сбой с сообщением об ошибке.В любом случае, однако, мы .always(...) хотим скрыть редактируемое и снова показать имя команды.
На этом этапе действие confirmDelete не делает ничего, кроме как получить тот же teamId, ивсплывающее диалоговое окно подтверждения.Действие удаления - это нечто большее, и это выходит за рамки вашего исходного вопроса.