Graceful Javascript Degradation - External Source Files

Question

A simple question for a coder well versed in JS.

I am creating a Wordpress site that uses JQuery AJAX methods, reloading either my entire content area when the top navigation link is clicked, or my main content area when the navigation bar link is clicked. I want to be sure that an AJAX call is only issued if the user's browser supports JavaScript. I found some reference materials here and on other sites, which, referring to the appearance of the script from the outside, a browser that is not equipped with JavaScript, simply ignores all JS files. That's for sure? I reviewed using php:

$my_arr = get_browser(null,true);if $my_arr['javascript'] == 1 { echo '<script type="text/javascript" src="path/to/script"'; } 

The UX I'm going for is if JS is enabled, then start AJAX calls; if JS is disabled, just send the user to the requested page.

eg.

  <?php /** * The template for displaying all pages. * $ajxy = $_GET['ajxy']; if(!is_null($ajxy)) { $ajax_code = $ajxy; } if(!$ajxy) { get_header(); } ?> <?php if(!$ajax_code) { ?> <div id="primary"> <div id="content" role="main"> <div class="container_12" id="contentWrapper"> <?php } ?> <div id="contentContainer" <?php if($ajax_code) { echo 'class="ajxn"'; } ?>> <?php while ( have_posts() ) : the_post(); ?> <div class="grid_8" id="contentGrid"> <?php get_template_part( 'content', 'page' ); ?> </div> <?php get_sidebar(); ?> <?php endwhile; // end of the loop. ?> </div> <?php if(!$ajax_code) { ?> </div> </div><!-- #content --> </div><!-- #primary --> <?php } ?> <!---My Ajax Loading Script --> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/ajxy.js"></script><!---My Ajax Loading Script --> <?php if(!$ajxy) { get_footer(); } ?> 

and script:

  function ajxnOff(list, ajxnCode, wrapper, container) { jQuery(list).click(function(e) { e.preventDefault(); var $lnkGoz = jQuery(this).attr("href"); var $lnkGozAjx = $lnkGoz + '?ajxy=' + ajxnCode; var $ajxyContainer = wrapper; var $ajxyCurThing = container; $ajxyCurThing.fadeOut(400, function() { $ajxyContainer.html('<div id="loaderA"></div>'); jQuery("div#loaderA").fadeIn(400); jQuery.ajax({ url: $lnkGozAjx, success: function(data) { jQuery("div#loaderA").delay(2000).fadeOut(400, function() { $ajxyContainer.html(data); jQuery("div.ajxn").fadeIn(400); jQuery.remove("div#loaderA"); }); } }); }); }); } jQuery(document).ready(function() { ajxnOff(jQuery("ul#topNavList a"), 1, jQuery("div#contentWrapper"), jQuery("div#contentContainer")); ajxnOff(jQuery("ul#sidebarNavList a"), 2, jQuery("div#contentGrid"), jQuery("div#contentPageContainer")) }); 

I learned to program on my own for about 6 months and do not have books on this issue, so any help from experts is very much appreciated here.

Answer 1

Yes, if the user's browser does not support JS or JS is disabled, script tags are essentially ignored. It does not hurt to include them, no matter what, you just need to plan your site with what happens when they are not used.

As for AJAX and page reloading, you simply encode your site as if AJAX does not exist, i.e. all links should have corresponding href attributes indicating where they should go. If JS is enabled, you attach your AJAX to links through its onclick handler and prevent the default action by returning false from any function that processes the click event.

Answer 2

Here is a simple template for unobtrusive ajax navigation with fallback links other than ajax.

In your HTML:

 <a class="ajaxnav" href="page.html">Text</a> 

In the script:

 $(".ajaxnav").click(function(event) { event.preventDefault(); // do ajax nav here; // URL is in event.currentTarget.href, modify it however necessary }); 

If javascript is not supported, the script simply does not run and you are left with standard web bindings with valid HREFs. If javascript is supported, the script replaces the entire link to the "ajaxnav" link with your ajax click handler. Easy as a pie.