XMLHttpRequest / AJAX 请求在 twig for 循环中发送
XMLHttpRequest / AJAX request sending in a twig for loop
我正在尝试使用 PHP 开发一个简单的任务列表。我有一个任务列表,每个循环都使用 twig http://twig.sensiolabs.org/ 。如果任务标记为已完成,则选中该复选框。我的问题是如何将脚本附加到每个复选框以使用不同的参数进行 ajax 调用,以便服务器知道正在检查哪个任务?
<table>
<thead>
<tr>
<th>Task</th>
<th>Valmis</th>
</tr>
</thead>
<tbody>
{% for task in tasks %}
<tr>
<td>{{task.description}}</td>
<td><input type="checkbox" {{ task.done ? "checked" : "" }} ></td>
</tr>
{% endfor %}
</tbody>
</table>
我添加了一个 class 以启用对表单的 ajax 调用,并通过 POST 将其发送到服务器并管理响应,如下例所示:
Javascript代码:
$(document).ready(function() {
$('.lista-proroghe-item').each(function(){
$(this).find('.perform-ajax-request-button').click(function(){
var form = $(this).closest("form"), action = form.attr('action');
var currentButton = $(this);
var currentMessage = $(this).next('.proroga-messaggio');
$(this).attr('disabled', 'disabled');
$(this).html('Processing...');
$.ajax({
url: action,
type: "POST",
data: form.serialize(),
success: function(data) {
// console.log(data);
$(currentButton).hide();
$(currentMessage).html('<span>'+data.description+'<br>'+data.extendedMessage+'</span>');
}
});
e.preventDefault();
return false;
})
})
});
树枝代码:
{% for extension in assignation.contract.contractModificationDurations %}
<li class="lista-proroghe-item">
<form action="{{ path('contractExtension', {'idContractModification' : extension.idContractModification, 'userid':user.id }) }}">
Element
<button class="button small perform-ajax-request-button right"><span class="refresh">to task</span></button>
<div class="proroga-messaggio"></div>
</form>
</li>
{% else %}
<li>
Nessuna proroga trovata
</li>
{% endfor %}
希望对您有所帮助。
我正在尝试使用 PHP 开发一个简单的任务列表。我有一个任务列表,每个循环都使用 twig http://twig.sensiolabs.org/ 。如果任务标记为已完成,则选中该复选框。我的问题是如何将脚本附加到每个复选框以使用不同的参数进行 ajax 调用,以便服务器知道正在检查哪个任务?
<table>
<thead>
<tr>
<th>Task</th>
<th>Valmis</th>
</tr>
</thead>
<tbody>
{% for task in tasks %}
<tr>
<td>{{task.description}}</td>
<td><input type="checkbox" {{ task.done ? "checked" : "" }} ></td>
</tr>
{% endfor %}
</tbody>
</table>
我添加了一个 class 以启用对表单的 ajax 调用,并通过 POST 将其发送到服务器并管理响应,如下例所示:
Javascript代码:
$(document).ready(function() {
$('.lista-proroghe-item').each(function(){
$(this).find('.perform-ajax-request-button').click(function(){
var form = $(this).closest("form"), action = form.attr('action');
var currentButton = $(this);
var currentMessage = $(this).next('.proroga-messaggio');
$(this).attr('disabled', 'disabled');
$(this).html('Processing...');
$.ajax({
url: action,
type: "POST",
data: form.serialize(),
success: function(data) {
// console.log(data);
$(currentButton).hide();
$(currentMessage).html('<span>'+data.description+'<br>'+data.extendedMessage+'</span>');
}
});
e.preventDefault();
return false;
})
})
});
树枝代码:
{% for extension in assignation.contract.contractModificationDurations %}
<li class="lista-proroghe-item">
<form action="{{ path('contractExtension', {'idContractModification' : extension.idContractModification, 'userid':user.id }) }}">
Element
<button class="button small perform-ajax-request-button right"><span class="refresh">to task</span></button>
<div class="proroga-messaggio"></div>
</form>
</li>
{% else %}
<li>
Nessuna proroga trovata
</li>
{% endfor %}
希望对您有所帮助。