Question

我的rails应用程序遇到了麻烦。我正在使用jquerymobile，当我想创建一个将屏幕划分为4个相等部分的登陆页面时，我的困难就开始了。如果您访问www.kiwilive.com，您会看到我的意思。

以下是我重新创建问题的方法。

访问www.kiwilive.com - 一切都应该看起来不错。这是我的tempusers控制器的“新”动作。窗口的大小使用以下javascript

$(document).on('pageshow', function (event, ui) { 
windowHeight = $(window).height();
windowWidth = $(window).width();
divHeight = (windowHeight)/2; // heights of your header/footer
$('#splash_logo').css({width: "50%", height: divHeight+"px"});
$('#splash_speechBubble').css({width: "50%", height: divHeight+"px"});
$('#splash_mobileIcon').css({width: "50%", height: divHeight+"px"});
$('#splash_mailIcon').css({width: "50%", height: divHeight+"px"});
});

在输入框中输入'jeff'。

点击第二个按钮'开始我的猕猴桃'。

由于已经采用'jeff'关键字，控制器应该显示一条flash消息并通过此代码重定向到root_path（肯定会被调用）

flash[:alert] = "Your kiwi is already being used.  Please try a different word!"
redirect_to root_path and return

然而，重定向发生后，我无法重新运行javascript，因此窗口的大小变得混乱。

我的搜索显示我应该尝试使用JQM的'pageshow'事件。它仍然无法正常工作。此外，我的'script'标签似乎在我的page.html元素中，如我的application.html.erb文件中所示：

<body>
 <div data-role="page" id="mainpage" data-theme="b" data-url="<%= request.fullpath%>"> 
<% if flash.count > 0 %>
  <% flash.each do |key, value| %>
      <div class="alert alert-<%= key %>">
          <%= value %></div>
  <%end%>
<%else%>
<%end%>
    <%= yield %>
    <%= render 'layouts/footer' %> 
</div>
</body>

我没有想法，各种各样的搜索都没有发现任何东西。请帮忙！谢谢，杰夫

Answer 1

好的，我想我想出了自己的问题。看起来像JQueryMobile，根据ajax请求，只是在不删除上一页的情况下向DOM添加相同的页面。因此，您需要指定您将样式应用于活动页面上的元素，否则会混淆（即多个具有相同名称的div！）。我的代码通过替换

来工作

$('#splash_logo').css({width: "50%", height: divHeight+"px"});

与

$.mobile.activePage.find('#splash_logo')

我希望这有助于其他人。让我永远想通了。

JQueryMobile和Rails redirect_to不在页面内执行javascript

1 个答案: