blocks|key|4829231|text|您可以使用javascript查看这些更改。例如，让我们考虑一个带有action+index的控制器Mycontroller，而你正在提交索引上的表单。然后在视图my_controller/index.js.erb中创建一个文件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4829232|要反映更改，请在此模板中使用javascript。remote肯定会发送ajax调用，因此要查看更改，需要使用javascript进行一些操作。|4829233|谢谢|4829234|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

You can see the changes using javascript.
For eg lets consider a controller Mycontroller with action index and you are submitting form on index.
Then create a file in views my_controller/index.js.erb

To reflect changes use javascript in this template.
Definately remote sends the ajax call, so to see the changes you need some manipulation using javascript.

Thanks

blocks|key|4829265|text|有多种方法可以做你所要求的事情。我的方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4829266|4829267|创建对控制器的AJAX调用，该调用将表单的参数传递到控制器内部，保存/更新内容，然后返回JSON对象|unordered-list-item|offset|length|style|CODE|4829268|在<代码>D9函数的success回调中，使用对象值H210F211追加列表项/表行|4829269|4829270|代码可能是这样的：|4829271|model.js|BOLD|4829272|$(function()+{
++$("#submit_button").on("click",+function(event)+{
++++event.preventDefault();
++++$.ajax({
++++++type:+"POST",
++++++url:+"your_controller_url",
++++++data:+"your_form_data"
++++++success:+function(result)+{
++++++++//+Append+the+result+to+a+table+or+list,+$("list").append(result)
++++++},
++++});
++});
});|code-block|syntax|javascript|4829273|controller.rb|4829274|def+your_action
++#+Do+your+stuff
++#+return+JSON+to+the+ajax+call
end|4829275|好吧，这只是个骨架。我更喜欢这样做。(因为我讨厌js.erb方法)|4829276|entityMap^0|0|0|7|4|18|4|0|A|7|0|0|0|0|8|0|0|0|D|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|15|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|16|8|@$F|17|G|18|H|I]|$F|19|G|1A|H|I]]|9|@]|A|$]]|$1|J|3|K|5|E|7|1B|8|@$F|1C|G|1D|H|I]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1G|8|@$F|1H|G|1I|H|Q]]|9|@]|A|$]]|$1|R|3|S|5|T|7|1J|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|6|7|1K|8|@$F|1L|G|1M|H|Q]]|9|@]|A|$]]|$1|Y|3|Z|5|T|7|1N|8|@]|9|@]|A|$U|V]]|$1|10|3|11|5|6|7|1O|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|13|$]]

There are various ways to do what you are asking. My approach would be: 

<ul>
<li>Create an <code>AJAX</code> call to the controller that passes the parameters of the form</li>
<li>Inside the controller, you save/update things and then return a <code>JSON</code> object</li>
<li>On the <code>success</code> callback of the <code>AJAX</code> function, you append a list item/table row, using the object values</li>
</ul>

The code could be something like this: 

model.js

<pre><code>$(function() {
 $("#submit_button").on("click", function(event) {
 event.preventDefault();
 $.ajax({
 type: "POST",
 url: "your_controller_url",
 data: "your_form_data"
 success: function(result) {
 // Append the result to a table or list, $("list").append(result)
 },
 });
 });
});
</code></pre>

controller.rb

<pre><code>def your_action
 # Do your stuff
 # return JSON to the ajax call
end
</code></pre>

Well, this is just a skeleton. I prefer doing things this way. (Because i hate the js.erb approach)

blocks|key|2716625|text|假设，现在您有一个要提交的用户表单，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2716626|<%25=form_for+@user,remote:+true%25><%25end%25>|code-block|syntax|javascript|2716627|你也有一个控制器，|2716628|UsersController|2716629|在你的控制器中，你有一个函数，|2716630|def+create
++#something
end|2716631|这是为了表格。|2716632|唯一需要做的就是修改函数，如下所示|2716633|def+create
++#something
++respond_to+do+%7Cformat%7C
++++format.js
++++format.html
++end
end|2716634|然后在您的视图端，在视图/+users+/目录下创建一个create.js文件，在该文件中，您可以执行js操作，如获取新记录，并将新记录附加到用户列表。|2716635|参考资料：|2716636|http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#form-for|offset|length|2716637|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|0|0|0|0|0|28|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1B|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1D|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|1E|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1F|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1G|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1I|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1J|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1K|8|@]|9|@$10|1L|11|1M|1|1N]]|A|$]]|$1|12|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|Z]]]]

let's say, now you have a user form to submit,

<pre><code>&lt;%=form_for @user,remote: true%&gt;&lt;%end%&gt;
</code></pre>

And you also have a controller, 

<pre><code>UsersController
</code></pre>

In your controller, you have a function, 

<pre><code>def create
 #something
end
</code></pre>

which is for the form.

the only thing you need is to modify the function like

<pre><code>def create
 #something
 respond_to do |format|
 format.js
 format.html
 end
end
</code></pre>

then in your view side, under directory of view/users/ , create a create.js file, in the file, you can do the js action, like get the new record, and append the new record to the users list.

reference:

<a href="http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#form-for" rel="noreferrer">http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#form-for</a>

