How to transform my html form into a rails 3 form

rubyonrails-talk
1

Hi,

I have the following code working in a rails 3 view, but it is unfortunately not pure rails code!

<% @filter1 = "tr.show1,tr.show2" %> <% @filter2 = "tr.show1" %> <% @filter3 = "tr.show2" %>

<form>   <p>   <input type="checkbox" value=<%=@filter1%> onclick="$ (this).is(':checked') && $(this.value).addClass('hidden') || $ (this.value).removeClass('hidden');">Filter1<br/>   <input type="checkbox" value=<%=@filter2%> onclick="$ (this).is(':checked') && $(this.value).addClass('hidden') || $ (this.value).removeClass('hidden');">Filter2<br/>   <input type="checkbox" value=<%=@filter3%> onclick="$ (this).is(':checked') && $(this.value).addClass('hidden') || $ (this.value).removeClass('hidden');">Filter3<br/>   </p> </form>

<table border=1>   <tr class="show1">     <td>Hi</td>     <td>How</td>   </tr>   <tr class="show2">     <td>Are</td>     <td>You</td>   </tr> </table>

With that code I can hide rows in my table by just checking the boxes and show them by unchecking the boxes!

Now I want to do that in pure Rails 3 code with a check_box_tag, but I don't know where to put my jquery code. I already watched the Railcast episode about jquery, but that didn't helped me at all!

I hope some can help me! The best would be to get a short example how to do that.

Sebastian

2

Have a look at the documentation for check_box_tag

http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-check_box_tag

It specifies that any other keys passed to options will be used as HTML attributes. So you can pass your onclick attribute to check_box_tag in the options hash.

3

I tried the following without success:

<%= check_box_tag 'Filter A', @filter1, :onClick => "$ (this).is(':checked') && $(this.value).addClass('hidden') || $ (this.value).removeClass('hidden');" %>

4

Now I want to do that in pure Rails 3 code with a check_box_tag, but I

don’t know where to put my jquery code. I already watched the Railcast

episode about jquery, but that didn’t helped me at all!

uff , your code is messy. ok here it goes. since the form is only to render the check_boxes you can leave it as it is but add an id to it

"filters">

and checkboxes

check_box_tag ‘show1’, ‘show’

check_box_tag ‘show2’, ‘show’

check_box_tag ‘showall’, ‘show’

then in your application.js file (rails 3.0.x)

$(“#filter input:checkbox”).click(function(){

class_to_show = $(this).attr(“id”);

switch(class_to_show){

case ‘show1’:

$(“.show1”).show();

$(“.show2”).hide();

break;

case ‘show2’:

$(“.show1”).hide();

$(“.show2”).show();

break;

default

$(“.show1”).show();

$(“.show2”).show();

}

});

aint that pretty?

5

Yes you are right! Yours is looking better!

But I am not getting it to work!

I have now the followinfg in my public/javascripts/application.js:

$("#filters input:checkbox").click(function(){    class_to_show = $(this).attr("id");   switch(class_to_show){       case 'show1':          $(".show1").show();          $(".show2").hide();       break;       case 'show2':          $(".show1").hide();          $(".show2").show();       break;       default          $(".show1").show();          $(".show2").show();    }

});

My form is looking like that:

<form id="filters"> <%= check_box_tag 'show1', 'show' %> <%= check_box_tag 'show2', 'show' %> <%= check_box_tag 'showall', 'show' %> </form>

And my table where I want to show and hide rows like this:

<table border=1>   <tr class="show1">     <td>Hi</td>     <td>How</td>   </tr>   <tr class="show2">     <td>Are</td>     <td>You</td>   </tr> </table>

What I am doing wrong???

6

Try this modified code: (function() { $(“#filters input:checkbox”).click(

7

Yes you are right! Yours is looking better!

But I am not getting it to work!

I have now the followinfg in my public/javascripts/application.js:

$("#filters input:checkbox").click(function(){   class_to_show = $(this).attr("id"); switch(class_to_show){      case 'show1':         $(".show1").show();         $(".show2").hide();      break;      case 'show2':         $(".show1").hide();         $(".show2").show();      break;      default         $(".show1").show();         $(".show2").show();   }

});

My form is looking like that:

<form id="filters"> <%= check_box_tag 'show1', 'show' %> <%= check_box_tag 'show2', 'show' %> <%= check_box_tag 'showall', 'show' %> </form>

And my table where I want to show and hide rows like this:

<table border=1> <tr class="show1">    <td>Hi</td>    <td>How</td> </tr> <tr class="show2">    <td>Are</td>    <td>You</td> </tr> </table>

What I am doing wrong???

Check to be absolutely certain you are using jQuery rather than Prototype. While most of this code will work fine with either, the basic accessor (shortcut for findElementById) in Prototype is $('theId'), while jQuery prefers $('#theId'). Also, attr(key) in jQuery is readAttribute(key) in Prototype.

Walter

8

With the modified code, Firebug gives me that error: missing : after case label $(".show1").show();

Code in application.js looks like this now:

(function() { $("#filters input:checkbox").click(

function(){     class_to_show = $(this).attr("id");   switch(class_to_show){       case 'show1':          $(".show1").show();          $(".show2").hide();       break;       case 'show2':          $(".show1").hide();          $(".show2").show();       break;       default          $(".show1").show();          $(".show2").show();    } }));

I tried it with and without that tag in my view: <%= javascript_include_tag "http://code.jquery.com/jquery-latest.js&quot; %>

That should include JQuery, right?

9

EDIT: The error is in the line after the "default"

10

EDIT: The error is in the line after the "default"

With the modified code, Firebug gives me that error: missing : after case label $(".show1").show();

Code in application.js looks like this now:

(function() { $("#filters input:checkbox").click(

function(){     class_to_show = $(this).attr("id");   switch(class_to_show){       case 'show1':          $(".show1").show();          $(".show2").hide();       break;       case 'show2':          $(".show1").hide();          $(".show2").show();       break;       default          $(".show1").show();          $(".show2").show();    } }));

I tried it with and without that tag inmyview: <%= javascript_include_tag "http://code.jquery.com/jquery-latest.js&quot; %>

That should include JQuery, right?

Yes you are right! Yours is looking better!

But I am not getting it to work!

I have now the followinfg inmypublic/javascripts/application.js:

$("#filters input:checkbox").click(function(){   class_to_show = $(this).attr("id"); switch(class_to_show){      case 'show1':         $(".show1").show();         $(".show2").hide();      break;      case 'show2':         $(".show1").hide();         $(".show2").show();      break;      default         $(".show1").show();         $(".show2").show();   }

You need a colon after the word default in any switch statement, in any language I know that uses it.

Walter

11

I’m sorry, I have just fixed the code as follow:

(function() { $(“#filters input:checkbox”).click( function(){ class_to_show = $(this).attr(“id”); switch(class_to_show){ case ‘show1’: $(“.show1”).show(); $(“.show2”).hide(); break; case ‘show2’: $(“.show1”).hide(); $(“.show2”).show(); break; default: $(“.show1”).show(); $(“.show2”).show(); } })});

12

I’m sorry for the typo, I have just fixed the code as follow:

(function() { $(“#filters input:checkbox”).click( function(){ class_to_show = $(this).attr(“id”); switch(class_to_show){ case ‘show1’: $(“.show1”).show(); $(“.show2”).hide(); break; case ‘show2’: $(“.show1”).hide(); $(“.show2”).show(); break; default: $(“.show1”).show(); $(“.show2”).show(); } })});

13

I'm sorry for the typo, I have just fixed the code as follow:

(function() { $("#filters input:checkbox").click( function(){    class_to_show = $(this).attr("id"); switch(class_to_show){      case 'show1':         $(".show1").show();         $(".show2").hide();      break;      case 'show2':         $(".show1").hide();         $(".show2").show();      break;      default:         $(".show1").show();         $(".show2").show();   } })});

And what happens now? What does Firebug tell you when it runs?

Walter

14

oh , ok im back.

Well first lest see what is wrong. if you have chrome or firefox right -clk on the page and lick inspect element, that should bring the inspector up. then enable the console if is not enabled.

type

$(“.show1”)

the console show show all the elements that match the selector if it does not you are not importing the js library. if it does then type

$(“.show1”) .hide()

see if the row disappear. if they they do then will have to deal with the event attachment seems it does not seem to be working.

go to the application.js and type

$(document).ready( <== this is importan so that jquery first waits for the rows to actually exists

function(){ <== inside this function goes the code

$(“#filters input:checkbox”).click(function(){

                console.log("hey there ");

              });

}

);

this should make a hey there appear in the browser console everytime you click a checkbox, dont forget to reload the page everytime you change the application.js file.

Im almost sure that you are missing the $(document).ready(); event , is very important because if the js loads before the checkboxes are rendered no event will be attached to them. $(document).ready(); causes the javascript to wait untill the entire page has loaded before doing anything.

15

First, thank you all for your answers!!!

I removed the typo and did what you told me! The firebug console is finding the $(".show1") and it is hiding the row if I type $ (".show1") .hide()

So I tried your example with the log output, but Firebug says me "$ (document).ready is not a function"

My application.js is looking like this:

$(document).ready(     function(){                  $("#filters input:checkbox").click(function(){                     console.log("hey there");                   });      } );

I found another example on the jquery api documentation. If I put this into my application.js then it is printing the text:

$(document).ready(function () {   $("p").text("The DOM is now loaded and can be manipulated."); });

That is pretty strange...!

Has anyone an idea?

16

Well, could you paste your HTML code here?

17

Ah, I found my mistake!!!

I was just only adding JQuery in my view with <%= javascript_include_tag "http://code.jquery.com/jquery-latest.js&quot; %>, but not in my application.html.erb. That means that the code in the application.js had propably no JQuery access!

My problem now is that my other normal Rails Java Helpers (see below )are not working anymore as intended!

<%= button_to 'Destroy', product, :confirm => 'Are you sure?', :method => :delete %> That one is wotking, but there is no confirm pop up!!!!

I need to have access to both libraries <%= javascript_include_tag :defaults %> AND <%= javascript_include_tag "http://code.jquery.com/jquery-latest.js&quot; %>

I read something about JRails. Is that an option or is there another way???

That one is not working: <%= javascript_include_tag :defaults, "http://code.jquery.com/jquery-latest.js&quot; %>

18

Ah, I found my mistake!!!

I was just only adding JQuery in my view with <%=

javascript_include_tag “http://code.jquery.com/jquery-latest.js” %>,

but not in my application.html.erb. That means that the code in the

application.js had propably no JQuery access!

Ok remove this

javascript_include_tag “http://code.jquery.com/jquery-latest.js” %>,

google to your Gemfile and at this

gem “jquery-rails”

then in the console

bundle install

this will install jquery the right way

then go to config/application.rb and verify that :defaults is made up of this

config.action_view.javascript_expansions[:defaults] = %w(rails jquery)

this like here is what tells rails what to output in the javascript_include_tag :defaults line

now jquery is set up.

My problem now is that my other normal Rails Java Helpers (see

below )are not working anymore as intended!

<%= button_to ‘Destroy’, product, :confirm => ‘Are you sure?’, :method

=> :delete %>

That one is wotking, but there is no confirm pop up!!!

Is possible that you are have installed prototype which has similar syntax to that of jquery.

I notice you said ‘Java’ helpers, pay attention, javascript is not java, they have similar syntax but that’s it.

Now what version of rails are you using, this helper changed their out put in rails 3.x+ from that found in rails 2.x-.

I read something about JRails. Is that an option or is there another

way???

JRuby is not a javascript+ruby package is java with a ruby sintax, is a replacement for the ruby interpreter that lets Ruby run on the java virtual machine. Some gems are not compatible with jruby.

Remember, java and javascript are unrelated, the name javascript was give to javascript because java was popular back when javascript was been develop. Java is a general purpose programing language, javascript is a scripting language aimed mainly at the web.

read this also:

http://en.wikipedia.org/wiki/JavaScript

The deal with javascript and ‘the other way’ is that , since javascript was develop when the web was very young it has lots of short coming, so people start creating functions to deal with those short coming and eventually put them together to made a library, for example, to capture a the form with an id for filter without using any javascript library you would have to type this

document.getElementById(‘filters’)

as you can see that is a bit long, also if it were a class you would have to do this

document.getElementByClassName(‘show1’)

and if you have to capture a tag type

document.getElementByTagName(‘input’)

so many libraries have a function that replaces this with $( ) where $ is the name of the function. In jquery you distinguish what is that you want to capture by addin a #, a . or nothing.

the result is :

document.getElementById(‘filters’)

is

$(“#filters”)

document.getElementByClassName(‘show1’)

is

$(“.show1”)

and

document.getElementByTagName(‘input’)

is

$(‘input’)

19

google to your Gemfile and at this

should be ‘move to your gem file’, it appear i was making honor to my motto:

cogito ergo google

20

Thank you for your detailed answer!

I started with Rails 3, so there is no "old" Rails 2 code in it. As I know Rails 3 comes out-of-the-box configured with prototype, right? So yes I have prototype installed.

And yes you are right I meant javascript helpers (not JAVA), like this: <%= button_to 'Destroy', product, :confirm => 'Are you sure?', :method => :delete %>

But I meant JRails not JRuby! It could be found here: https://github.com/aaronchi/jrails Here is the Railscast that is showing JRails: #136 jQuery - RailsCasts It should just add JQuery to your Rails App and the standard OOTB prototype javascript helpers should still work, but I haven't tried that.

So if a install the "jquery-rails" gem like you mentioned, are the prototype helpers still working?