Weird error now - RJS not working

try {
new Insertion.Bottom("canskills", "<tr>\n <td td align=\"LEFT\">Guitarist</td>\n <td td align=\"LEFT\">Advanced</td>\n <td td align=\"LEFT\">5 + years</td>\n <td td align=\"LEFT\">4+ years ago</td>\n</tr>\n\n\n\n");

Form.reset("canskill-form");
} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('new Insertion.Bottom(\"canskills\", \"<tr>\n <td td align=\\"LEFT\\">Guitarist</td>\n <td td align=\\"LEFT\\">Advanced</td>\n <td td align=\\"LEFT\\">5 + years</td>\n <td td align=\\"LEFT\\">4+ years ago</td>\n</tr>\n\n\n\n\");\nForm.reset(\"canskill-form\");'); throw e }

And the problem is?

And the problem is?

That’s what I"m trying to figure out. Is my question to vague ? I think it’s getting closer.

Stuart

Still not sure what I’m missing here. I’ve done some reading up with the RJS Templates book. Here is what I’m trying to do.

I have a page, on the bottom portion is a form, on the top is a table. User makes entry into form,hits submit table gets another row.

I’ll probably add an additonal button at some point to exit the screen.

This is the form (at least the important part -

#this starts the table with the inputted information <%= render :partial => 'canskills/canskill' ,:collection => @candidate.canskills %>
Skill Skill level Experience Last use
Now the form itself : <% remote_form_for :canskill, :url => canskill_url, :html => { :id => 'canskill-form' }, :candidate_id => @candidate_id do |form| %> #various fields................

… … %= submit_tag “add skill” %>

I have a create.rjs to accompany the controller action create. rjs : page.insert_html :bottom, ‘canskills’, :partial => ‘canskill’ page.form.reset ‘canskill-form’

Then the controller action: pretty simple:

def create @canskill = Canskill.new(params[:canskill]) @candidate_id = params[:candidate_id]

end

However on submit all I get currently is this rjs error page -

try {
new Insertion.Bottom("canskills", "<tr>\n<div id=\"new-canskill\">\n <td td align=\"LEFT\">Internet
engineer</td>\n <td td align=\"LEFT\">Intermediate</td>\n <td td align=\"LEFT\">3 - 4 years</td>\n
<td td align=\"LEFT\">1 year ago</td>\n </div>\n</tr>\n\n\n\n");

Form.reset("canskill-form");
} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('new
Insertion.Bottom(\"canskills\", \"<tr>\n<div id=\\"new-canskill\\">\n <td td align=\\"LEFT\\">

Internet engineer</td>\n <td td align=\\"LEFT\\">Intermediate</td>\n <td td align=\\"LEFT\\">3 -
4 years</td>\n <td td align=\\"LEFT\\">1 year ago</td>\n </div>\n</tr>\n\n\n\n\");\nForm.reset

(\"canskill-form\");'); throw e }

I gather it’s telling me to try something , ? not sure. Can really use some help / pointers, guidance.

Stuart

Reading more perhaps this is not an error as much as it’s showing me the javascript. One thing is that when I hit submit, and the rjs text message appears I’m back at a different URL.

the form and table sits at /id/candidates/canskills/new yet after submit, the rjs quotes above appears at /id/candidate/canskills

? Stuart

Bump . sorry still stuck on this and hopefully someone can help. I’m wondering if my rest based controller is the problem. I don’t think the URL should be changing.

Hey Stuart-

  The reason you are having trouble is because you cannot replace normal table rows with ajax. You have to wrap each row in a tbody and use that to replace the rows:

With your table, ensure that you have the proper <tbody> tag around all <tr> elements. Have the links within each of the TR's that should display the info below have an id like so

<table> <tbody> <tr>   <td>     <table>     <tbody id="row1">        <tr>          <td></td>          <td>link for info with id...</td>        </tr>       </tbody>       </table>    </td> </tr> <tr>   <td>     <table>     <tbody id="row2">        <tr>          <td></td>          <td>link for info with id...</td>        </tr>       </tbody>       </table>    </td> </tr> </tbody> </table>

And you should be able to use RJS like so...

page.insert_html :bottom, params[:row], render(:partial => 'rowHelpInfo')

Cheers-

-- Ezra Zygmuntowicz-- Lead Rails Evangelist -- ez@engineyard.com -- Engine Yard, Serious Rails Hosting -- (866) 518-YARD (9273)

Hey Stuart-

    The reason you are having trouble is because you cannot replace

normal table rows with ajax. You have to wrap each row in a tbody and use that to replace the rows:

With your table, ensure that you have the proper tag around

all elements. Have the links within each of the TR’s that should display the info below have an id like so

Links being what, the generate data ? and which id’s are you speaking about ?

Stuart

Sorry Stuart, I just pasted an example of the table and I forgot to
remove that part about links, you can ignore that. The important bit
is to use <tbody> tags to wrap each tr row. You put an id on the
tbody's and then replace a whole tbody with a new tr in it to replace
a table row. You cannot replace tr tags directly.

  So here is an example table in a template that I use to replace
table rows with ajax. This is just an example to get your started.\

<h2>Applications</h2> <table class='zebra table-width'> <thead>   <tr>     <th>Name</th>     <th>Svn url</th>     <th>Actions</th>   </tr> </thead>

<% for app in @apps %>      <tbody id='<%= app.dom_id %>'>     <tr>     <td><%= link_to app.name, app_path(app) %></td>     <td><%= truncate(app.svn_url) %></td>          <td><span style='float: right;'><%= link_to image_tag ('pencil_go.png'), edit_app_path(app) %>     <%= link_to image_tag('cross.png'), app_path(app), :confirm => 'Are
you sure?', :method => :delete %></span>     </td>     </tr>      </tbody> <% end %> <tfoot class="buttons">   <tr>     <th colspan="3" style='overflow: auto;'> <%= link_to image_tag('/images/buttons/new.gif'), new_app_path %>     </th>   </tr> </tfoot> </table>

the iimportant part is to make a unique id on each <tbody> tag . and
then when you replace a row with ajax, you replace the entire tbody.
So in an rjs response you send back something like thisL

     <tbody id='<%= app.dom_id %>'>     <tr>     <td><%= link_to app.name, app_path(app) %></td>     <td><%= truncate(app.svn_url) %></td>          <td><span style='float: right;'><%= link_to image_tag ('pencil_go.png'), edit_app_path(app) %>     <%= link_to image_tag('cross.png'), app_path(app), :confirm => 'Are
you sure?', :method => :delete %></span>     </td>     </tr>      </tbody>

Hope that helps.

Cheers- -EZrta

Well I had to take some time off from working on this but went back to it today and found it unusually easy. Since I am not replacing rows, but at this point just adding I created the table section as such:

<tbody id="tabrow">

     <tr>
           <td><%= canskill.skill %></td>
           <td><%= canskill.skill_level.name%></td>
            <td><%=canskill.skill_experience_year.name

%> <%= canskill.skill_last_use.name %>

     </tr>
</tbody>

thead is in the page that loads the form, tbody is in the partial it renders.

<tbody id="tabrow">
     <tr>
           <td> fields...............</td>             
     </tr>
</tbody>

Then in the RJS page.insert_html :after, ‘tabrow’, :partial => ‘canskill’ page.form.reset ‘canskill-form’

Easy enough Stuart