How to transform my html form into a rails 3 form

luislavena · October 21, 2011, 2:03pm

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

onclick="$ (this).is(':checked') && $(this.value).addClass('hidden') || $ (this.value).removeClass('hidden');">Filter1
onclick="$ (this).is(':checked') && $(this.value).addClass('hidden') || $ (this.value).removeClass('hidden');">Filter2
onclick="$ (this).is(':checked') && $(this.value).addClass('hidden') || $ (this.value).removeClass('hidden');">Filter3

Hi	How
Are	You

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

sebastian · October 21, 2011, 6:32pm

Have a look at the documentation for 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 · October 24, 2011, 8:58am

I tried the following without success:

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

sebastian · October 24, 2011, 11:27am

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?

sebastian · October 24, 2011, 2:54pm

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:

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

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

Hi	How
Are	You

What I am doing wrong???

sebastian · October 24, 2011, 4:03pm

On Oct 24, 2011, at 8:53 AM, Sebastian wrote:

    $(".show1").show();
And my table where I want to show and hide rows like this:

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

sebastian · October 24, 2011, 3:54pm

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

    $(".show2").show();
 break;
 default
    $(".show1").show();
    $(".show2").show();

}

}));

On Mon, Oct 24, 2011 at 7:53 PM, Sebastian

sebastian · October 24, 2011, 4:26pm

EDIT: The error is in the line after the “default”

sebastian · October 24, 2011, 4:42pm

On Oct 24, 2011, at 10:25 AM, Sebastian wrote:

$("#filters input:checkbox").click(
$(".show2").show();
On Oct 24, 2011, at 8:53 AM, Sebastian wrote:
 case 'show1':
}
You need a colon after the word default in any switch statement, in any
language I know that uses it.

Walter

sebastian · October 24, 2011, 4:25pm

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?

sebastian · October 24, 2011, 4:52pm

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

On Mon, Oct 24, 2011 at 9:25 PM, Sebastian

sebastian · October 24, 2011, 4:59pm

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

 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

sebastian · October 24, 2011, 4:48pm

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

On Mon, Oct 24, 2011 at 9:25 PM, Sebastian

sebastian · October 24, 2011, 8:08pm

On Mon, Oct 24, 2011 at 10:56 AM, Walter Lee D.
[email protected]wrote:

 case 'show1':

}
})});

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 · October 25, 2011, 8:59am

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?

sebastian · October 25, 2011, 9:15am

Well, could you paste your HTML code here?

On Tue, Oct 25, 2011 at 1:58 PM, Sebastian

sebastian · October 25, 2011, 10:15am

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

sebastian · October 25, 2011, 1:20pm

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 · October 25, 2011, 1:20pm

On Tue, Oct 25, 2011 at 4:14 AM, Sebastian
[email protected]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:

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
Darthttp://en.wikipedia.org/wiki/Dart_(programming_language) that
is suppose to fix all the short coming of javascript and you can try it
here http://try.dartlang.org/) but there are many libraries (the other
way
around you asked about maybe?)

sebastian · October 25, 2011, 2:50pm

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:

But that means I have that on every view!