JQuery mobile plugin and jQuery TouchSwipe errors
I am trying to use the TouchSwipe plugin from Skinkers Labs in conjunction with jQuery Mobile on a mobile website I am building that also uses responsive design.
TouchSwipe: http://labs.skinkers.com/touchSwipe/
The situation I'm working in is to get the TouchSwipe plugin to work fine with a normal page on a mobile device, but as soon as I add the jQuery Mobile js file, the TouchSwipe function will no longer function.
This is the JS error I am getting (line 3256 jquery-1.7.1.js):
TypeError: 'undefined' is not a function (estimate '((jQuery.event.special [handleObj.origType] || {}). Handle || handleObj.handler) .apply (matched.elem, args)')
This is where I include JavaScript in my HTML:
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe-1.2.5.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$("#divCheckingWrapper").live("pagecreate", function(event) {
var swipeOptions = {
swipeStatus: swipeStatus,
allowPageScroll: "vertical"
};
SWIPEABLE_NODES = $("#divCheckingSlider");
SWIPEABLE_NODES.swipe(swipeOptions);
CONTENT_WIDTH= SWIPEABLE_NODES.parent().width();
MAX_NODES = SWIPEABLE_NODES.find("div.divCheckingSliders").length;
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0-rc.1.min.js"></script>
main.js includes all the helper functions in the Swipe image sample code from the TouchSwipe site:
http://labs.skinkers.com/touchSwipe/demo/image_scroll.php
Any idea why I am seeing this error? Once I remove the jQuery Mobile javascript file, the plugin works fine, but I need jQuery Mobile for this site.
I will gladly send you more code if you like. Let me know if you have questions or need more information.
Thanks in advance for your help!
I ended up ditching TouchSwipe and using the iosSlider plugin, which seems to work much better and I didn't run into any problems when using it in conjunction with jQuery mobile.
http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/
Hope this helps someone else with the same problem.
You are going on this wrong. You load JQM after TouchSwipe, although TouchSwipe must override JQM. It's like building windows in front of walls.
I tested and everything works fine without having to change any names. All you have to do is enable JQM prior to TouchSwipe.
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe-1.2.5.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
This is due to a collision in the jqm namespace. Both touchSwipe and jqm use the same names "swipe", "swipeleft", etc. I changed the names in the touchSwipe plugin using quick find-replace to get rid of this problem. Obviously not a perfect solution, but it works.