Question

以下输出是通过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>

我要完成的是通过调用root body / /' but if it is an AJAX call, my code at body来替换checks for it and theoretically should only replace what's in，而是替换整个文档。

这是我的Sinatra＆amp; Haml Ruby代码

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

Answer 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机制。

使用Sinatra / Haml的jQuery体载

1 个答案: