什么是使用AJAX在Rails中提交动态表单的最佳方式?

时间:2015-04-03 20:38:14

标签: javascript jquery ruby-on-rails ajax forms

在我的应用程序中,我正在管理包含许多变量的许多工作流程。 - 每个变量都有自己的值。 - 每个工作流程都与一个或多个变量相关联。

我有一个工作流程配置页面,用户将在其中选择工作流程,然后显示其相关变量以输入值。我遇到的问题是提出从用户保存表单上的条目的最佳方法。通常我会对/ variables /:id / update之类的东西进行ajax调用,但在这种情况下,我想在按下保存按钮的同时更新多个变量。我的想法是在变量控制器中创建一个自定义方法来处理这个问题,但在那次尝试中我得到一个关于无法验证CSRF令牌真实性的错误。

我非常感谢能得到的任何帮助。我觉得有可能有​​更好的方法来做到这一点,但我有点绿,只是不知道。有人有建议吗?

customize.html.erb中的My Form如下所示:

<div class="col-md-10" style="background-color:yellow; height: 216px; ">
    <div class="h3">Required ContextDataDef Values:</div>
      <div class="workflow_variables">           
          <div id="placeholder"></div>                             
    </div>
</div>

我的Javascript看起来像:

  $(document).on('click', '.list-group .workflow-item', function() {
    var listGroupItem$ = $(this).find('.list-group-item');
    var listGroupItemName = listGroupItem$.text();

    var workflowId$ = $(this).find('.workflow-id-string');
    var workflowIdText = workflowId$.text();


    $.getJSON('/workflows/'+ workflowIdText + '/details', function(foundFlow) {
      console.log(foundFlow);

    var flowName = foundFlow['name'];
    var flowDescrip = foundFlow['description'];

    $('#flowName').val(flowName);
    $('#flowDescrip').val(flowDescrip);
    });


    $.getJSON('/workflows/'+ workflowIdText + '/getFlowVariables', function(foundVars) {
    console.log(foundVars);

    var output="";
    for (var i in foundVars) {
        output+=" <form class='form-inline' id='variableValuesForm' data-remote='true'>" +  "<label for='@variable' style='margin-right: 5px; margin-top: 5px;'>" + foundVars[i].name + ":</label>" + "<input type='text' style='width: 170px; margin-top: 5px;' class='text small' name=" + foundVars[i].name + " id=" + foundVars[i].name + " value=" + foundVars[i].value + ">" + "<input type='text' style='width: 20px; margin-top: 5px;' class='text small' name='varID' id='varID' value=" + foundVars[i].id + ">" + "<button>Save</button>" + "</form>";
    }
    output+="";

    document.getElementById("placeholder").innerHTML=output;


    });


  });

----更新---- 根据评论,我已更新上述信息:

所以当我添加data-remote = true时,我最终得到的是这个

 Started GET "/clients/4/customize?&rbYouTubeUsername=MyUser&varID=29" 

这很好,但是我真的想调用一种不同于自定义的方法。我想得到的是:

 Started GET "/clients/4/updateVariable?&rbYouTubeUsername=MyUser&varID=29"

或者在一个完美的世界里,我会得到这个:

 Started GET "/variable/29/update?&rbYouTubeUsername=MyUser"

1 个答案:

答案 0 :(得分:0)

我缺少的关键元素是清楚地理解添加data-remote ='true'参数以及动作参数,因此我可以控制将表单数据发送到控制器的方法。一旦我将这两个元素添加到表单中,这一切都有意义。

 data-remote='true' action='update_variable'

现在结果是

 Started GET "/clients/4/update_variable?rbYouTubeUsername=AnotherNewVal&varID=29"