Using swipe.js with $.ajax() content

Question

I am using Brad Birdsall's Swipe.js plugin as a touch friendly, library agnostic plugin for a slider in my current mobile project. When I populate the slider on page load, everything works great. However if I try and populate the slider with $.ajax() on click, the slider will receive all of the slides, but is not responsive to touch events, or any of the methods associated with the slider.

The general slider HTML structure looks like this:

<div id="slider" class="swipe">
  <ul>
    <li style='display:block;'>
      <img src="/someImageUrl.jpg" />
    </li>
    <li style='display:none;'>
      <img src="/someImageUrl.jpg" />
    </li>
  </ul>
</div><!-- .swipe -->
<nav>
  <a href="#" class="prev" onclick="slider.prev();return false;">PREV</a>
  <a href="#" class="next" onclick="slider.next();return false;">NEXT</a>
</nav>

I am using an $.ajax() response to populate the <li><img src="..." /></li> on a click event handler in my doc.

Here's my JS:

$.ajax({
  url: "process.inc.php?vehicleId=" + vehicleId,
  type: "GET",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (data) {
    var swipeSlides = "";
    for (i = 0 ; i < data.length; i++) {
      var photoUrl = data[i].photoUrl;
      var photoArray = photoUrl.split("|");

      if (photoArray.length <= 1) {
        list += "<img src="+photoArray[i]+" />"
      } else {
        for (i = 0; i < photoArray.length; i++) {
          swipeSlides += "<li><img src='"+photoArray[i]+"' /></li>"
        }
        var prevNext = "<nav><a href=\"#\" class=\"prev\" onclick=\"slider.prev();return false;\">PREV</a><a href=\"#\" class=\"next\" onclick=\"slider.next();return false;\">NEXT</a></nav>"
        var sliderElement = $(self).parent().find("#data #slider ul");
        sliderElement.find("li, nav").remove();
        sliderElement.append(swipeSlides, prevNext);      
        $.getScript('../assets/js/swipe.js');
        var slider = new Swipe(
          document.getElementById('slider')
        );            
      };
    };

  } // end success function
}); // end AJAX

This will sucessfully populate my page with all of the necessary content, but when I click one of the previous or next puttons, I get this error in my console:

Uncaught TypeError: Object #<HTMLCollection> has no method 'next'

Which tells me that my script is not being loaded into the page appropriately, or, my slider is not being instantiated at the proper time.

I have tried executing my code inside of the $.getScript() method like this:

$.getScript('../assets/js/swipe.js', function(data, textStatus, jqxhr) {
  for (i = 0; i < photoArray.length; i++) {
    swipeSlides += "<li><img src='"+photoArray[i]+"' /></li>"
  }   
  var prevNext = "<nav><a href=\"#\" class=\"prev\" onclick=\"slider.prev();return false;\">PREV</a><a href=\"#\" class=\"next\" onclick=\"slider.next();return false;\">NEXT</a></nav>"
  var sliderElement = $(self).parent().find("#data #slider ul");
  sliderElement.find("li, nav").remove();
  sliderElement.append(swipeSlides, prevNext);  
  var slider = new Swipe(
    document.getElementById('slider')
  ); 
});

Or even just using a good old fashioned <script src="/assets/js/swipe.js"></script> before my jQuery script executes, and I keep getting the same exact error.

If anyone has any suggestions I will be forever grateful.

score 0 · Answer 1 · answered Oct 04 '12 at 19:28

I figured out the problem.

In order to make the instantiation of the Swipe element recognized, I needed to use $.globalEval() inside of the $.getScript() function.

Heres my working code:

$.ajax({
  url: "process.inc.php?vehicleId=" + vehicleId,
  type: "GET",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (data) {
    var list = "";
    for (i = 0 ; i < data.length; i++) {
      var photoUrl = data[i].photoUrl;
      var photoArray = photoUrl.split("|");

      if (photoArray.length === 1) {
        list += "<img class='noPhoto' src="+photoArray[i]+" />";

        var parent = $(self).parent().find("#data");
        parent.find("table, .noPhoto").remove();
        parent.append(list);

      } else { 

        list += "<div id=\"slider\" class=\"swipe\"><ul>";

        for (i = 0; i < photoArray.length; i++) {
          list += "<li><img src='"+photoArray[i]+"' /></li>"
        }   
        list += "</ul><nav><a href=\"#\" class=\"prev\" onclick=\"slider.prev();return false;\">PREV</a><a href=\"#\" class=\"next\" onclick=\"slider.next();return false;\">NEXT</a></nav></div>";
        var parent = $(self).parent().find("#data");

        parent.find("table, div").remove();
        parent.append(list); 

        $.getScript("../assets/js/swipe.js", function(data, textStatus, jqxhr) {
          $.globalEval("var slider = new Swipe(document.getElementById('slider'));") 
        });   
      };
    };
  } // end success function
}); // end AJAX

Hopefully this helps someone else down the road.

score 0 · Answer 2 · answered Feb 18 '13 at 15:14

Why use getScript in the first place? Append it to your other javascript files as (before your javascript file), then new Swipe() should work.

Also, if you want to call functions of your Swipe object later, you should declare the var outside your ajax function. Example:

var mySwipe;
document.ready(function(){
  //...
});

function pullFromAjaxFunction() {
  //... do some more stuff
  mySwipe = new Swipe(...)
}

Using swipe.js with $.ajax() content

2 Answers2