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   1414 Views

Avatar
Carbon Crayon

Community Member, 598 Posts

1 February 2009 at 4:42am

Edited: 01/02/2009 5:55am

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

Community Member, 501 Posts

1 February 2009 at 5:38am

Edited: 01/02/2009 5:55am

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

Community Member, 598 Posts

1 February 2009 at 5:54am

Edited: 01/02/2009 5:57am

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

Community Member, 501 Posts

1 February 2009 at 5:58am

Edited: 01/02/2009 6:00am

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

Community Member, 598 Posts

1 February 2009 at 6:03am

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

Avatar
Carbon Crayon

Community Member, 598 Posts

1 February 2009 at 7:26am

Edited: 01/02/2009 7:31am

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

Community Member, 131 Posts

17 March 2009 at 1:55am

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

Community Member, 131 Posts

17 March 2009 at 2:07am

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.