treehouse : what would you like to learn today?
Web Design Web Development iOS Development

JS Failed After DOM Update?

  • Hi there,

    I'm trying to do some JS for when you turn off Javascript in your browser. I managed to get it working, but there are some AJAX calls that are making things that should be showing up only if JS is turned off, but JS isn't turned off.

    Here's what I have:

    $('#javascript-on').show(); $('.javascript-on').show(); $('#javascript-off').hide(); $('.javascript-off').hide();

    I've never done anything like this before so I don't even know what to type in Google, hence, why I'm here :) Help?

  • I'm trying to do some JS for when you turn off Javascript in your browser

    Wait...if JS is turned off how can you use AJAX/JS?

    Am I missing something?

    I confess I am a complete JS/AJAX noob!

  • I'm guessing you're using CSS to hide #javascript-on and .javascript-on, and then you want to use jQuery to show them and hide #javascript-off and .javascript-off instead? That should work. Make a codepen if it doesn't, hard to debug with just that information.

    And yeah, this really sounds wtf weird:

    I'm trying to do some JS for when you turn off Javascript in your browser.

  • If you're using Modernizr, you should be starting your templates with .no-js class on your <html> element. Then Modernizr will remove that class via JS (or if you aren't using Modernizr you can simply write a tiny script yourself with jQuery: $('html').removeClass('no-js')).

    That means that you can change how the page looks via CSS with the .no-js hook if required. Example:

      .no-js .twitter {
          display: none;
          /* hide the twitter box for users with JS turned off since we won't be able to make our AJAX call */
      }
    
  • Sorry, that one sentence doesn't make sense.

    What I'm trying to do is show a certain div when JS is on and a certain div when JS is turned off. It works, but... when a user adds a product to their cart, the DOM refreshes, and the "javascript-off" div is being displayed which I don't want.

    So that's why I was wondering if there was a different way...

  • Go with what TheDoc said and you won't have this problem anymore :)