Replacing a partial with a form partial when clicking edit with ajax

Question

In my rails app, I want to be able to click "edit" to replaced/swapped a show partial with a form partial.

I have gotten started applying ajax and jquery by adding remote:true to my edit link. I then created a js file called edit.js.erb to call the ajax

here is my idea controller:

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

in edit.js.erb I tried:

$("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

What am I doing wrong here?

Answer 1

Seems like you are on the right track. Things to always check:

• Are you seeing any JS errors? Check your browser's JS console.
• Is the edit JS actually running? Check your server log to ensure the action is running, and if so put an alert('Got here'); in edit.js.erb and see if that appears.

In your first example the jQuery selector looks weird. 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. Make sure the element has id="art_edit_show" and not id="#art_edit_show" , that is an easy mistake to make.

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:

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