Develop Reference

Innerhtml in a div tag not working

I'm trying to figure out an issue on a site which has just stopped working.
It's a bit tricky as I don't have server access at the moment, and it's a system I having to get my head around quickly.
basically a section of what looks like a javascript panel on a site has disappeared - and I'm trying to work out why.
I'm using firebug to try and track this down.
It seems to be anything within "innerhtml" on a tags is being ignored, if I put some content outside of innerhtml it shows!
eg
<div id="slide-browser-country-info" innerhtml="<div><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Verdana} span.s1 {letter-spacing: 0.0px} --> <p>In Spanish schools English lessons are mandatory. Good English is seen as such a key skill that many children take extra English lessons at privately-run Academia de Inglés. While you’ll need advanced qualifications and many years’ experience to find work in state-run schools, the Academias often employ less experienced teachers. It’s also worth thinking about teaching private English lessons.</p></div>">this will show</div>
Here's the problem page http://www.teflcourses.fr/tefl-jobs-abroad/
and here's an example of what it should be doing http://www.onlinetefl.com/tefl-jobs-abroad/
I can see the content is actually there in the code, so I'm just trying to figure out what could be causing innerhtml to be ignored.

You use innerHtml via javascript, not declaration like you have attempted here. Put the content within the div tags ur dynamically added with a javascript function.

`I'm trying to figure out an issue on a site which has just stopped working.`
After opening the links you've provided, I have observe how the browser display this page:
This site is not working with the latest browser.
This site was test during development with IE7 and below.
This site is working in IE6 and EI7
It seems to be anything within "innerhtml" on a tags is bieng ignored,
if I put some content outside of innerhtml it shows!
As with my observation puting the contents to innerHTML attribute is not working with the latest browser. I guess innerHTML attribute is deprecated\remove\not included\not valid with latest. But of course you can still use innerHTML as a property.
Then upon browsing on the js code, I find out that problem was cause by this.
jQuery( '#slide-browser-country-list' ).attr( 'innerHTML', cList );
This should be:
jQuery( '#slide-browser-country-list' ).html(cList);
Note: My search return more than one using this function.

Javascript toggle enabled/disabled

