Forum: Ruby on Rails Sorttable.js

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
0de83fd56f1af530034ba8efa5490b1b?d=identicon&s=25 Johnny B (Guest)
on 2006-04-21 10:06
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
<script src="javascripts/sorttable.js" type="text/javascript"></script>

In the View
<table class="sortable" id="anyid">
<thead>
  <th>Numbers</th>
  <th>Alphabet</th>
  <th>Dates</th>
  <th>Currency</th>
</thead>
<tr>
  <td>1</td>
  <td>Z</td>
  <td>01-01-2006</td>
  <td>&euro; 5.00</td>
</tr>
<tr>
  <td>2</td>
  <td>y</td>
  <td>04-13-2005</td>
  <td>&euro; 6.70</td>
</tr>
<tr>
  <td>3</td>
  <td>X</td>
  <td>08-17-2006</td>
  <td>&euro; 6.50</td>
</tr>
<tr>
  <td>4</td>
  <td>w</td>
  <td>01-01-2005</td>
  <td>&euro; 4.20</td>
</tr>
<tr>
  <td>5</td>
  <td>V</td>
  <td>05-12-2006</td>
  <td>&euro; 7.15</td>
</tr>
</table>

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

Has anyone got any ideas?
0de83fd56f1af530034ba8efa5490b1b?d=identicon&s=25 Johnny B (Guest)
on 2006-04-21 10:09
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?
C004d67820a114e24ccf6f2ddaf5b236?d=identicon&s=25 Richard Livsey (Guest)
on 2006-04-21 10:28
(Received via mailing list)
Johnny B wrote:
 > 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
 ><script src="javascripts/sorttable.js"
type="text/javascript"></script>

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

<script src="/javascripts/sorttable.js" type="text/javascript"></script>

(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
http://livsey.org
0de83fd56f1af530034ba8efa5490b1b?d=identicon&s=25 Johnny B (Guest)
on 2006-04-21 10:49
Thanks for yuor response, i have tried the absolute location with but
this makes no difference.
<script src="/javascripts/sorttable.js" type="text/javascript"></script>


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.

<script src="javascripts/sorttable.js" type="text/javascript"></script>
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/effects.js" type="text/javascript"></script>

Is there anything else you can think off?
00973881979aa0a660ffbbb2f7a907fb?d=identicon&s=25 Peter De Berdt (Guest)
on 2006-04-21 11:14
(Received via mailing list)
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.
>
> <script src="javascripts/sorttable.js" type="text/javascript"></
> script>
> <script src="javascripts/prototype.js" type="text/javascript"></
> script>
> <script src="javascripts/effects.js" type="text/javascript"></script>
>
> 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
0de83fd56f1af530034ba8efa5490b1b?d=identicon&s=25 Johnny B (Guest)
on 2006-04-21 11:44
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

<script src="sorttable.js" type="text/javascript"></script>.

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

Baffling!!
59de94a56fd2c198f33d9515d1c05961?d=identicon&s=25 Tom Mornini (Guest)
on 2006-04-21 11:54
(Received via mailing list)
Does the Rails generated HTML validate via W3C?

--
-- Tom Mornini
0de83fd56f1af530034ba8efa5490b1b?d=identicon&s=25 Johnny B (Guest)
on 2006-04-21 12:03
Tom Mornini wrote:
> Does the Rails generated HTML validate via W3C?
>
> --
> -- Tom Mornini

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
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/effects.js" type="text/javascript"></script>
<script src="javascripts/controls.js" type="text/javascript"></script>
<script src="javascripts/dragdrop.js" type="text/javascript"></script>
<script src="javascripts/application.js"
type="text/javascript"></script>
<script src="javascripts/rico.js" type="text/javascript"></script>

#View
<div id="name_panel">
    <table id="data_grid"
         class="live_grid" cellspacing="0" cellpadding="0">
         <thead> <tr>
                     <th class="first cellHeader">#</th>
                     <th class="title cellHeader">Name</th>
         </tr></thead>
           <tbody>
            <% n = 1 %>
              <%  for name in @names %>
            <tr>
                <td class="first cell"><%= n %></td>
                  <td class="title cell"><%= name.name %></td>

              </tr>
            <% n += 1 %>
             <% end %>
     </tbody>
    </table>
</div>

#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.
0de83fd56f1af530034ba8efa5490b1b?d=identicon&s=25 Johnny B (Guest)
on 2006-04-21 12:39
If i put the following code in the layout it works fine:

<table class="sortable" id="anyid">
<thead>
  <th>Numbers</th>
  <th>Alphabet</th>
  <th>Dates</th>
  <th>Currency</th>
</thead>
<tr>
  <td>1</td>
  <td>Z</td>
  <td>01-01-2006</td>
  <td>&euro; 5.00</td>
</tr>
<tr>
  <td>2</td>
  <td>y</td>
  <td>04-13-2005</td>
  <td>&euro; 6.70</td>
</tr>
<tr>
  <td>3</td>
  <td>X</td>
  <td>08-17-2006</td>
  <td>&euro; 6.50</td>
</tr>
<tr>
  <td>4</td>
  <td>w</td>
  <td>01-01-2005</td>
  <td>&euro; 4.20</td>
</tr>
<tr>
  <td>5</td>
  <td>V</td>
  <td>05-12-2006</td>
  <td>&euro; 7.15</td>
</tr>
</table>

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?
<script src="sorttable.js" type="text/javascript"></script>
0de83fd56f1af530034ba8efa5490b1b?d=identicon&s=25 Johnny B (Guest)
on 2006-04-21 14:36
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' })%>

<table class="sortable" id="anyid">
<tr>
  <th>Numbers</th>
  <th>Alphabet</th>
  <th>Dates</th>
  <th>Currency</th>
</tr>
<tr>
  <td>1</td>
  <td>Z</td>
  <td>01-01-2006</td>
  <td>&euro; 5.00</td>
</tr>
<tr>
  <td>2</td>
  <td>y</td>
  <td>04-13-2005</td>
  <td>&euro; 6.70</td>
</tr>
<tr>
  <td>3</td>
  <td>X</td>
  <td>08-17-2006</td>
  <td>&euro; 6.50</td>
</tr>
<tr>
  <td>4</td>
  <td>w</td>
  <td>01-01-2005</td>
  <td>&euro; 4.20</td>
</tr>
<tr>
  <td>5</td>
  <td>V</td>
  <td>05-12-2006</td>
  <td>&euro; 7.15</td>
</tr>
</table>


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?
00973881979aa0a660ffbbb2f7a907fb?d=identicon&s=25 Peter De Berdt (Guest)
on 2006-04-21 15:21
(Received via mailing list)
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
0de83fd56f1af530034ba8efa5490b1b?d=identicon&s=25 Johnny B (Guest)
on 2006-04-21 15:44
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!
E0c987f680cd640c14912ebfbf0f0f07?d=identicon&s=25 unknown (Guest)
on 2006-04-21 16:05
(Received via mailing list)
>> 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'
          } ) %>
0de83fd56f1af530034ba8efa5490b1b?d=identicon&s=25 Johnny B (Guest)
on 2006-04-21 16:16
Thanks works perfectly!
This topic is locked and can not be replied to.