简体   繁体   English

单击使用Ajax进行编辑时,用表单部分替换部分

[英]Replacing a partial with a form partial when clicking edit with ajax

In my rails app, I want to be able to click "edit" to replaced/swapped a show partial with a form partial. 在我的Rails应用程序中,我希望能够单击“编辑”以用部分表格替换/交换显示部分。

I have gotten started applying ajax and jquery by adding remote:true to my edit link. 我已经开始通过将remote:true添加到我的编辑链接来开始应用ajax和jquery。 I then created a js file called edit.js.erb to call the ajax 然后,我创建了一个名为edit.js.erb的js文件来调用ajax

here is my idea controller: 这是我的想法控制器:

def edit
   @idea = Idea.find_by_permalink(params[:id])
end

in edit.js.erb I tried: 在edit.js.erb中,我尝试过:

$("data-model[idea-basic-show]").hide().after("<%= j render('idea_basic_edit')%>");

but that did not work 但这没有用

I then tried: 然后,我尝试:

 $("#art_edit_show").replaceWith("ART EDIT PARTIAL");

to make sure the js was working and that did work 确保js在正常工作

What am I doing wrong here? 我在这里做错了什么?

Seems like you are on the right track. 好像您走在正确的轨道上。 Things to always check: 要经常检查的事情:

  • Are you seeing any JS errors? 您是否看到任何JS错误? Check your browser's JS console. 检查浏览器的JS控制台。
  • Is the edit JS actually running? 编辑JS实际在运行吗? Check your server log to ensure the action is running, and if so put an alert('Got here'); 检查您的服务器日志以确保该操作正在运行,如果是,则发出alert('Got here'); in edit.js.erb and see if that appears. 在edit.js.erb中查看是否出现。

In your first example the jQuery selector looks weird. 在第一个示例中,jQuery选择器看起来很奇怪。 I'm not familiar with that selector usage. 我对选择器的用法不熟悉。 You might want to check that. 您可能要检查一下。

The second should definitely do something, provided that there is an element with ID art_edit_show visible in the page. 如果在页面中有一个ID为art_edit_show的元素,则第二个绝对应该做某事。 Make sure the element has id="art_edit_show" and not id="#art_edit_show" , that is an easy mistake to make. 确保元素具有id="art_edit_show"而不是id="#art_edit_show" ,这很容易犯错。

A debugging technique I like to use is to console log the selectors I'm trying to replace. 我喜欢使用的一种调试技术是控制台记录我要替换的选择器。 In edit.js.erb before you replace the element do a: 在替换元素之前,在edit.js.erb中执行以下操作:

console.debug($("#art_edit_show"));

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM