Topic: Determining toggle state using RJS

I've got a search form with additional options that I want to be able to show/hide.  The following code shows and hides the elements properly, but I cannot get the toggle link to recognize its state (shown or hidden).  I'm attempting to get the element's status by testing against the div's CSS display property, which the toggle action sets to "none" or ""(empty string) depending on whether it's hidden or shown.  Based on the value returned, I want to update the Show/Hide link ($('artist_params_link')) to reflect $("artist_field_params")'s status.

                        <%= link_to_function(
                                    # output link with id
                                    "Show Artist Field Parameters",
                                    # toggle element
                                    :id => "artist_params_link") do |page|
                                        # apply effect
                                        page.visual_effect :toggle_blind, :artist_field_params, :duration => 0.25
                                        # update link
                                        if page['artist_field_params'].get_style :display == "none"
                                            page[:artist_params_link].replace_html "Show Artist Field Parameters"                                       
                                        else                                                                                   
                                            page[:artist_params_link].replace_html "Hide Artist Field Parameters"                                       
                                        end
                                    end
                        %>

                        <div id="artist_field_params" style="display: none;">
                            <h4>Field Parameters</h4>
                            <p class="note" style="margin: 0px 0px 10px 0px;">Specify field-specific keywords below.</p>
                            <div class="field_parameters">
                                <label for="artist_firstName">FIRST NAME</label><%= text_field 'artist', 'firstName', :size => 20 %><br />
                                <label for="artist_lastName">LAST NAME</label><%= text_field 'artist', 'lastName', :size => 20 %><br />
                            </div>
                        </div>


The above code gives these errors in JavaScript alerts when I click the Show/Hide link:

RJS error:
TypeError: style.camelize is not a function

This error is pointing to this line in prototype.js:   

 getStyle: function(element, style) {
    element = $(element);
    if (['float','cssFloat'].include(style))
        style = (typeof element.style.styleFloat != 'undefined' ? 'styleFloat' : 'cssFloat');
        style = style.camelize();
        var value = element.style[style];

And then another alert that says:

Effect.toggle("artist_field_params", 'blind',{duration:0.25});
$("artist_field_params").getStyle(false);
$("artist_params_link").update("Hide Artist Field Parameters");

The error originates on line 9 in my code, as page['artist_field_params'].get_style :display == "none" is not evaluating as I expect.

Any help is greatly appreciated.  If there's a better way to get the toggle state, please let me know.  I'm surprised there's not a page['artist_field_params'].toggleState or similar method.

Last edited by johnny.rodgers (2007-09-02 23:47:43)

Re: Determining toggle state using RJS

Hi

you can simply do this (may not be the best way)

<%= link_to_function(
      # output link with id
      "Show Artist Field Parameters",
      # toggle element
      :id => "artist_params_link") do |page|
        # apply effect
        page.visual_effect :toggle_blind, :artist_field_params, :duration => 0.25
        # update link
        page << "
           if ($('artist_field_params').getStyle('display')=='none')
             $('artist_params_link').innerHTML ='Hide Artist Field Parameters';
           else
             $('artist_params_link').innerHTML = 'Show Artist Field Parameters';
                "
      end
%>

Not the rjs way rather javascript way.

Last edited by virajt (2007-09-03 07:40:35)

Re: Determining toggle state using RJS

Thanks for the suggestion Virajt.  I've implemented your solution and it works as desired.  I'm sure there must be a way to do this with RJS.  There just doesn't seem to be reliable documentation on the methods of the page object.  For example, I found the .get_style :property method (above) from a random snippet - I can't find it properly documented anywhere.

Anyway, this works for now.  However, since the whole point of RJS is to avoid writing (and debugging) JavaScript, there must be another, more Rails-y way out there.  Any thoughts?