1

What I'm trying to do is have one page that serves different markup based on if JS is enabled or not. My idea is to have a base group of content served on the intial page load. There would also be some javascript function as the page is loading that submits an ajax call to server with post data letting the server know javascript is enabled. On completion of the ajax call, the page would refreshed/served again using the post data to know JS is enabled and serve the base content along with JS enabled content. My goal is to make this as seamless as possible.

*Edit: I should add I would like to maintain one page. So the page would just be refreshed with JS content. Not redirect to a new page.

My question is two fold, is this possible, if so, could I get some direction on the code I need to achieve this?

Improve this question

4 Answers 4

Reset to default
3

What you want to do is load the 'non javascript' markup inside a container, like <div id="container"> DEFAULT/FALLBACK MARKUP HERE </div>. Then, on document ready, make an ajax call to fetch the 'javascript enabled' markup and populate the #container div with it. It will only be populated if javascript is turned on :)

Example:

$(function(){

    $.ajax({
        url:'/javascript_enabled_html.php',
        dataType:'html',
        /* set your other params...*/
        success:function(data){
            $('#container').html(data);
        }
    });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Pretty much what I was going to suggest. Use AJAX to call a PHP script that will load what you want for the JS version and replace the old stuff on the page. It will only work with JS enabled.
Thanks AlienWebguy, I have two questions about this approach. Do you think the content inside #container would still be crawl-able by spiders. If not, that would be an issue. Also, I worry about using jquery plugins that use the document ready function to trigger the functions. I dont think content pulled into #container via ajax would be able to use $(document).ready(function() { since it would have already fired before the content is pulled in? My goal would be to maintain SEO, and ability to use the jquery plugins I currently use without any alterations.
No, it will not be crawlable by spiders - no ajax call will pull in crawlable data. Regarding the document.ready, it will work, don't worry :)
Ok, is there a way to submit post data through ajax on page load, then have the page reload/refresh itself on success of the ajax call and have the submitted post data accessible on the reloaded/refreshed page?
No but you can implode the $_POST and send it as a query string through a window.location pointer. Example if $_POST['a'] == 'foo' and $_POST['b'] == 'bar', you'd do <?php $querystring = implode(',',$_POST); ?> then $(function(){ window.location = window.location.href + ? + <?=$querystring?>; /* mypage.com?a=foo&b=bar*/ });
2

You can't do it in a single step, but if you don't mind an intermediate page, you can have something like:

<noscript>
   <img src="js-is-disabled.php" />
</noscript>

and

js-is-disabled.php:

<?php
session_start();
$_SESSION['js_is_off'] = true;

This has the advantage of running on any browser which has JS disabled, as long as it's modern enough to recognize the <noscript> tag.

The alternative is to have a small snippet of JS fire off an AJAX request to call a script which flags JS as being available in the session. This might be a bit more reliable, since you'd only get this happening if JS is working properly.

Improve this answer

1 Comment

Thanks Marc, I understand that there is no way for PHP to test if JS is enabled on the first load. I like your alternative idea of having JS making an ajax call to note it as being available in the session.
2

Server-side scripts don't have access to this information, since it's not passed with the HTTP headers. An interesting solution I just found would be to have two pages. The first one has a javascript-fired redirect to the second page. So if they are hitting the second page, you know they have javascript enabled.

Another solution relies on non-valid HTML and may not work on all browsers. Use a <noscript> tag and put a meta refresh element inside it, like this:

<noscript>
   <meta http-equiv="refresh" content="0; url=http://example.com/nojavascript.php">
</noscript>

Then have another redirect that's fired onload in javascript that points to the javascript page. If it goes to the nojavascript.php they don't have js enabled, if it goes to the second, they do.

But I would just assume they don't have it turned on unless they get redirected by js, and build out the first page accordingly.

Improve this answer

Comments

0

It can but it shouldn't. The only pages you should serve assuming JS is there are the ones called with Ajax.

And if you ever really need to know (which should normally never happen), you should assume JS is OFF until you get the information that it is ON.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.