What's the best way to toggle a "Please have Javascript enabled" warning?
Currently I've got something like this:
<div id='JSwarning'>ONLY SQUARES DON'T USE JAVASCRIPT</div>
to which I then apply .style.display = "none".
This shows the warning on every page for a little while until it loads. There must be a more graceful way. Can I do it with PHP?
(BTW, get_browser() is not the solution I'm looking for.)
//EDIT
Thanks everyone, that does the trick. Incidentally, to get the page to validate (XHTML 1.0 Strict), I needed to place the child node(s) in a block container.

<script></script>
<noscript>Please enable Javascript.</noscript>
http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.3.1

I think you're after the noscript tag:
<noscript>ONLY SQUARES DON'T USE JAVASCRIPT</noscript>
It's a browser convention, so you don't need to hide it when js is disabled (the browser does this automatically).

use the noscript tag
<script language="javascript">
document.write("Hello World!");
</script>
<noscript>
You need to enable javascript to view this page!
</noscript>

Does you apply this rule when DomContentLoaded is fired?
There is <noscript> too but it seems to me chrome ignores it.

The best way is to … not. Build on things that work.
JavaScript support is not a binary state. People can turn it on. People can turn it off. JS files can fail to load (because a server is down, or blocked). JS can be selectively enabled (e.g. with the Firefox NoScript extension).
Better to use progressive enhancement.

How does one properly test a javascript widget?

So, I've written a little javascript widget. All a user has to do is paste a script tag into the page, and right below it I insert a div with all of the content the user has requested.
Many sites do similar things, such as Twitter, Delicious and even StackOverflow.
What I'm curious about is how to test this widget to make sure that it will work properly on everyone's webpage. I'm not using an iframe, so I really want to make sure that this code will work when inserted most places. I know it looks the same in all browsers.
Suggestions? Or should I just build one hundred web pages and insert my script tag and see if it works? I would hope there is an easier way than that.

Once you have confirmed that your javascript works cross-browser in a controlled environment, here are some things that might cause problems when used on an actual website:
CSS
You're using a CSS class that is already being used (for a different purpose) by the target website
You're using positioning that might interfere with the site's CSS
The elements you are using are being styled by the website's CSS (you might want to use some sort of "reset" CSS that applies only to your widget)
HTML
You're creating elements with the same id attribute as an element that already exists on the website
You're specifying a name attribute that is already being used (while name can be used for multiple elements, you may not be expecting that)
Javascript
What is the expected behaviour without Javascript enabled? If your script creates everything, is it acceptable for nothing to be present without JS?

At very basic you should make sure your widget works for following test-cases. I am sure then it will work on all web-pages -
http/https: There should not be any warning for HTTPS pages for unencrypted content.
<script> / <no-script>: What if JavaScript is disabled? Is your widget still visible?
What happens when third-party cookies are disabled? Does your widget still work?
Layout-box restrictions: When parent div element's size is less than your widget. Does your widget overflow the given size and destroys owners page?

By keeping all your Javascripts under a namespace (global object) with a very unique name, you should be pretty much OK. Also, you can simply use an anonymous function if you just want to print out something.
Similar question: How to avoid name clashes in JavaScript widgets

What do I do if Javascript is disabled by a client?

My site heavily depends upon Javascript and if I turn it off my website looks real ugly.
I want to force the user to use Javascript by show him a notification to turn it on, else prompt him that site can't be viewed.
What do I do to achieve this?

Have a look here:
noscript tag
All you can do is test that javascript is turned on or not, and show a notification that the site is best viewed with javascript turned on.

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>
Your browser does not support JavaScript!
</noscript>
Also, feel free to google 'html script tag' and see http://www.w3schools.com/tags/tag_noscript.asp

First off, be warned that forcing the user to do anything is usually considered quite rude. Lots of people keep javascript either disabled entirely or severely restricted precisely because some twerp wanted to use it to force them to do something or look at something.
With that said, you can include some text in <noscript></noscript> tags. That text will only show if the browser doesn't have javascript, or has it disabled.

For your question:
By default show the notification, and with JS + some sort of document/DOM Ready event just remove the notification. Try not to do this on window/onload because then you'll see the notification until ALL resources of that page have been loaded, which takes longer than dom ready. That way, everybody who doesn't have JS will see the message.
But ideally you'd just want to have a website that works with, or without javascript. Maybe unobtrusive javascript is a nice search term for you.

I watched an interesting talk by John Resig (The creator of JQuery) and he even mentions in his video, do not rely on Javascript.

You create a landing page that uses a <noscript> tag to inform the user that your web site doesn't work without Javascript. Then you go and pray $DEITY for forgiveness because you added to the general mire pool that is the web.

Noscript Tag, JavaScript Disabled Warning and Google Penalty

I have been using a noscript tag to show a warning when users have JavaScript disabled or are using script blocking plugins like Noscript. The website will not function properly if JavaScript is disabled and users may not figure out why it is not working without the warning.
After the latest Google algorithm shuffle, I have seen the daily traffic drop to about 1/3 of what it was in the previous months. I have also seen pages that were ranking #1 or #2 in the SERPS drop out of the results. After doing some investigating in webmaster tools, I noticed that "JavaScript" is listed as #16 in the keywords section. This makes no sense because the site has nothing to do with JavaScript and the only place that word appears is in the text between the noscript tags.
It seems that Google is now including and indexing the content between the noscript tags. I don't believe that this was happening before. The warning is three sentences. I'd imagine that having the same three sentences appearing at the top of every single page on the site could have a damaging effect on the SEO.
Do you think this could be causing a problem with SEO? And, is there any other method to provide a warning to users who have JavaScript disabled in a way that won't be indexed or read by search engines?

Put the <noscript> content at the end of your HTML, and then use CSS to position it at the top of the browser window. Google will no longer consider it important.
Stack Overflow itself uses this technique - do a View Source on this page and you'll see a "works best with JavaScript" warning near the end of the HTML, which appears at the top of the page when you switch off JavaScript.

<noscript> is not meant for meaningless warnings like:
<noscript>
Oh, no! You don't have JavaScript enabled! If you don't enable JS, you're doomed. [Long explanation about how to enable JS in every browser ever made]
</noscript>
It's meant for you to provide as much content as you can, along with a polite mention that enabling JS will provide access to certain extra features. You'll find that basically every popular site follows this guideline.

I don't think using <noscript> is a good idea. I've heard that it is ineffective when the client is behind a JavaScript-blocking firewall - if the client's browser has JavaScript enabled the <noscript> tag won't activate, because, as far as the browser's concerned, JavaScript is fully operable within the document...
A better method IMO, is to have all would-be 'noscript' content hidden by JavaScript.
Here's a very basic example:
...
<body>
<script>
document.body.className += ' js-enabled';
</script>
<div id="noscript">
Welcome... here's some content...
</div>
And within your StyleSheet:
body.js-enabled #noscript { display: none; }
More info:
Replacing <noscript> with accessible, unobtrusive DOM/JavaScript
Reasons to avoid NOSCRIPT

Somebody on another forum mentioned using an image for the warning. The way I see it, this would have three benefits:
There wouldn't be any irrelevant text for search engines to index.
The code to display a single image is less bulky than a text warning (which gets loaded on every page).
Tracking could be implemented to determine how many times the image is called, to give an idea of how many visitors have JavaScript disabled or blocked.
If you combine this with something like the non-noscript technique mentioned by J-P, it seems to be the best possible solution.

Just wanted to post an interesting tidbit related to this. For a site of mine I have ended up doing something similar to what stack overflow uses, but with the addition of a "find out more" link as my users are not as technical as this site.
The interesting part is that following advice of people aboce, my solution ditched the noscript tag, instead opting to hide the message divs with javascript. But I found that if firefox is waiting for its master password, this hiding of the message is interupted, so I think I will go back to noscript.

If you choose a solution based on replacing the div content (if js is enabled, then the div content gets updated) rather than using a noscript tag, be careful about how google views this practice:
http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353
I'm not sure google will consider it deceptive, but it's something to consider and research further. Here's another stackoverflow post about this: noscript google snapshot, the safe way