JQuery + x-editable: динамический URL-адрес ajax?
Я использую x-редактируемый для редактирования контента. В официальном документе говорится: «Откройте страницу и щелкните элемент. Введите новое значение и отправьте форму. Он отправит запрос ajax с новым значением в /post».
Это то, что я хотел бы сделать, однако мой URL-адрес динамический. Я хочу знать, как мне создать динамический URL-адрес?
Вот пользовательский интерфейс, показывающий содержимое и возможность редактирования:
Прямо сейчас, когда я просто ввожу http://localhost:5055/update/department?id=55&name=yoo в свой браузер, соответствующий контент в моем пользовательском интерфейсе будет обновлен. Проблема в том, что у всех данных разные идентификаторы и разные имена, поэтому URL-адрес будет динамическим /update/department?id=dynamicID&name=newvalue.
Как я могу сгенерировать динамический URL-адрес с помощью x-editable?
В настоящее время я добавляю data-url = "/update/department?id=${department.optString("departmentId")}&name = " в свой <a>, но не могу понять, как установить name=.
В моем файле js я пробовал:
$('.to-be-edited').editable({
toggle: 'manual',
//submit data without pk please set send option to "always".
//send: 'always',
url: '$(this).data("url") + newValue',
success: function(res, newValue) {
console.info(newValue)
}
})
И я получил ошибку:
POST http://localhost:8000/update/department?id=55&name= 405 (Method Not Allowed)
код для рендеринга таблицы
<c:if test = "${departments.length() > 0}">
<c:forEach var = "i" begin = "0" end = "${departments.length()-1}">
<c:set var = "department" value = "${departments.getJSONObject(i)}"/>
<tr>
<td><a href = "#"
class = "to-be-edited department-name" data-type = "text"
data-pk = "${department.optString("departmentId")}"
id = "${department.optString("departmentId")}"
data-url = "/update/department?id=${department.optString("departmentId")}&name = ">${department.optString("departmentName")}</a><i class = "fa fa-pencil-square-o fa-fw pencil-edit-name" aria-hidden = "true"></i></td>
<td> <a href = "#" class = "edit-name">Edit Name</a> </td>
</tr>
</c:forEach>
</c:if>
Ответы 1
Это то, чем я закончил.
Сначала я добавил object-type = "something" в тег <a>. Это важный атрибут, потому что другая страница будет использовать ту же функцию, поэтому url должен быть динамическим. Например, на странице отдела:
<a href = "#"
class = "to-be-edited department-name" data-type = "text"
data-pk = "${department.optString("departmentId")}"
id = "${department.optString("departmentId")}"
object-type = "department"
>
на странице продавца:
<a href = "#"
class = "to-be-edited vendor-name" data-type = "text"
data-pk = "$${vendor.optString("vendorId")}"
id = "$${vendor.optString("vendorId")}"
object-type = "vendor"
>
Затем в моем js я создаю функцию успеха, генерирую URL-адрес, затем пишу ajax внутри функции успеха
$('.to-be-edited').editable({
toggle: 'manual',
success: function(something, data) {
//generate dynamic url for ajax
let url = "/update/" + $(this).attr('object-type') + "?id = " + $(this).attr('id') + "&name = " + data;
$.ajax({
url: url,
//http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings
//communication successful with server, check the status
success: function ajaxSuccess(data, textStatus, jqXHR) {
let json = JSON.parse(data);
if (json["status"] === "success") {
//content will update on server side
console.info(data);
} else {
alert('Unable to update, try again later. ' + json["reason"]);
return;
}
},
//unable to communicate with server
error: function communicationError(jqXHR, textStatus, errorThrown) {
alert('Unable to update, try later. ' + errorThrown);
}
});
}
});