How to transform my html form into a rails 3 form

[Sebastian]

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

[Tim Shaffer]

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.

[Sebastian]

I tried the following without success:

<%= check_box_tag 'Filter A', @filter1, :onClick => "$

(this).is(':checked') && $(this.value).addClass('hidden') || $

(this.value).removeClass('hidden');" %>

On 21 Okt., 18:31, Tim Shaffer <timshaf...@me.com> wrote:
> Have a look at the documentation for check_box_tag
>

> http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.h...

[radhames brito]

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

<form id=>"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?

[Sebastian]

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???

[Roy Situmorang]

Try this modified code:
(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();
  }

}));

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To post to this group, send email to rubyonra...@googlegroups.com.
To unsubscribe from this group, send email to rubyonrails-ta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.

[Walter Lee Davis]

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

[Sebastian]

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"
%>

That should include JQuery, right?

On 24 Okt., 16:01, Walter Lee Davis <wa...@wdstudio.com> wrote:
> On Oct 24, 2011, at 8:53 AM, Sebastian wrote:
>
>
>
>
>
>
>
>
>
> > 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();
> >   }
>
> > });
>
> >Myformis looking like that:
>

> > <formid="filters">

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

> > Andmytable 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
>
>
>
>
>
>
>
>
>
> > On 24 Okt., 11:25, radhames brito <rbri...@gmail.com> wrote:

> >>> Now I want to do that in pureRails3code with a check_box_tag, but I
> >>> don't know where to putmyjquery 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 theformis only to render

> >> the check_boxes you can leave it as it is but add an id to it
>

> >> <formid=>"filters">

>
> >> and checkboxes
>
> >> check_box_tag  'show1', 'show'
> >> check_box_tag  'show2', 'show'
> >> check_box_tag  'showall', 'show'
>
> >> then in your application.js file (rails3.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?
>
> > --

> > You received this message because you are subscribed to the Google Groups "Ruby onRails: Talk" group.

[Sebastian]

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

[Walter Lee Davis]

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

Walter

> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.

[Roy Situmorang]

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();
  }
 })});

You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.

[Roy Situmorang]

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();
  }

 })});

On Mon, Oct 24, 2011 at 9:25 PM, Sebastian <sebasti...@googlemail.com> wrote:

You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.

[Walter Lee Davis]

On Oct 24, 2011, at 10:50 AM, Roy Situmorang wrote:

> 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

[radhames brito]

On Mon, Oct 24, 2011 at 10:56 AM, Walter Lee Davis <wa...@wdstudio.com> wrote:

On Oct 24, 2011, at 10:50 AM, Roy Situmorang wrote:

> 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();
>   }
>  })});

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.

[Sebastian]

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?

[Roy Situmorang]

Well, could you paste your HTML code here?

[Sebastian]

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!

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" %>

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" %>

On 25 Okt., 09:13, Roy Situmorang <roy.situmor...@gmail.com> wrote:
> Well, could you paste your HTML code here?
>
> On Tue, Oct 25, 2011 at 1:58 PM, Sebastian

> <sebastian.go...@googlemail.com>wrote:

[radhames brito]

On Tue, Oct 25, 2011 at 4:14 AM, Sebastian <sebasti...@googlemail.com> wrote:

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')

Javascript right now is the only client side programming language (that i know of, also google is making a new more modern one called Dart that is suppose to fix all the short coming of javascript  and you can try it here) but there are many libraries (the other way around you asked about maybe?)

• DOJO
• Yahoo
• Prototype
• Jquery
• MochiKit
• Ext JS
• Open Rico
• Qooxdoo
• Moo Tools
• X library
• Fork
• OAT
• AJS

[radhames brito]

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 

[Sebastian]

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: http://railscasts.com/episodes/136-jquery
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?

[Sebastian]

OK, it looks like that JRails is better for dealing with Rails2, but
not for Rails3!

So there is only one question left: If a install the "jquery-rails"

gem like you mentioned, are the
prototype helpers still working?

Right now I am using your code in html tags and it is working like a
charm, like this:

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
"Your code snippets here!"
</script>
</head>

But that means I have that on every view!

On 25 Okt., 13:40, Sebastian <sebastian.go...@googlemail.com> wrote:
> Thank you for your detailed answer!
>

> I started withRails3, so there is no "old"Rails2 code in it. As I
> knowRails3comes 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:http://railscasts.com/episodes/136-jquery

> It should just add JQuery to yourRailsApp and the standard OOTB