Sorttable.js

Rails
1

I have come across this neat Javascript table sorter at
http://kryogenix.org/code/browser/sorttable/

It seems straigh forward to use but i cant get it to work.

I have included in the head

In the View

Numbers Alphabet Dates Currency
1 Z 01-01-2006 € 5.00
2 y 04-13-2005 € 6.70
3 X 08-17-2006 € 6.50
4 w 01-01-2005 € 4.20
5 V 05-12-2006 € 7.15

The table is displayed but the table headers are not sortable.

Has anyone got any ideas?

2

Sorry, i forgot to mention. I have gotten this to work in a normal html
page with the same code

Is the problem rails specific?

3

Johnny B wrote:

I have come across this neat Javascript table sorter at
sorttable: Make all your tables sortable

It seems straigh forward to use but i cant get it to work.

I have included in the head

<script src="javascripts/sorttable.js"

type=“text/javascript”>

Your problem may lie in this include line.
Make sure this is absolute, IE:

(note the prepended ‘/’)

Otherwise if you access a route of say /test/sortable/ it will be
looking for the javascript in /test/sortable/javascripts/ and not
/javascripts/

Hope that helps.

–
R.Livsey

4

On 21 Apr 2006, at 10:49, Johnny B wrote:

got the same code to work in a general html page made me think i
may be
doing something wrong in rails.

Is there anything else you can think off?

Maybe there’s something in prototype or effects that overrides a
function/event of your sorttable. Have you tried moving the
sorttable.js after the prototype and effects script tag?

Best regards

Peter De Berdt

5

Thanks for yuor response, i have tried the absolute location with but
this makes no difference.

I am using some other stuff form prototype and scriptaculous on the same
page and the drag and drop and autocomplete are working fine. The
sorttable.js is definetly in the javascripts folder so the fact that i
got the same code to work in a general html page made me think i may be
doing something wrong in rails.

Is there anything else you can think off?

6

Does the Rails generated HTML validate via W3C?

–
– Tom M.

7

Yes i have tried placing the sorttable.js at the end of the list. I
even removed the protype/effests.js because i thought the same that
maybe they were overriding the sorttable.js.

That is why i created a html page on its own and included the the
sorttable.js and it worked fine.

I have moved the sorttable.js into the public folder and tried the code
below without success

.

I am going to try some rico stuff now so i’ll see how that goes.

Baffling!!

8

Tom M. wrote:

Does the Rails generated HTML validate via W3C?

–
– Tom M.

I dont know what you mean by “Does the Rails generated HTML validate via
W3C?”
I’m new to rails, only started using it a few weeks ago.

I have tried to use rico and it seems to be the same problem. Rico
needs prototype so i have checked my prototype version and its 1.5. The
code i have used is below:

#Layout

#View

<% n = 1 %> <% for name in @names %> 
          </tr>
        <% n += 1 %>
         <% end %>
 </tbody>
</table>

#Controller
def ajax
@names = Name.find(:all)
render :partial => ‘blog/scriptexamples/ajax’
end

What the about shows is below but with no sorting ability

Name

1 John
2 Thomas
3 Paul
4 Craig
5 Andrew
6 Mike
7 David
8 Karl
9 Ricky
10 Jeff
11 Jeremy
12 Timothy
13 Jack
14 Brian
15 Barry
16 William
17 Jonathon

I have drag and drop, autcomplete scriptaculous examples on this page
and they work fine.

# Name
<%= n %> <%= name.name %>
9

If i put the following code in the layout it works fine:

Numbers Alphabet Dates Currency
1 Z 01-01-2006 € 5.00
2 y 04-13-2005 € 6.70
3 X 08-17-2006 € 6.50
4 w 01-01-2005 € 4.20
5 V 05-12-2006 € 7.15

This code will not work in the template scriptexamples/_ajax.rhtml,

It looks like it cant find the sorttable.js in the public folder. Is
there amy way to include it again on the template _ajax.rhtml?

10

On 21 Apr 2006, at 14:36, Johnny B wrote:

I know what the problem is but don’t know why it is happening. If i
place the sortable table in any view that isn’t called using AJAX it
works. If i put the table code on the view index.rhtml it works

Aha, couldn’t it be because your sorttable.js initializes everything
on window.load (JavaScript experts, correct me if I’m wrong, I’m not
that much of a JS guru :-))

addEvent(window, “load”, sortables_init);

With this function, your page is searched for tables which need to be
sortable and then the necessary events are attached, ?

When you replace certain parts of your page using AJAX, the onload
event doesn’t fire anymore, so the new table isn’t getting the
necessary events added to be sortable.

You should be able to call the sortables_init() function again after
each AJAX call, so that your table gets the events it needs. Don’t
know if something in the JavaScript can be replaced to automatically
do this on each call to the page, whether it’s through normal loading
or AJAX.

Best regards

Peter De Berdt

11

Thanks peter that makes sense.

The sorttable.js does contain the code below so when i’m using an ajax
call to render the partial the neccessary events arn’t attached to the
sortable table as you stated.

addEvent(window, “load”, sortables_init);

I’m new to rails and javascript so i will search the web for a solution
but if anyone has any good idea’s it will be much appreciated!

12

You should be able to call the sortables_init() function again after
each AJAX call, so that your table gets the events it needs. Don’t
know if something in the JavaScript can be replaced to automatically
do this on each call to the page, whether it’s through normal loading
or AJAX.

I’m new to rails and javascript so i will search the web for a solution
but if anyone has any good idea’s it will be much appreciated!

<%= link_to_remote(‘Scriptaculous’,
:update => ‘maindiv’,
:complete => ‘sortables_init()’,
:url =>{
:action => ‘ajax’
} ) %>

13

Thanks works perfectly!

14

I know what the problem is but don’t know why it is happening. If i
place the sortable table in any view that isn’t called using AJAX it
works. If i put the table code on the view index.rhtml it works

<%= link_to ‘Savantis Blog’, :action => ‘index’, :collection => @posts
%>

If i put the table code on the view _ajax.rhtml and use the
link_to_remote the scrollable table doesn’t work:

<%= link_to_remote(‘Scriptaculous’, :update => ‘maindiv’, :url =>{
:action => ‘ajax’ })%>

Numbers Alphabet Dates Currency
1 Z 01-01-2006 € 5.00
2 y 04-13-2005 € 6.70
3 X 08-17-2006 € 6.50
4 w 01-01-2005 € 4.20
5 V 05-12-2006 € 7.15

Is there any reason for this? I have scriptaculous ajax stuff working
on the same page but the table using the sorttable.js doesn’t?