带有 Sinatra / Haml 的 jQuery 身体负载答案

【问题标题】：jQuery body load with Sinatra / Haml带有 Sinatra / Haml 的 jQuery 身体负载
【发布时间】：2011-11-23 23:17:54
【问题描述】：

以下输出是通过Haml 布局文件和index.haml 从Sinatra 中生成的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Meeting</title>
    <meta content='width=device-width, initial-scale=1' name='viewport' />
    <script src='http://code.jquery.com/jquery-1.6.4.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js'></script>
    <link href='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css' rel='stylesheet' type='text/css' />
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script>
    <script type='text/javascript'>
      //<![CDATA[
        $(document).ready(function() {
          setTimeout(getUpdate,10000);
          function getUpdate(){
            $("body").load("/");
          }
        })
      //]]>
    </script>
  </head>
  <body>Some text</body>
</html>

我想要完成的是将body 替换为对root /' but if it is an AJAX call, my code at/checks for it and theoretically should only replace what's inbody 的调用，但它会替换整个文档。

这是我的 Sinatra 和 Haml Ruby 代码

get '/' do
  ... set some instance vars to be displayed in index.haml ...
  haml :index, :layout => (request.xhr? ? false : :layout)
end

【问题讨论】：

标签： jquery sinatra

【解决方案1】：

我不确定什么是“替换整个文档”。我注意到您正在使用 jQuery Mobile 库。如果症状是样式或布局消失，我认为问题是 jQuery Mobile。

jQuery Mobile 会自动修改你的 DOM 结构。如果您尝试在浏览器中检查 DOM 元素，您将看到如下内容：

<div data-role="page" data-url="/test.html" tabindex="0" 
  class="ui-page ui-body-c ui-page-active" style="min-height: 737px; ">
  Some text
</div>

如果替换整个body 元素，肯定会让jQuery Mobile 崩溃。

另一方面，对于 XHR 请求，您不需要使用 jQuery load 函数。请看这个：http://jquerymobile.com/demos/1.0/docs/pages/page-links.html：

要启用动画页面转换，所有指向外部页面（例如 products.html）的链接都将通过 Ajax 加载。为了不引人注意地做到这一点，框架解析链接的 href 以制定 Ajax 请求 (Hijax) 并显示加载微调器。这一切都由 jQuery Mobile 自动完成。

如果你使用 jQuery Mobile，你应该遵循 jQuery Mobile 的方式。否则，您可以删除 jQuery Mobile 并使用您自己的 XHR 机制。

【讨论】：

“替换整个文档”是指调用jQuery方法时，上面的整个HTML输出被some text替换，没有html，head，甚至没有@ 987654328@代码。实际上我还没有设置jQuery Mobile divs，所以这不是你描述的问题。
你用什么浏览器？你是如何观察 DOM 变化的？通过 Chrome 元素检查器或 Firebug？即使您没有设置 jQuery Mobile div，只要您加载 jQuery Mobile javascript，它就会自动修改您的 DOM 结构。