Jump to:

3392 Posts in 976 Topics by 852 members

Template Questions

SilverStripe Forums » Template Questions » Detecting Javascript SOLUTION

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1277 Views
  • Aram
    Avatar
    Community Member
    598 Posts

    Detecting Javascript SOLUTION Link to this post

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

  • dio5
    Avatar
    Community Member
    501 Posts

    Re: Detecting Javascript SOLUTION Link to this post

    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.

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: Detecting Javascript SOLUTION Link to this post

    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

  • dio5
    Avatar
    Community Member
    501 Posts

    Re: Detecting Javascript SOLUTION Link to this post

    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 .

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: Detecting Javascript SOLUTION Link to this post

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

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: Detecting Javascript SOLUTION Link to this post

    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

  • theAlien
    Avatar
    Community Member
    131 Posts

    Re: Detecting Javascript SOLUTION Link to this post

    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?

  • theAlien
    Avatar
    Community Member
    131 Posts

    Re: Detecting Javascript SOLUTION Link to this post

    Solved it myself.
    http://docs.jquery.com/Attributes/html says the scripts should be in the head.
    But as UncleCheese and willr point out here 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.

    1277 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.