AJAX - weird display

rubyonrails-talk
#1

Hi,

I have a tabular (it's a form actually) with text_fields and buttons.
I wanted to diplay a particular row when a button is set to 'yes'.
Everything's working fine except, that my new row is diplayed at the top
of the array and not where I want. I can do page.add_html/delete and
specify bottom, but I don't understand why my snippet doesn't work.

Any idea?

<tr>
<td class="ror_rocks" colspan=5>Used to programming in Ruby?</td>
<td class="ror_rocks"><%= radio_button :form,:ruby,:yes, :onclick => remote_function(:url => {:controller => '/my_controler', :action =>'my_action', :ruby => 'yes'}, :method => :post)%></td>
<td class="ror_rocks"><%= radio_button :form,:ruby,:yes, :onclick => remote_function(:url => {:controller => '/my_controler', :action =>'my_action', :ruby => 'no'}, :method => :post)%></td>
</tr>
<tr>
<div id="my_id">
  <%= render :partial => 'yes' %>
</div>
</tr>

And the partial yes:
<% if @ruby -%>
<tr>
<td>bla bla bla ../..</td>
</tr>
<% end -%>

With the rjs
page.replace_html 'my_id', :partial => 'yes'

Thanks!

#2

<tr>
<div id="my_id">
<%= render :partial => 'yes' %>
</div>
</tr>

the above is not valid html. applying your partial, it's even more invalid.

<tr>
<div id="my_id">
<tr>
   <td>...</td>
  </tr>
</div>
</tr>

that's not going to work and your browser will screw up the rendering,
but you already know that.

try:

<tr id="my_id"><%= render :partial => 'yes' -%></tr>

And the partial yes:
<% if @ruby -%>
<td>bla bla bla ../..</td>
<% end -%>

rjs stays the same

keep in mind the # of td's in your partial should be the same as the
rest of the table, or have a colspan attribute.

#3

Thanks for your reply.

This looks perfectly correct to me. I do something similar but with an
unordered list, and div's around each of the <li> lines. replace_html
cleanly replaces just the line I want to change.

I have the same snippet for lists too and it works actually.

I wonder if it is just a bug related to tables.

Maybe. I'm waiting for other replies before going deeper in this problem
to see where's the bug. I'm wondering if it is due to the 'form' fields.

I almost never use a table anymore now that I've learned css.

Actually, I have an application displaying a whole bunch of data (think of
thousands rows/columns of structured data). So tabulars are perfect for
me :slight_smile:

Have fun,

#4

Hi Pierre,

Pierre-Alexandre Meyer wrote:

I wonder if it is just a bug related to tables.

Maybe. I'm waiting for other replies before going deeper in this problem
to see where's the bug. I'm wondering if it is due to the 'form' fields.

It's not a bug with tables. Ajax works on XHTML DOM elements. Tables use a different DOM. The explanation of the situation is on MSDN. If you're going to use Ajax, you're either going to use CSS, or you're going to end up with some very ugly code because <tr>'s can't be updated / replaced. If you really need to use tables, the best way I've heard of is to replace your
<table>
  <tr></tr>
</table>

structure with

<table>
  <tbody>
    <tr></tr>
  </tbody>
  <tbody>
    <tr></tr>
  </tbody>
</table>

It seems you can do a page.replace on a <tbody>. I haven't tried it. My recommendation is to bite the bullet and learn a little CSS. You can use absolute positioning on an <li> to get the table effect very easily, your code will be lots cleaner, and you can style the result in ways you'll never be able to with a table. OTOH, I hear the XHTML DOM is going to be extended and CSS3.x is going to include tables. If you can wait :wink:

Best regards,
Bill

#5

Hi Pierre,

Hi!

It seems you can do a page.replace on a <tbody>. I haven't tried it.

Unfortunately, it doesn't work either :cry: I will forget about this AJAX
trick.

My recommendation is to bite the bullet and learn a little CSS. You can use
absolute positioning on an <li> to get the table effect very easily, your
code will be lots cleaner, and you can style the result in ways you'll never
be able to with a table.

You're probably right, but at this point on I don't have the time to learn
CSS and replace the 200 tables of my application :wink: Maybe in the RC2...

OTOH, I hear the XHTML DOM is going to be extended
and CSS3.x is going to include tables. If you can wait :wink:

I'm pretty sure my customers can't wait!

Thanks for your explanation,

#6

try:

<tr id="my_id"><%= render :partial => 'yes' -%></tr>

It works! Thanks a lot!

keep in mind the # of td's in your partial should be the same as the
rest of the table, or have a colspan attribute.

Actually the colspan was already there :wink:

Have fun,