"Write javascript without writing javascript!" It sounds so zen... There is no spoon. Ahem. One thing I've read about since I've started fooling with Rails, and especially since it was officially included in 1.1 is .rjs templates and how they allow rails developers to totally skip writing javascript code. It sounded just like something I ought to learn about and then write a tutorial on...
Since I'm pretty much a webdev noob and since I don't have a ton of javascript experience, writing javascript in ruby code sounds absurdly wonderful. So, tonight I set off on a journey to figure a little bit out about .rjs templates.
One thing missing from my del.icio.us app is a way to reset the text boxes between calls. For example, after looking at my RubyOnRails links I might want to call up my TADSpot tags. I'd like to have a link to click on to clear out my input control and the text area. And I don't want to reload the page just to clear the boxes. This sounds like a job for javascript!
Err... I mean RJS to the rescue! In a RJS template, you have access to an object called 'page' which represents your current web page. Using this object we can do pretty much whatever we want with the contents of the page. Here's the contents of my very simple rjs template:
That's the easy part. I whipped it up and then wondered, "How the heck do I call this?" Specifically I want to call it in such a way that the screen doesn't reload. This is what I came up with:
Basically I pulled up my PDF copy of the Pragmatic Rails Recipe book and searched the first chapter for references to RJS template. I found an example like what I have above on page 41. There's some other illuminating information there as well. This code requires the clear.rjs file to be in the same directory as the other views. It works like a charm.
Before I used the link_to_remote as shown above, I tried some code like this:
12
<%= link_to 'Clear', :action => 'clear'%>
This doesn't work, but it does have the side-effect of showing you the javascript that the .rjs gets turned into, which is interesting in and of itself. Here it is:
Being the noob that I am, if this is a totally retarded way to accomplish this, please leave me a comment and let me know the "right" way to do it.
UPDATE: Quick hint - to make sure that RJS will work on your page, make sure you include this line of code into your HEAD tag:
12
<%= javascript_include_tag :defaults%>
Here's a quick video (1:20) with a demonstration of the clear functionality running in some live code to kind of tie all of this together and maybe make some more sense:
Jake Stetser Says:
June 10th, 2007 at 07:21 PM
You can also write this in your view/rhtml file:
link_to_function("Clear Results!", update_page{|page|
page['query_results'].value = ''
page['query_tags'].value = ''
page.visual_effect :shake, :query_results
})
and avoid the round-trip to the server.
Doug @ Straw Dogs Says:
June 10th, 2007 at 07:21 PM
I think Terry's (TAD) method is the better way of going about it as it keeps messy code away from your view. I don't know about anyone else but I like to keep as much of my code from the view as humanly possible.
blahutka@centrum.cz Says:
June 10th, 2007 at 07:21 PM
Hi, I have the same problem with displaying
javaScript code as result string. Have you sold this problem yet?
For those of you who are getting problems with just raw javascript showing up, here’s the probable solution: make sure you have included the default javascript files in the offending page.
Make sure this line:
<%= javascript_include_tag :defaults %>
shows up within the HEAD tag of your page. Try again and everything should work properly.
Okay, I must be an idiot (which is sad with how long I’ve programmed in PHP, but this RoR this brand spanking new for me). So, I do have the javascript_include_tag thing in my layout. I double-checked. I am, however, still getting that raw HTML/JS feeding into my div. I swear it looks like it’s being written via a <=h %> instead of <= %>, but I have NO idea. Anyone?
update: after a great deal of headaches which still have not finished (have to figure out how to actually DO something), it looks like (1) you can NOT have an :update parameter in your remote tag. (2) You can NOT call your rjs with a redirect_to :action => ‘name of rjs action, which can also a def’. Apparently Ruby thinks your crazy if you do this (though it makes sense to me I should be able to). Reason for not allowing it is that doing so changes the content-type from text/javascript. The content-type being text/html causes the javascript to print out raw and not eval. Hope that helps someone else!
May be this can help you. I installed a jquery plugin, and what this son of a bithc did was change the :defaults value to its own files, thats why I got this error. It just doesn’t fix only by removing the files, I had to make a new rails application and copied app folder into it. Hope it helps.
and i buy it here Takk… – Sigur Ros It is possible to order the on mail? The No.1s – Diana Ross It is possible to order the on mail? Now Thats What I Call Music 25 – Pop – Various Artists
@alberto: regarding your potential js issues after installing jquery plugin- be aware that there are potential conflicts between the rails prototype js libraries use of the ’$’ character and that of jqueries use of ’$’. You can google around for “jquery no_conflicts mode” or similar to find a simple fix for getting the two to play nicely. Basically you change the ’$’ in jquery into a different char, like ‘J’ or whatever and then the two don’t collide. Ran into an issue where I was using RoR within a layout that had externally provided js calls to the jquery library and neither worked until this was resolved.
is there a palce I can use to learn everything about this stuff? right from basic rudimentary, to deep n’ dirty, this language is cool. I already know HTML, JS, CSS, and a small amount of C++
Definitely bookmarked. It’s interesting that you can do this – certainly sounds like a “there is no spoon” moment. I’m really fascinated with the current popularity of rails, and so I’ve started diving in to see what it’s like. Definitely a wonderful mash-up code, where you can just mix and mash so many things into it. I like the way it works – like an opensource coding language. Need to give Python a try as well.
This has been a great post to find. Sounds like your just slightly less wet behind the ear than I am so its great learning from someone who understands
Hey guys i didn’t even try the code out, but as far as i understand if you link your rjs file, in your HEAD tag, just write a function in the rjs file and then in the link to you can do something like link_to linkName, “javascript:functionName();”
Has anyone tryed that, i’ll try and then post again, good luck
June 10th, 2007 at 07:21 PM You can also write this in your view/rhtml file: link_to_function("Clear Results!", update_page{|page| page['query_results'].value = '' page['query_tags'].value = '' page.visual_effect :shake, :query_results }) and avoid the round-trip to the server.
June 10th, 2007 at 07:21 PM I think Terry's (TAD) method is the better way of going about it as it keeps messy code away from your view. I don't know about anyone else but I like to keep as much of my code from the view as humanly possible.
June 10th, 2007 at 07:21 PM Hi, I have the same problem with displaying javaScript code as result string. Have you sold this problem yet?
June 29th, 2007 at 10:49 AM
same problem here, any solution yet ?
July 3rd, 2007 at 12:46 PM
For those of you who are getting problems with just raw javascript showing up, here’s the probable solution: make sure you have included the default javascript files in the offending page.
Make sure this line:
<%= javascript_include_tag :defaults %>
shows up within the HEAD tag of your page. Try again and everything should work properly.
July 14th, 2007 at 10:34 PM
Okay, I must be an idiot (which is sad with how long I’ve programmed in PHP, but this RoR this brand spanking new for me). So, I do have the javascript_include_tag thing in my layout. I double-checked. I am, however, still getting that raw HTML/JS feeding into my div. I swear it looks like it’s being written via a <=h %> instead of <= %>, but I have NO idea. Anyone?
July 14th, 2007 at 11:14 PM
More Info: It honestly looks like there should be
page << “alert(‘blah’)”
When I do what I need to in orde rto trigger the .rjs, I get:
[The alert that says ‘blah’] And then it just writes out to the window:
try { alert(‘blah’) } catch (e) { alert(‘RJS error:\n\n’ + e.toString()); alert(‘alert(\’blah\’)’); throw e }
If I try: page << “document.getElementById(‘content’).innerHTML = ‘blah’”
The result is the div simply reading:
try { document.getElementById(‘content’).innerHTML = ‘blah’ } catch (e) { alert(‘RJS error:\n\n’ + e.toString()); alert(‘document.getElementById(\’content\’).innerHTML = \’blah\’‘); throw e }
Running rails-1.2.3 (updated my gems just in case)
July 15th, 2007 at 03:52 AM
update: after a great deal of headaches which still have not finished (have to figure out how to actually DO something), it looks like (1) you can NOT have an :update parameter in your remote tag. (2) You can NOT call your rjs with a redirect_to :action => ‘name of rjs action, which can also a def’. Apparently Ruby thinks your crazy if you do this (though it makes sense to me I should be able to). Reason for not allowing it is that doing so changes the content-type from text/javascript. The content-type being text/html causes the javascript to print out raw and not eval. Hope that helps someone else!
July 29th, 2007 at 10:13 AM
Thank you for such a great written tutorial. Bookmarked.
August 8th, 2007 at 04:15 PM
I am interested in the topics discussed but have been feeling a little intimidated by the thought of the work
August 29th, 2007 at 09:19 PM
http://antiwarboston.com/free-young-gay-porn-vids.html free young gay porn vids
September 30th, 2007 at 03:36 PM
http://eogli.com porno portal
October 6th, 2007 at 02:49 AM
teen sex http://www.antiwarboston.com/cartooncartoon/ porno portal
December 12th, 2007 at 10:50 AM
May be this can help you. I installed a jquery plugin, and what this son of a bithc did was change the :defaults value to its own files, thats why I got this error. It just doesn’t fix only by removing the files, I had to make a new rails application and copied app folder into it. Hope it helps.
December 13th, 2007 at 07:44 PM
and i buy it here Takk… – Sigur Ros It is possible to order the on mail? The No.1s – Diana Ross It is possible to order the on mail? Now Thats What I Call Music 25 – Pop – Various Artists
December 18th, 2007 at 08:57 PM
folder of that website. create flash movie Who can help? Who can help? information on levaquin
February 10th, 2008 at 12:12 PM
@alberto: regarding your potential js issues after installing jquery plugin- be aware that there are potential conflicts between the rails prototype js libraries use of the ’$’ character and that of jqueries use of ’$’. You can google around for “jquery no_conflicts mode” or similar to find a simple fix for getting the two to play nicely. Basically you change the ’$’ in jquery into a different char, like ‘J’ or whatever and then the two don’t collide. Ran into an issue where I was using RoR within a layout that had externally provided js calls to the jquery library and neither worked until this was resolved.
April 4th, 2008 at 03:40 PM
is there a palce I can use to learn everything about this stuff? right from basic rudimentary, to deep n’ dirty, this language is cool. I already know HTML, JS, CSS, and a small amount of C++
July 7th, 2008 at 02:12 AM
the video doesnt seem to be working.. enabled every fuckin advertisement javascript now and still no go…
July 20th, 2008 at 04:58 AM
Definitely bookmarked. It’s interesting that you can do this – certainly sounds like a “there is no spoon” moment. I’m really fascinated with the current popularity of rails, and so I’ve started diving in to see what it’s like. Definitely a wonderful mash-up code, where you can just mix and mash so many things into it. I like the way it works – like an opensource coding language. Need to give Python a try as well.
August 9th, 2008 at 06:13 AM
Thank you for this interesting article, a damn fast and good introduction to rjs. there you go!
September 9th, 2008 at 09:21 AM
This has been a great post to find. Sounds like your just slightly less wet behind the ear than I am so its great learning from someone who understands
September 17th, 2008 at 09:35 AM
Hey guys i didn’t even try the code out, but as far as i understand if you link your rjs file, in your HEAD tag, just write a function in the rjs file and then in the link to you can do something like link_to linkName, “javascript:functionName();”
Has anyone tryed that, i’ll try and then post again, good luck
September 29th, 2008 at 08:04 AM
I also had the try-catch issue, my javascript codes were just displayed instead of getting executed.
Wrapping the rjs code with a javascript content-type header made it work:
page << ’