Graceful Javascript Degradation - external source files

Question

Easy question for a coder well-versed in JS.

I'm building a Wordpress site that uses jQuery AJAX methods, reloading either my entire content area when a top nav link is clicked or my main content area when a sidebar nav link is clicked. I want to be sure that the AJAX call is only issued if the user's browser supports JavaScript. I found some reference material here and on other sites that said by referencing my script externally, a browser unequipped with JavaScript would simply ignore all JS files. Is this accurate? I considered 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 fire AJAX calls; if JS is disabled, just send the user to the page they've requested.

e.g.

    <?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 the 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've been learning to code on my own for about 6 months and don't have any books on the subject, so any help from the experts around here is greatly appreciated.

Answer 1

Here is a simple pattern to do unobtrusive ajax navigation with fallback to non-ajax links.

In your HTML:

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

In your 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 is simply not run, and you're left with standard web anchors with valid HREFs. If javascript is supported, the script replaces all "ajaxnav" link handling with your ajax click handler. Easy as pie.

Answer 2

Yes, if the user's browser either doesn't support JS or has JS disabled, script tags are essentially ignored. It doesn't hurt to include them no matter what, you just have to plan your site for what happens when they're not utilized.

As far as AJAX versus page reload goes, you simply code your site as if there were no AJAX, i.e. all links should have appropriate href attributes point to where they should go. If JS is enabled, you attach your AJAX to the links via its onclick handler and prevent the default action by returning false from whatever function handles the click event.