Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions

Detecting Javascript SOLUTION


Reply

8 Posts   1332 Views

Avatar
Carbon Crayon

1 February 2009 at 4:42am (Last edited: 1 February 2009 5:55am), Community Member, 598 Posts

Hi Guys

I am working on a project where I needed to detect whether javascript was enabled and react accordingly, drawing different items on the page.

having looked through google results I came accross a few examples, but none of them instantly applicable to silverstripe. Eventually I did manage to port one of the php form solutions in so that you can simple call <% if Javascript %> in the template.

The only downside to this that I can see is that when javascript is enabled and you refresh the page you get a 'Resend request' from the browser to resend the hidden form. Mayb somone knows a way around this?

Anway here is the code:

mysite/code/Page.php

class Page_Controller extends ContentController {
.
.
.

   
   function Javascript(){

      if (isset($_POST['jstest'])) {
          return true;
         }
      else {
          return false;
          }   
   }   
}

mysite/templates/Page.ss

.
.
.
<body>
<% if Javascript == 0 %>
<form name="jsform" id="jsform" method="post" style="display:none">
<input name="jstest" type="text" value="true" >
<script language="javascript">
document.jsform.submit();
</script>
</form>
<% end_if %>
.
.
.

mysite/templates/Layout/Page.ss

.
.
.
<% if Javascript %>
.....Do some fancy java stuff
<% else %>
do some boring stuff
<% end_if %>
.
.
.

Avatar
dio5

1 February 2009 at 5:38am (Last edited: 1 February 2009 5:55am), Community Member, 501 Posts

I would just have the boring thing displayed by default, and have javascript remove it from the DOM and insert the new fancy stuff.
No need to detect it in the template, just do it in your external javascript file.

Avatar
Carbon Crayon

1 February 2009 at 5:54am (Last edited: 1 February 2009 5:57am), Community Member, 598 Posts

Hi Dio

your solution sounds a lot better than mine, but my javascript is very limited at the moment (on the list of to-learns). Do you have an example to hand?

thanks :)

Avatar
dio5

1 February 2009 at 5:58am (Last edited: 1 February 2009 6:00am), Community Member, 501 Posts

Not really :)

But suppose you have your normal html code in a div #myDiv.

With jQuery you would then remove the inner html of it with eg the html function see http://docs.jquery.com/Attributes/html
and change it to the html you want. No need for detection then :).

Avatar
Carbon Crayon

1 February 2009 at 6:03am Community Member, 598 Posts

ok thanks for the link, I will look into it and post my code once I've got it working :)

Avatar
Carbon Crayon

1 February 2009 at 7:26am (Last edited: 1 February 2009 7:31am), Community Member, 598 Posts

Ok here is the code I got to. All it does is hide and unhide the appropriate elements. I did try actually inserting the block of html for when javascript is enabled, but quickly realised that I then can't use any SS variables within that block so had to drop that idea.

As it is the page will load both and then hide the non-javascript and unhide the javascript elements:

$(document).ready(function(){
   
   $('ul.servicesList').addClass("hidden");
   
   $("ul.kwicks").removeClass("hidden");
   
});

hehe somewhat simpler than my first solution!

thanks for your help dio :)

Avatar
theAlien

17 March 2009 at 1:55am Community Member, 131 Posts

Hi,

I tried implementing this solution, but I guess I'm overlooking something...

This is what I put in the head:

<head>
.
.
<script src="jsparty/jquery/jquery.js"></script>
<script>
   $(document).ready(function(){
      $("div#Form").addClass("hidden");
   });
</script>
.
.
</head>

And in the body I put this:

<body>
.
.
<div id="Form" class="">check js</div>
.
.
</body>

I also tried it without class="", but that didn't work either.

Does someone have a clue what I'm doing wrong?

Avatar
theAlien

17 March 2009 at 2:07am Community Member, 131 Posts

Solved it myself.
[url]http://docs.jquery.com/Attributes/html[/url] says the scripts should be in the head.
But as UncleCheese and willr point out [url=http://silverstripe.org/template-questions/show/252020?start=0#post252034]here[/url] SilverStripe wants them in the body, below all content. So now I have:

</div>
<script src="jsparty/jquery/jquery.js"></script>
<script>
   $(document).ready(function(){
      $("div#Form").addClass("hidden");
   });
</script>
</body>
</html>


And everything is working fine now.