Loading...

Search jQuery

Search

jQuery Forum

strange swipe behaviour in JQM 1.4.5

in jQuery Mobile • 8 years ago

I have the following behaviour: (it is reproducible, and I tried different ways of implementation with the same results):

I have implemented two very basic functions recognizing leftswipe and rightswipe. both functions simple do an output to the console for now.

The behaviour I have is that only every second swipe in the same direction produces an output.

So I added functions for the events tap, taphold, vmouseup, vmousedown, vmouseout, vmousecancel.

Everything seems to be behaving normal but for one interesting point (omitting all but the swipe outputs):

I swipe right, no output, swipe right, swipe RIGHT output, swipe right, no output, swipe right, swipe LEFT output, swipe right, no output, swipe right, swipe RIGHT output.

If I do the same with swiping left, I only get every second or third swipe RIGHT output, all others are simply no output.

The environment I am using: JQM 1.4.5; jquey 1.10.2, cordova 4.1.2, developing against galaxy nexus on android 4.4.4

this is my html header:

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/swipe.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>

this the code segment in swipe.js:

$(document).bind("mobileinit", function() {
$(document).on('swiperight', 'div.ALMainPage', function() {
// Do something when the user swipes right on the page
var $page = $(this); // It's convenient to have this in a variable
if (ALerror) console.error('swipeRight');
});
$(document).on('swipeleft', 'div.ALMainPage', function() {
// Do something when the user swipes left on the page
var $page = $(this); // It's convenient to have this in a variable
if (ALerror) console.error('swipeLeft');
});

I have verified that the "swipe" function works on my phone correctly (ruling out android, screen, I/O) by trying the swipe navigation example on the demo webpage.

I'd appreciate if you could give me an idea what to try to narrow down the issue. I assume it is some form of conflicting event in my code.

Let me know if you need more info or if I can try something else.

1

Replies(31)

jakecigar

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

It’s not in the code you shared. http://plnkr.co/edit/q2qI4ITNWviNicKwK7pB?p=preview is pretty much what you shared.

JΛ̊KE

watusiware

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

What is swipe.js ?

jQuery Mobile has built-in support for swipe events. You don't need any extra library.

jakecigar

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

swipe.js is the OP’s script file.

JΛ̊KE

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

@ watusiware:

Originally I had the functions handling the swipe in my main js file.

Then I came across a post that said to load and attach the event handling functions prior to mobileinit event.

As this event is fired he moment jqmobile is loaded, this portion of the script needed to be loaded earlier then my main js file. hence the second file and the loading sequence jquery, script.js, jqmobile.

@ Jake:

will have to check what is missing. will do so later and update the code. In my app, I get events, not nothing.

Would it make a difference if I bind the swipe functions outside the mobileinint event to the html elements?

Thanks

Dirk

watusiware

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

The placement of your swipeleft delegation (not binding) is unconventional.

mobileinit is triggered once, after jQuery Mobile has been initialized. So, although you load the file before jQuery Mobile, the callback is called only once JQM is initialized. That's the reason for loading it BEFORE JQM. It's the earliest opportunity to set options, and so should be used for setting any JQM options that your site needs globally.

While you CAN do binding and delegation inside of the mobileinit callback, or call any JQM code (since JQM is then loaded) I wouldn't. I'd use it only for it's intended purpose of setting global options.

BTW, I would not put mobileinit in a file called swipe.js. It is confusing! I usually put this either directly in the <head>, since it is typically small, or else give it an appropriate name - like jqm-init.js.

----

BTW, there is no reason to prepend element tags to CSS class selectors, unless your purpose is to distinguish between elements with different tags. e.g.

<div class="a">

<span class="a">

If you want to select ONLY the <div>, use a selector of div.a This is the only good reason to ever use a tag in front of a CSS class in a selector.

If you simply want everything with class "a", just use selector .a

watusiware

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

Jake, does that Plunk work at all for you? There's something wrong in <head> . I don't see ANYTHING in the output until I remove <head> . narrowing it down...

jakecigar

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

My plunk worked for me. I just tossed it together. Since there was no HTML from the OP I made some up.

JΛ̊KE

watusiware

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

Your plunk does not work for me. I do not see anything in the content pane.

I think there is something wrong with Plunker or my browser. I tried reproducing the demo from scratch. No success.

watusiware

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

I tried a different browser. First Safari, now Chrome.

The preview pane is blank.

In any case, I do not see anything wrong with OPs code, and I did have it briefly working on Plunker. It is OK - if odd - to do the delegations where they are done.

Interesting.... While typing this, I just got a frowny-face icon in the preview pane. I think maybe there is some issue with the jQuery CDN.

No, I think Plunker is borked:

sorry, can't really properly clipboard the Chrome errors. First one occurs 11 times, and is in Plunker itself.

Uncaught TypeError: undefined is not a function

http://run.plnkr.co/DbldeRS0d8jexrKn/ Failed to load resource: net::ERR_TIMED_OUT

jakecigar

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

The preview pane just has the word stuff in it.

Me thinks you have destroyed your computer.

Doing the swipes inside mobileinit is the same as doing them outside of any handler. I think it is strange to use mobileinit too.

JΛ̊KE

watusiware

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

The preview pane just has the word stuff in it.

I know. I don't see it. I added the start of the Gettysburg Address. Don't see that either. Not until I remove <head> . Then I put it back, one line at a time, it works - until it doesn't. :(

We are probably both testing on desktop with a mouse. (I am).

One thing to watch out for is the swipe sensitivity and threshold setting. The default settings can be problematical of higher-density devices.

http://api.jquerymobile.com/swipe/

jakecigar

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

You can download the plunk and play with it without plunker being involved. Does that work?

JΛ̊KE

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

Using mobileinit to attach listeners isn't a good idea. That even fires before "ready", even jQuery function won't work inside mobileinit.

jakecigar

Re: Re: strange swipe behaviour in JQM 1.4.5

8 years ago

$(document).on('swiperight', 'div.ALMainPage', function() {

will work.

JΛ̊KE

watusiware

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

As long as jQuery is loaded, you can attach delegation to the document. Even if they are for synthetic events. The event name is just that - a name. You register for a callback, and you will get the callback when some code triggers that event on document.

Omar is correct, though, that you would not be able to BIND to elements within mobileinit. When mobileinit is called, the document content in <body> has not yet loaded! Nor can you delegate to some element (rather than document), because the element doesn't yet exist.

This will work in mobileinit:

$(document).on(...

This will not:

$('.some-selector').on(...

Anything below document needs to be bound after the page (not document, even) is ready.

jakecigar

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

No.

Document is available as soon as the page is read in, and before the first bit of the page is parsed.

JΛ̊KE

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

Hey Guys,

just came back.

I have tried the

$(document).on('swiperight', 'div.ALMainPage', function() {

implementation in the main js, in the deviceready app event of cordova as well as in the onloadstop.

Nothing did work.

The html code Jake posted is very close to what I am using (it's a multipage document, the swipe event is getting handled in one of the later pages. I have tried attaching it to the page, ui-content or the most inner div. No difference.

Most of the swipe.js file is actually simply the jquerymobile swipe demo script copied and pasted into it. I just added the event handlers to produce the console output.

I was thinking about the threshold settings as well.

Also I found mentioning that the swipe event is a problem on android.

In order to evaluate both of these, I loaded the jquerymobile swipe demo page on the same phone in the browser. If either of these was causing the issue, I should see some unwelcome behaviour on the demo page as well. But all worked fine.

So I don't think threshold settings or the reported android issues are playing a key role.

I will change the implementation to the following: I will deactivate the code in the mobileinit (actually simply deactivate the loading of this script) and attach the handlers to the elements on the transition to the relevant page (not even have them active from the beginning.

jakecigar

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

Please update the plunker so that it reflects your page.

JΛ̊KE

watusiware

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

Jake, I think we are saying the same thing.

$(document), yes.

$(".some-selector"), no.

You can bind (or delegate to) to $(document) even before the page is parsed.

If you want to bind or delegate to some element, the element needs to be parsed and inserted into the DOM first! You need at least document ready.

jakecigar

Re: Re: strange swipe behaviour in JQM 1.4.5

8 years ago

Good! and we all agree that mobileinit is not needed.

JΛ̊KE

watusiware

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

The html code Jake posted is very close to what I am using (it's a multipage document, the swipe event is getting handled in one of the later pages.

That's way different from what you said initially.

Make a demo.

Re: Re: strange swipe behaviour in JQM 1.4.5

8 years ago

catch 22 is that my app runs in the cordova framework.

The swipe events should not be different when linked to an element, regardless of this element being part of a multipage or a single page html. Or am I wrong here?

A you can see in the attachment to my last post, the vmouse events are all firing perfectly fine. In most cases, the swipe events are not fired.

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

Like said, Jakes plunker is very close. The main difference between what I have and Jake's code is that it is a multipage html file, and I set the page active not as the initial one.

I updated the plunker. Also ran a compile and did some swipes.

I completely deavtivated the "swipe.js" file, copied the swipe event handling into the section of the main js code that sets the relevant page active.

On plunker, I moved the call for the script.js file after jquerymobile call, changed script.js to be without mobileinit, changed the output from console to alert box; Also changed the page to be multipage (simplified).

Here is the forked plunker: http://plnkr.co/edit/IC3DQaK3PMzbcnQcsKZw?p=info

attached is my console output after a few swipes:

The first portion is left swipes only. The second portion is right swipes only.

It is obvious that the virtual mouse events fire as expected. The only portion missing is the swipe events.

Attachments

log.txt
Size : 41.79 KB Downloads : 343 Download

watusiware

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

I really think Plunkr is broken right now. I'm afraid I see no content in your Plunk. I do NOT see the link.

As before, if I remove everything in <head>, now I see the link and the heading. (Of course, without JQM CSS, they both show on one page.)

Since this is a multi-page document, you can test it using jsFiddle.

Edit: and then I reloaded the document, and now I see the link. Plunkr is having problems. I see the same behavior with the Plunk for the following, and Omar noted it was not working:

https://forum.jquery.com/topic/manually-add-hash-changes-using-custom-part-page-transitions

watusiware

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

This jsFiddle works for me:

http://jsfiddle.net/1swveqp6/1/

I removed everything irrelevant to the problem. I don't think there was anything wrong with it in the first place, though. Plunkr is broken today.

Don't use alert() for debugging.

Keep in mind that some console logs will not show the same message multiple times. Safari, for example, will show a count. That is, if the same message is repeated twice, you will see a count of "2", 10 times you will see a count of "10".

watusiware

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

catch 22 is that my app runs in the cordova framework.

There's no Catch22. Cordova makes no difference to jQuery Mobile. The best approach is usually to get it working in a browser first, then drop your content into Cordova once it does.

Don't use any Cordova events for JQM code. They mean nothing to JQM. page-specific code should either go in the page itself, inside the < div data-role="page> just before the closing </div> or else needs to be wrapped in some page event callback - typically pagecreate or pageinit .

If Cordova tells you to use some Cordova event for something Cordovish... then do what the Cordova documentation tells you. But has nothing to do with JQM.

I do not advise using multi-page documents, but that is not your problem here. Multi-page documents should be reserved for very small sites that will never grow. I've seldom encountered one of those...

Using multi-page documents is the #2 most common JQM mistake, IMO, right behind using IDs. Both are very costly to fix if you build out a site that way, and then have to fix it later.

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

Jon,

my "site" will be staying very small, as I use it as presentation layer in an app, and not as a webpage.

The fiddle works, and I only changed it to "alert" on the plunker for these test purposes. I usually do all these statements to the console, and within an if that I can toggle on or off (for debugging). There are probably better ways, but I have to get back into the programming. I did a bit back between 99 and '04, but not much since. And a lot has changed especially with the tools.

That is the "weird" I was referring to: I don't think the code is wrong, but somehow in my implementation, I have something weird happening. As in my original post said, I could clock the swipe event firing exactly on every other time it should and additionally firing in the alternating direction, although the swipe has been always in the same direction.

This just did dtrike me as odd. And hence the post.

jakecigar

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

I took Jon’s last fiddle and added my own log function. Can you wrap that code up with Cordova to see if you get the swipes?

JΛ̊KE

watusiware

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

Let us know what platform(s) you are testing on with Cordova.

Both iOS and Android support remote debug using the inspection tools in desktop browsers (Safari for iOS, Chrome for Android). You either use a simulator or plug your device in via USB, and the you can use all the same inspection/debug tools that are available for desktop. This includes both browser and hybrid apps such as PhoneGap/Cordova.

I write hybrid apps using Rhomobile Rhodes (somewhat like Cordova). I would be lost without remote inspection.

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

I am using a laptop as coding platform, running ubuntu 14.04.

The phone is a Galaxy Nexus on android 4.4.4.

I have to look into the remote inspection tools.

And yes, I came across several instances remote inspection would have been ideal.

Like said, the tools have greatly changed since I last programmed.

Lots to catch up.

Where would I look for these inspection tools? are they a plugin for the chrome browser on my development machine?

watusiware

Re: strange swipe behaviour in JQM 1.4.5

8 years ago

The debug/inspection tools are built-in to your browser. Every major desktop browser has them. For some browsers, you may have to change a setting in order to enable them. Goggle is your friend.

Play with it on a simple local web page first to get used to the tools. Then learn how to connect to your remote device.

To connect to your remote device, of course, you cannot use "any browser". Safari on iOS for iOS. Chrome for Android.

Major functionality:

- Inspect source or DOM

- inspect CSS cascade

- Find HTML source by tapping/clicking in browser

- find element in browser window by highlighting in DOM

- modify CSS or HTML on the fly, in the inspection tool

- set breakpoints in JS code, inspect variables, stack frame, etc.