Javascript和Ajax調用

我有幾個關於在ajax調用後加載javascript的問題。Javascript和Ajax調用

因此，我在rails上使用ruby，並通過ajax調用加載了不同的頁面（我這樣做是因爲我有一個音頻播放器，我希望在頁面重新加載時繼續播放）。

問題是，當我用ajax更改頁面時，javascript不會重新加載（或工作）在新頁面上。

例如，我有一個網格系統，它根據javascript的寬度設置網格圖像的高度。除非我重新加載頁面，否則腳本不起作用，或者我將腳本放在html文件底部的腳本標記中。

有什麼方法可以重新加載JavaScript？我試過location.reload（），但只是刷新頁面，並擊敗了整個目的。謝謝！

下面是一個例子：

show.js.erb

$('#results').html("<%= escape_javascript(render partial: 'songs/showcard', locals: { song: @song }) %>");

songs_controller

def show 
    respond_to do |format| 
     format.js 
     format.html 
    end 
    end

鏈接顯示頁

<%= link_to song, remote: true do %><%= song.title %><% end %>

這裏是cardSize功能我正在加載一個文件名爲cardSize.js

$(document).ready(function cardSize() { 
    var cardWidth = $('.card-image').width(); 
    $('.card-image').css({ 
    'height': cardWidth + 'px' 
    }); 
});

來源

2016-03-20 Matt Thomas

在UJS文件show.js.erb你需要調用控制視圖/電網的全球職能。

例如，如果用於控制高度等全局法是implement_grid()，那麼，該文件應該是這樣的：

$('#results').html("<%= escape_javascript(render partial: 'songs/showcard', locals: { song: @song }) %>"); 
implement_grid();

項目添加到DOM動態不一定觸發任何行動，除非您指定他們。您可以查看綁定的監聽器，修改div/table（網格）上的html，然後調用您正在查找的高度更改，如果您寧願將代碼保留在UJS文件之外。

同樣，$('#results')可以大大縮短：

$('#results').html("<%= j render 'songs/showcard', song: @song %>");

來源

2016-03-20 00:53:33

太棒了d_ethier。我應該想到這一點。謝謝你指出！並感謝你縮短的代碼。我的文件現在看起來很乾淨！ –

您所遇到的問題似乎與turbolinks。 Turbolinks將刷新/更改文檔標記<body>內的內容，而不是文檔標記<head>中的腳本和樣式表，這是Rails加載所有自定義書寫的JavaScript的地方。

那麼，爲什麼當您將JavaScript粘貼到文件底部的<script>標記中時它會工作？因爲當您這樣做時，<script>標記現在是您的文檔的<body>標記內的。因此，當您更改頁面時，腳本會全新加載，並且可以將事件處理程序正確綁定到頁面上的DOM元素。

那麼它是如何才能起作用，當你完全重新加載頁面？因爲你有你的jquery包裹在$(document).ready(...)。當您手動刷新整個頁面時，turbolink也會被完全刷新並重新載入到DOM中，因此當您處於那個特定頁面時，您的$(document).ready(...)處理程序將正確綁定。但是，當您更改頁面並更改內容時，文檔仍然在技術上已準備就緒，並且不會綁定到新頁面，因此它不會在其內部執行代碼。爲什麼？由於渦輪鏈接的工作原理，整個頁面在技術上不會重新加載，只有<body>標籤中的內容（$(document).ready(...)調用中的代碼）看起來像動態生成的內容，它無法與之綁定。

那有什麼解決辦法？

這可能會也可能不會要求使用jquery turbolinks gem。這將允許您保持turbolinks並且每次更換頁面時都會撥打電話$(document).ready(...)。

來源

2016-03-20 04:17:25

Javascript和Ajax調用

回答

相關問題