Question

I’m trying to conditionally load a .js file depending if isTouchDevice is true. And right after add a class to #slider that defines the type of slider that is displayed and the options required for each. I can’t figure out what I’m doing wrong and I’m open to other suggestions on how to accomplish this.

Update: https://github.com/woothemes/FlexSlider
http://swipejs.com/

JS:

$(document).ready(function() {
function isTouchDevice() {
return (typeof(window.ontouchstart) != 'undefined') ? true : false;
};

if (isTouchDevice == true) {//Hook up Swipe

    $.ajax({
      type: "GET",
      url: "swipe.min.js",
      dataType: "script"
    }).done(function() { //Hook up Swipe
        $("#slider").addClass("swipe");
        var slider = new Swipe(document.getElementById('slider'));
    });
};

else {//Hook up Flexslider

    $.ajax({
      type: "GET",
      url: "jquery.flexslider.js",
      dataType: "script"
    }).done(function() { //Hook up Flexslider
        $("#slider").addClass("flexslider");
        $('.flexslider').flexslider({directionNav: false});
};
});

HTML Markup:

<div id="slider">

     <ul class="slides">

         <li>
             <img src="images/loch-nevis.jpg" alt="" />
         </li>

         <li>
             <img src="images/snow.jpg" alt="" />
         </li>

         <li>
             <img src="images/iceland.jpg" alt="" />
         </li>

     </ul><!-- end slides -->

</div><!-- end slider -->

Answer 1

How about using the jQuery getScript method?

if (isTouchDevice == true) {//Hook up Swipe
    $.getScript("swipe.min.js", 
        function() {
            $("#slider").addClass("flexslider");
            $('.flexslider').flexslider({directionNav: false })  // Removed errant ","
        }
    );
}