blocks|key|1980043|text|这是rails+5，希望它能帮助一些人(它仍然可以在rails+4上工作)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1980044|尝试下面的ajax示例：|1980045|在“routes.rb”中：|1980046|#+set+the+route+that+ajax+can+find+the+path+to+what+controller+in+backend
get+++'/admin/some_great_flow',+++to:+'great_control#great_flow'|code-block|syntax|javascript|1980047|在'great_control_controller.rb‘控制器中：|1980048|+#+this+function+in+controller+will+response+for+ajax's+call
+def+great_flow
++++#+We+can+find+some+user+or+getting+some+data,+model+here.
++++#+'params[:id]'+is+passed+by+ajax+that+we+can+use+it+to+find+something+we+want.
++++@user+=+User.find(params[:id])+

++++#+print+whole+data+on+terminal+to+check+it+correct.
++++puts+YAML::dump(@user.id)+

++++#+transform+what+you+want+to+json+and+pass+it+back.++++++++
++++render+json:+{staff_info:+@user+}+
end|1980049|在'app/views/great_control/index.html.erb‘视图中：|1980050|<div>
+++++<label>Staffs</label>
+++++<%25=select_tag(:staff,+options_from_collection_for_select(@staffs,+:id,+:name),+id:"staff_id",+required:+true)%25>
</div>
<script>
//every+time+if+option+change+it+will+call+ajax+once+to+get+the+backend+data.
$("#staff_id").change(function(event)+{
++++let+staff_id+=+$("#staff_id").val()
++++$.ajax({
++++++++//+If+you+want+to+find+url+can+try+this+'localhost:prot/rails/info/routes'
++++++++url:+'/admin/some_great_flow',+
++++++++type:+'GET',
++++++++dataType:+'script',
++++++++data:+{+id:+staff_id+},
++++++++//+we+get+the+controller+pass+here
++++++++success:+function(result)+{
+++++++++++++var+result+=+JSON.parse(result);
+++++++++++++console.log(result['staff_info']);
+++++++++++++//+use+the+data+from+backend+for+your+great+javascript.
++++++++},
++++});
});
</script>|1980051|我是为自己写的。|1980052|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

Here is rails 5, hope it will help someone ( it still works on rails 4 ):
Try this ajax example:
In 'routes.rb':
<pre><code># set the route that ajax can find the path to what controller in backend
get '/admin/some_great_flow', to: 'great_control#great_flow'
</code></pre>
In 'great_control_controller.rb' controller:
<pre><code> # this function in controller will response for ajax's call
 def great_flow
 # We can find some user or getting some data, model here.
 # 'params[:id]' is passed by ajax that we can use it to find something we want.
 @user = User.find(params[:id]) 

 # print whole data on terminal to check it correct.
 puts YAML::dump(@user.id) 

 # transform what you want to json and pass it back. 
 render json: {staff_info: @user } 
end
</code></pre>
In 'app/views/great_control/index.html.erb' view:
<pre><code>&lt;div&gt;
 &lt;label&gt;Staffs&lt;/label&gt;
 &lt;%=select_tag(:staff, options_from_collection_for_select(@staffs, :id, :name), id:&quot;staff_id&quot;, required: true)%&gt;
&lt;/div&gt;
&lt;script&gt;
//every time if option change it will call ajax once to get the backend data.
$(&quot;#staff_id&quot;).change(function(event) {
 let staff_id = $(&quot;#staff_id&quot;).val()
 $.ajax({
 // If you want to find url can try this 'localhost:prot/rails/info/routes'
 url: '/admin/some_great_flow', 
 type: 'GET',
 dataType: 'script',
 data: { id: staff_id },
 // we get the controller pass here
 success: function(result) {
 var result = JSON.parse(result);
 console.log(result['staff_info']);
 // use the data from backend for your great javascript.
 },
 });
});
&lt;/script&gt;
</code></pre>
I write it for myself.

I'm having a lot of trouble trying to do something that I imagine would be fairly simple. 

I have a list of items, let's say, todos. At the bottom of that list I have a text field where I add new items to that list. I want to make it so that the new items are added to the bottom of that list dynamically, without a full page refresh, like in a chat window.

I made the submit form <code>remote: true</code> and it successfully submits without reloading the page, but I can't get the new item to appear at the bottom of the list at the same time. I have to refresh the page to see the changes.

I tried a few different approaches I found on SO (there's no shortage of similar questions here) and the web, and even a gem called Sync, but each of them had errors and problems of their own and I couldn't get any to work properly. Each of them could be its own SO question. So instead I ask: Is there a "recipe" that is sure to successfully implement this in Rails 4?

How to submit form and update element on the page without refresh, in Rails 4

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在尝试做一些我想象中相当简单的事情时遇到了很多麻烦。我有一个项目列表，比方说，待办事项。在该列表的底部，我有一个文本字段，我可以在其中向该列表添加新项。我想让新项目动态地添加到列表的底部，而不需要刷新整个页面，就像在聊天窗口中一样。我创建了submit form remote: true，它在不重新加载页面的情况下成...

问在Rails 4中如何在不刷新的情况下提交表单和更新页面上的元素
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Rails 4中如何在不刷新的情况下提交表单和更新页面上的元素EN