Metasearch - 按下复选框时有关 Jquery ajax 请求的帮助答案

【问题标题】：Metasearch - Help with Jquery ajax request when checkbox is pressedMetasearch - 按下复选框时有关 Jquery ajax 请求的帮助
【发布时间】：2011-08-01 12:01:11
【问题描述】：

当复选框按下真或假时，我想发出一个 Jquery ajax 请求。

我的表格：

<form method="get" action="/" accept-charset="UTF-8"><div style="margin: 0pt; padding: 0pt; display: inline;"><input name="utf8" value="✓" type="hidden"></div>        
    <div class="menuitem">
    <label for="search_company1">company1</label>
    <input name="search[company1_is_true]" value="0" type="hidden"><input id="search_company1_is_true" name="search[company1_is_true]" value="1" type="checkbox">
    </div>
    <div class="menuitem">
    <label for="search_company2">company2</label>
    <input name="search[company2_is_true]" value="0" type="hidden"><input id="search_company2_is_true" name="search[company2_is_true]" value="1" type="checkbox">
    </div>
    <div class="menuitem">
    <label for="search_company3">company3</label>
    <input name="search[company3_is_true]" value="0" type="hidden"><input id="search_company3_is_true" name="search[company3_is_true]" value="1" type="checkbox">
    </div>
<input id="search_submit" name="commit" value="Create Search" type="submit">
</form>

【问题讨论】：

您希望在提交时调用还是在选中复选框时调用？
您可能应该将您遇到问题的确切位置放在哪里。单击复选框时是否触发功能？它是在做一个ajax查询吗？它是否处理从该查询返回的任何内容？你根本不知道javascript是如何工作的吗？提出一个你迄今为止尝试过的问题而不是问一个非常笼统的问题是一种很好的做法。

标签： javascript jquery ruby ruby-on-rails-3 meta-search

【解决方案1】：

这会在 menuitem 类中的任何复选框更改为 true 或 false 后启动自定义 doAjaxRequest 函数。

$('.menuitem input:checkbox').change(function(){
  doAjaxRequest();
})

回答第一个评论问题：

$('.menuitem input:checkbox').change(function(){
      $('form').submit();
})

虽然您可能想为您的表单定义一些 id 并使用它而不只是表单选择器：$('#formId')

编辑我刚刚对您有问题的代码和我的第二个答案进行了 jsfiddle，它似乎有效： http://jsfiddle.net/dUPmg/

【讨论】：

输入复选框被按下时如何按下提交按钮？
@rails，请参阅 jAndys 在他的回答中的第二条评论
@rails 您的页面中可能还有其他一些错误。使用 jsfiddle 查看我的编辑。它有效。
它工作我将 Jquery 从外部 javascript 文件移动到我的布局文件的 head 部分。似乎javascript在外部文件中的问题'

【解决方案2】：

应该是一个相当琐碎的任务：

$('form input:checkbox').change(function() { 
    // $.ajax({});
    $('form').submit();
});

这会将更改事件处理程序绑定到每个复选框元素。当这些元素的数量增加时，您应该改为委托更改事件。

$('form').delegate('input:checkbox', 'change', function( e ) {
    switch( e.id ) { 
        case 'search_company1_is_true':
             $.ajax({});
             break;
        case 'search_company2_is_true':
             $.ajax({});
             break;
        // and so forth
    }
});

【讨论】：

不是为每个复选框定义一个 ajax 调用，而是不可能在复选框更改时按下提交按钮
@Railsbeginner：确实如此。你必须调用.submit() 来执行它。我在第一个示例中添加了这一点。但是，您应该比我更精确。只需查询'form' 就会触发整个页面上所有表单的提交。
@Railsbeginner：好吧，你的action 属性无论如何都是空的。即使您手动单击该提交按钮（如果有）也不会有请求。
将复选框设置为 true 并手动按下提交按钮时会发出请求
@Railsbeginner：好吧，我可能错了。但是你期望得到什么？提出了一个请求，但它基本上只是重新加载同一个站点。我猜 jQuery 会避免执行，因为该操作属性中没有有意义的 URI。

【解决方案3】：

$('form input:checkbox').bind('click change', function(){
    $.ajax({
      url: "/test.html",
      success: function(){
          $(this).addClass("done");
      }
    });
});

【讨论】：

输入复选框不是直接子级。