How would you check if javascript is enabled in Rails? So that I could do something like this in the views:
<div>
<% if javascript_enabled? %>
<p>Javascript Enabled!</p>
<%- else -%>
<p>No Javascript</p>
<%- end -%>
</div>
How would you check if javascript is enabled in Rails? So that I could do something like this in the views:
<div>
<% if javascript_enabled? %>
<p>Javascript Enabled!</p>
<%- else -%>
<p>No Javascript</p>
<%- end -%>
</div>
That's not possible during rendering of the response. The only way to figure that less or more reliable is to let the client send an ajaxical request beforehand in one of the previous requests. This ajaxical request should then set some token in the server side session which identifies that the client has sent an ajaxical request beforehand (which thus proves that the client has JS enabled). But that doesn't cover the possibility that the client can disable JS in meanwhile during a session. Or you must hassle with collecting timestamps and ajaxical requests after every response. Not really something you'd like to do.
Rather render the both contents and make use of <noscript>
and <script>
tags to toggle the one or other. Also see my answer here for several examples: opposite of <noscript>
.
HTML does this for you.
<html>
<body>
<script>alert('you have js');</script>
<noscript>you don't have js</noscript>
<body>
</html>
You could do something sort of hacky like this, but your "javascript-enabled" html would need to be generated within the helper
Put this in your application_helper.rb
def javascript_enabled?
content_tag(:div, [
content_tag(:script, 'document.write("Javascript Enabled")'),
content_tag(:noscript, 'No Javascript')
])
end
This goes in your view:
<%= javascript_enabled? %>
You can't detect it on the server-side. Indeed, scripting might be turned off the first time your page is accessed, then the browser settings changed and re-navigated without a new HTTP request being made. Not to mention all sorts of caching issues and places where scripting might be technically ‘enabled’ but not working due to conflicts, bugs or ‘security’ tools getting in the way.
So you need to do all decisions about content for with-script/without-script on the client side. These days the preferred method would generally be ‘progressive enhancement’: include the basic HTML version on the page, then have JavaScript replace/upgrade it where it can:
<div id="isitjs">
<p>Backup content for no JavaScript</p>
</div>
<script type="text/javascript">
document.getElementById('isitjs').innerHTML= '<p>Sparkly script-enhanced content!<\/p>';
// or DOM methods, as you prefer
</script>
You can detect it, but it isn't pretty.
First, you need a new controller with an action that updates a timeout in the session:
class JavascriptController < ApplicationController
def confirm
session[:javascript_updated] = Time.now
end
end
Next you need to include a javascript action in all your pages so this controller action is called on each page load. The easiest way is to include it on a "javascript-confirm.js" file included in your layout (on this particular example I used Prototype's Ajax.Request, so you need to have it included on your javascripts, too):
function confirmJavascript()
{
// Assuming you are using Prototype
new Ajax.Request('/JavascriptController/confirm');
}
myTimeoutFunction();
setInterval(myTimeoutFunction, 10000); // invoke each 10 seconds
This will invoke the confirm action in all your page views. Finally, you have to control how much time did it pass since your last confirmation in your application controller.
class ApplicationController < ActionController::Base
JAVASCRIPT_TIME_LIMIT = 10.seconds
before_filter :prepare_javascript_test
private
def prepare_javascript_test
if (session[:javascript_updated].blank? or
Time.now - session[:javascript_updated] > ApplicationController::JAVASCRIPT_TIME_LIMIT)
@javascript_active = true
else
@javascript_active = false
end
end
end
You will now have a variable called @javascript_active
in all your controllers.
It should work even when the user activates/deactivates javascript, with a precision of 10 seconds. It might not work if some of your pages take longer than 10 pages to load (i.e. with lots of images). Increase the time limit in that case (on applicationcontroller and your javascript)
Disclaimer: I haven't tested this code, some bugs might be lurking - but it should point you on the right direction.
You cannot check from the server side if Javascript is enabled, however, you can set up a page before you site, and let redirect to your application with a parameter indicating if Javascript is enabled. See the sample code below :
So, if Javascript enabled the onload redirect will work, if not then the header meta tag will work. The trick is to put 1-2 second delay on the meta tag redirect, so if the javascript redirect won't redirect, the meta tag will, indicating that no JavaScript is enabled.