Rails，使用沒有jrails的jQuery

我一直在試圖將我的rails 2.2.2 app轉換爲jQuery，並且希望不使用jrails。關於這個問題，我唯一可以找到的參考資料是Railscasts Episode 136. Ryan回顧瞭如何使用jQuery發佈表單並在.js.erb文件中處理響應。Rails，使用沒有jrails的jQuery

我的問題是有人試圖用jQuery與.js.erb文件作爲觸發器的錨？作爲「link_to_remote」的替代品。

我已經得到jQuery做一個.get提交這個鏈接點擊到控制器，但我似乎無法得到它進入.js.erb文件。

謝謝

來源

2009-09-08 ibuck

這裏是通過劫持他們的行爲與jQuery風格的錨點工作的步驟。

在視圖中，可以稱之爲index.html.erb通過使用正常link_to助手把一些錨用特殊ID或類 - 通過使用資源路由例如鏈接到用戶控制器的show行動：

# in index.html.erb 
<%= link_to 'First user', user_path(1), class => 'ajax_link' %> 
<div id='some_container'> 
    to modify via javascript. 
</div>

第二步 - 使控制器能夠在javascript回答：

# in users_controller.rb 
def show 
    @user = User.find(params[:id]) 
    respond_to do |wants| 
    wants.html 
    wants.js 
    end 
end

下一個 - 創建相應js.erb文件，在這種情況下，將users/show.js.erb，並盡一切你的JavaScript魔術就在這裏。

# show.js.erb 
alert('ajax answers!'); 
$('#some_container').html('hey this works great'); 
$('#some_container').after("<%= @user.name %>");

請注意，該erb代碼必須放在雙引號中。

而現在，在最後一步，劫持與jQuery的鏈接，在application.js文件像這樣：

# in application.js 
$(document).ready(function() { 
    $(".ajax_link").live("click", function() { 
    $.getScript(this.href); 
    return false; 
    }); 
}

這很簡單：如果你的文檔被完全加載，所有的節點與「ajax_link」級被劫持並且點擊事件getScript從anchor href屬性中指定的url獲取javascript答案。

順便說一句：如果javascript被禁用，這也可以正常工作。

希望這會幫助你，如果你有任何問題不要猶豫，問！ ;）

來源

2009-09-08 22:53:54 xijo

感謝您的幫助。不過，我仍然遇到同樣的問題。我將發佈我的代碼作爲下面的答案.. – ibuck 2009-09-10 15:37:23

我使用以下：鑑於

<%= link_to 'more ...', show_all_tags_path(:category => category.name), :class => 'ajax_link' %>

：控制器（我已經驗證了它送過來）

def show_all_for_section 
    @category = TagCategory.find_by_name(params[:category]) 
    respond_to do |format| 
     format.html { redirect_to root_path } 
     format.js 
    end 
end 

show_all_for_section.js.erb 

alert('ajax answers!');

的application.js

jQuery.noConflict(); 

jQuery(document).ready(function() { 
    jQuery(".ajax_link").live("click", function() { 
     jQuery.getScript(this.href); 
     return false; 
    }); 
});

當我點擊鏈接，它只是拋出一個JS錯誤，但不提供行號（請參閱截圖她e：http://dev.tristar-cimarron.com/rails_jquery.png）

來源

2009-09-10 15:43:59 ibuck

好的第一次嘗試：將show_all_for_section.js.erb重命名爲* .erb.js。你使用哪個版本的導軌？ – xijo 2009-09-10 22:19:46

我正在使用rails 2.2.2，但是我已經設法在全新的2.3應用程序上運行。我懷疑它是版本，或者我有我的部分命名。感謝你的幫助。我想我現在可以跟蹤這一點。 – ibuck 2009-09-11 15:46:44

很好，祝你好運，歡迎您！ – xijo 2009-09-11 22:15:38

什麼是真實性標記？你完全忽略它

/* 
Post data via html 
Use the class post in your link declaration 
<%= link_to 'My link', my_new_path(),:class => "post" %> 
*/ 
jQuery.fn.postWithAjax = function() { 
    this.unbind('click', false); 
    this.click(function() { 
    $.post($(this).attr("href"), $(this).serialize(), null, "script"); 
    return false; 
    }); 
    return this; 
}; 

$('a.post').postWithAjax(); 

<a onclick="var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', 'V6kGWHXmdepMOufNJBh0TZvvhON+Kag6GeR/MUj2dRk='); f.appendChild(s);f.submit();return false;" class="post add_to_cart " href="/line_items?product_id=547">Add to cart</a>

與此代碼的問題是，鏈接獲得直通不知何故，我無法figgure說出來呢，所以任何想法，將不勝感激。

來源

2010-04-16 12:21:41 Cezar

Rails，使用沒有jrails的jQuery

回答

相關問題