0

我有一些 jQuery 函数和嵌套表单的视图：

...
#top part, in the initial form
<div class="checkboxOptions games show-tabs">
  <% @games.each do |game| %>
    <div class="show-tab">
      <div class="checkbox uncheckBoxed">
        <%= check_box_tag "", game.id, @tournament.game_ids.include?(game.id), :onclick => "toggleCheckboxImage(this, '');" %>
      </div>
      <img src="<%= game.logo_url.to_s %>" class="game-logo-label" />
    </div>
  <% end %>
</div> 
...
#'second part' of the form - but in the same view
<div class="tabs">
    <% @tournament.sub_tournaments.each do |sub| %>  
  <% end %>
</div>
...

当其中一个复选框被选中时，表单的第二部分通过 jQuery 打开，用户继续输入必要的信息——这一切都很好。

问题是，我需要在“第二部分”中调用的一些变量（@tournament.sub_tournaments作为主要示例 - 每个选择的游戏都变成了一个sub_tournament）取决于在“第一部分”中检查了哪些游戏表格。当页面加载时，@tournament.sub_tournaments构建，但只是一个空对象。页面加载成功，但在检查游戏后，我无法访问所需的信息。

单击复选框时，如何重新加载视图（或理想情况下，只是部分）？

很长一段时间以来，我一直被困在这个问题的迭代上，并取得了不同程度的（部分）成功——但最终我不知道如何重新加载，这才@tournament.sub_tournaments是真正让我受不了的。

4

2 回答 2

1

您需要使用onchange 事件！

jQuery(function() {
  jQuery('#somecheckbox').on('change', function(){
        location.reload();// Resend POST data
        window.location.href=window.location.href; //Doesnt resend POST data
    });
});

此外，如果您需要更新页面上的数据：

jQuery(function() {
  jQuery('#somecheckbox').on('change', function(){
        var _form = '<form id="_myform" action="/*currentURL*/" method="GET" style="display:none;"><input type="text" name="option123" value="'+jQuery(e.target).val()+'" /></form>';
        jQuery('body').append(_form);
        jQuery('#_myform').submit();
    });
});

然后通过 bakcend 或前端获取名为option123的 GET 参数并相应地修改您的页面。

希望这可以帮助！

于 2013-10-17T16:04:47.857 回答
0

在您的 application.js 文件中：

$(document).ready(function() {

  $('#checkbox-id').on('click', function() {

    location.reload();

  });

});

单击复选框时，这将刷新页面。（将 #checkbox-id 更改为您为该复选框提供的任何 id）

于 2013-10-17T15:56:37.453 回答