2015-02-08 114 views
2

我试图用PHP开发一个简单的任务列表。我有一个使用树枝http://twig.sensiolabs.org/每个循环的任务列表。如果任务被标记为完成,则检查该复选框。我的问题是,如何将每个复选框附加到一个脚本,以便使用不同的参数进行ajax调用,以便服务器知道正在检查哪个任务?XMLHttpRequest/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> 
+0

你可以给每个任务添加一个id,并让它连接到输入。这样你就会知道哪个任务被点击了。 – Abhishek 2015-02-08 11:45:19

+0

Hi @MikkoÖversti您是否找到解决方案? – Matteo 2015-02-10 15:20:22

+0

谢谢Abhishek和@Matteo – 2015-02-13 08:42:14

回答

2

我添加了一个类实现的形式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 %} 

希望得到这个帮助。