與西納特拉/ Haml的

通過Haml佈局文件生成以下輸出和index.haml jQuery的身體負荷內Sinatra與西納特拉/ Haml的

<!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根/' but if it is an AJAX call, my code at/checks for it and theoretically should only replace what's in body`，但它取代了整個文檔。

這裏是我的Sinatra & Haml Ruby代碼

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

來源

2011-11-22 Johnny Klassy

我不知道什麼是「替換整個文檔」。我注意到你正在使用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的破碎。

另一方面，您不需要使用jQuery load函數進行XHR請求。請看看這個：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機制。

來源

2011-11-23 15:17:54 miaout17

通過「替換整個文檔」，我的意思是當調用jQuery方法時，上面的整個HTML輸出被替換爲'some text'，沒有'html'，'head'，甚至是'script'代碼。其實我沒有設置jQuery Mobile'div's，所以它不是你描述的問題。 –

你使用什麼瀏覽器？你是如何觀察DOM變化的？通過Chrome元素檢查器或Firebug？即使你沒有設置jQuery Mobile div，它也會自動修改你的DOM結構，只要你加載jQuery的移動javascript。 – miaout17

與西納特拉/ Haml的

回答

相關問題