jQuery Mobile & TouchSwipe jQuery Plugin Errors

Question

I'm trying to use the TouchSwipe plugin from Skinkers Labs in combination with jQuery Mobile on a mobile website that I'm creating that also utilizes responsive design.

TouchSwipe: http://labs.skinkers.com/touchSwipe/

The situation I'm running into is I can get the TouchSwipe plugin working fine with a normal page on a mobile device but once I add the jQuery Mobile js file the TouchSwipe functionality no longer functions.

This is the JS error that I receive (on line 3256 of jquery-1.7.1.js):

TypeError: 'undefined' is not a function (evaluating '( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler ) .apply( matched.elem, args )')

Here is where I include the JavaScript within 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 of the helper functions within the Image Swipe example code from the TouchSwipe site:

http://labs.skinkers.com/touchSwipe/demo/image_scroll.php

Any idea why I'm seeing this error? As soon as I remove the jQuery Mobile javascript file the plugin works fine but I need jQuery Mobile for this site.

I'll gladly post more code if you'd like. Let me know if you have any questions or need more info.

Thanks in advance for your help!

score 8 · Answer 1 · answered Jul 16 '12 at 02:20

You're going about it the wrong way. You're loading JQM after TouchSwipe, though TouchSwipe is supposed to override JQM. It's like building the windows before the walls.

I've tested and things work normally without any need to change any naming. All you need to do is to include JQM before 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 was my problem as well. Works flawlessly. Thanks! – AzurGroup Apr 10 '14 at 19:29 — AzurGroup, Apr 10 '14 at 19:29

score 1 · Answer 2 · answered Apr 22 '12 at 20:40

1

This is due to a clash within the jqm namespace. Both touchSwipe and jqm use the same 'swipe', 'swipeleft', etc names. I changed the names in the touchSwipe plugin with a quick search-replace in order to get rid of the problem. Obviously this is not an ideal solution, but it works.

answered Apr 22 '12 at 20:40

Andras

19
1

1

This is like building the windows for a building, then the walls, then wondering why the windows fell on the floor. You need to override JQM with TouchSwipe, but you're doing it the other way around due to the order in which you're loading the files. Read my answer. – Amin Ariana Jul 16 '12 at 02:22

score 1 · Accepted Answer · answered Mar 25 '12 at 18:50

I ended up giving up on TouchSwipe and using the iosSlider Plugin which seems to work much better and I did not run into any problems while using it in combination with jQuery mobile.

http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/

Hopefully this will help someone else with the same issue.

jQuery Mobile & TouchSwipe jQuery Plugin Errors

3 Answers3

Linked