入門級與軌道的JavaScript：更新格式提交div（3.1/jquery）

我有一個基本的頁面，一個包含文本的div和一個窗體來更新該文本，在rails 3.1/jquery上。我不太瞭解jquery或js，所以我只是在爲控制器準備咖啡文字。入門級與軌道的JavaScript：更新格式提交div（3.1/jquery）

我發現的教程都不相關，我發現的幾個都很古老。我可以看到發生了什麼，有點像：我可以在jjs成功時獲得js警報，將表單作爲遠程表單（放入服務器並在控制器上運行更新 - 基本文本被更改，但我需要刷新頁面才能看到更改）。

所以，我有我的工作通過2個基本問題：

我需要用js的諧音撥弄或我可以把這個到頁面的JS/CoffeeScript的？看起來像這樣可以處理沒有一堆亂七八糟的部分。
你究竟如何控制替換信息與js/jquery：.html，.load和其他幾個函數似乎牽連，但我還沒有找到正確的組合。

所有我發現教程要麼太舊或太冗長了一個基本的命中最地面運行軌道內做一些基本的jQuery的東西的理解。我正努力努力削減和加速js/json的表單提交。對新手來說，一個新穎，明確，簡單的教程會很棒，但任何指向正確學習方向的東西都會很棒。

是的，我沒有發佈任何代碼，但如果我可以這個小工作，我會發布。

來源

2011-10-28 blueblank

你看過這個railscast嗎？ http://railscasts.com/episodes/136-jquery –

是的，但這不是最新的資源。這是有用的背景，儘管我沒有試圖將它與我正在做的事情整合在一起。 – blueblank

如果您對AJAX成功alert()，做這樣的事情：

$("#myDivId").text(myText);

哪裏myText是要麼提交給服務器的文本，要麼來自服務器的響應 - 以最適合您的情況爲準。

更一般地說，要替換元素的文本使用$("#myElementId").text("new text")。要替換某個元素的HTML，請使用$("#myElementId").html("<b>new HTML</b>")

來源

2011-10-28 17:20:46 gilly3

我不知道Ruby，但這很容易用jQuery處理。

在AJAX調用返回成功後，您可以執行AJAX表單提交併更新您的<div>元素。

//bind some code to the submit event for your form 
$('#form_id').bind('submit', function (event) { 

    //preventDefault(); is the same as return false; except you can run code after preventDefault(); 
    event.preventDefault(); 

    //make a GET request to your server-side script 
    $.get('path/to/form_action.rb', $(this).serialize(), function (response) { 

     //this is the callback for the AJAX call 
     $('#div_id').html('<span>This is my <strong>new</strong> fancy text</span>'); 
    }); 
});

一些注意事項：

您還可以使用$.post()（http://api.jquery.com/jquery.post/）方法，而不是$.get()（http://api.jquery.com/jquery.get/），並使用POST方法發送數據。
event.preventDefault（）;會阻止表單正常提交，因此您可以使用自己的代碼處理它的提交。
AJAX回調中的response變量是您的ruby腳本在處理表單提交後輸出的響應。

$.get()

$(this).serialize()是增加你的表單輸入數據到AJAX調用：http://api.jquery.com/serialize/

來源

2011-10-28 16:50:10 Jasper

Rails可以處理大部分的事情，或者正如我所瞭解的那樣，在表單中添加remote = true;請參閱http://wowkhmer.com/2011/09/19/unobtrusive-ajax-with-rails-31/。這很有用，謝謝。 – blueblank

入門級與軌道的JavaScript：更新格式提交div（3.1/jquery）

回答

相關問題