0

我的 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”关键字，控制器应该显示一条 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”事件。它仍然不起作用。此外，我的“脚本”标签似乎确实在我的页面元素中，如下所示来自我的 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>

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

4

1 回答 1

0

好吧，我想我想出了自己的问题。看起来 JQueryMobile 在收到 ajax 请求时，只是不断地向 DOM 添加相同的页面，而不删除前一页。因此，您需要指定您正在对活动页面上的元素应用样式，否则会混淆（即多个具有相同名称的 div！）。我的代码通过替换来工作

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

和

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

我希望这对其他人有帮助。我花了很长时间才弄清楚。

于 2013-09-18T00:41:40.417 回答