如何在軌道中加載div來響應另一個div的點擊？

我對Rails（和web）編程非常陌生，所以我甚至不知道我應該爲此尋找什麼技術。如何在軌道中加載div來響應另一個div的點擊？

我已經下載並運行了Rails tutorial的前五章，但現在有一個非常簡單的請求。

在網頁的左側，我會有一張桌子。如果用戶點擊該表中的某個元素，我想讓頁面的右側顯示新的內容。

我已經有一個頁面來顯示錶，即：

<div class="center hero-unit"> 
    <div class="container"> 
    <h2>2012 Yearly Report</h2> 
    <div class="row-fluid"> 
     <div class="span12"> 
      <div class="span4"> 
      <table border="1"> 
      </table> 
      </div> 
      <div class="span6"> 
       <!-- load stuff here based on what someone clicks on in the table --> 
      </div> 
     </div> 
     </div> 
    </div> 
</div>

而且我使用bootstrap layouts顯示一切。我只是不明白如何根據'span4'中的用戶行爲來更改'span6'div的內容。

來源

2012-10-09 mmr

這是一個難以回答的問題。這實際上取決於你試圖展示什麼樣的數據以及你在尋找什麼樣的交互性。

你沒有真正提供關於你想要完成什麼的很多信息，但是如果我必須猜測，你試圖從你的數據庫加載數據並將它插入一個元素而不離開當前頁面。這就是AJAX的用途（你的教程在第11章中有所介紹）並涉及大量的JavaScript，這通常超出了Ruby等服務器端語言的範圍。幸運的是，Rails包含了幫助器，可以輕鬆地將AJAX功能包含到Web應用程序中，而無需編寫大量JavaScript（儘管您必須編寫一些JavaScript）。

作爲一個例子，假設你的表有一個文章列表，並且你想在一個div中點擊一個鏈接時顯示文章的內容。

首先鏈接：

<%= link_to article.name, article_url(article), :remote => true %>

遠程選項告訴Rails，它是一個AJAX的鏈接。

接下來，您需要爲您的文章的顯示操作呈現一個javascript模板。你將它命名爲show.js.erb。

假設你想要的數據被加載到這個樣子的股利，

<div id='article-content'></div>

，你會希望你的show.js.erb包含以下內容：

$('#article-content').html("<%=javascript_escape @article.content %>");

這個JavaScript（帶嵌入紅寶石）代碼將在單擊其中一個遠程鏈接時進行評估，並將用文章內容替換div的內容。

有大量的資源在線給你更多的信息。它看起來像railscasts就在一週前剛剛發佈了episode on this topic。它需要訂閱才能查看，但非常值得（尤其是如果你剛剛開始）。

來源

2012-10-10 00:31:04

完美，這正是我要找的。我知道我很寬泛，但我不知道如何去做我想做的事。 – mmr

如何在軌道中加載div來響應另一個div的點擊？

回答

相關問題