1

I am trying to implement a functionality which allows the user to remove messages by swiping them. The page with the messages is an external page, which means it is opened in a browser:

window.open(url, '_blank', 'location=no');

The swipe function does not work. It DOES work in desktop browsers, in mobile browsers, but not when I open a browser from within the app.

Here are my functions. I'm assigning them to multiple divs by class:

$('.message').bind('swipeleft',function(event){
     swipeleftHandler(this);
});
$('.message').bind('swiperight',function(event){
     swiperightHandler(this);
});

And this is my viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

I'm not sure what do to right now. I've tried multiple plugins(Hammer.js, touchSwipe.js, etc). They all work everywhere except in-app.

Anyone has an idea what could be wrong?

Ruud Schroën
  • 103
  • 1
  • 1
  • 10
  • This link might help. [swipe link](http://stackoverflow.com/questions/15063030/swiping-in-cordova-with-jquery-and-jgestures) – frank Jul 28 '14 at 14:12
  • Strange.. it seems some other script was making the swipe bug. It's fixed now. Still wondering why it only happened in-app. – Ruud Schroën Jul 29 '14 at 08:40
  • you could post your fix and how did you arrive at the fix in the Answer section. It might help someone who has a similar problem. – frank Jul 29 '14 at 09:09
  • Posted it, not sure if it can be called a fix though... – Ruud Schroën Jul 29 '14 at 09:35

1 Answers1

1

I'm not sure if I can call this a fix, but here it goes:

I had two script tags in my HTML. (The {{}} tags belong to web2py)

<script type="text/javascript">
    var userinfo = 1;
    function mailThisToMe(message_id){
        alert('uuid = ' + '{{=request.args(0)}}');
        $.post("{{=URL('page','mail_message_to_me')}}", { uuid: '{{=request.args(0)}}', message_id: message_id });
        console.log('mail this message id: ' + message_id + ' to me');
    }
</script>

<script>
    $(document).on('pageinit', "#messages_new", function () {
        function swipeleftHandler(message){
           $.ajax({
               type: "POST",
               url: "{{=URL('page','message_swipe')}}",
               data: { type: 'like', user_id: '{{=request.args(0)}}', category_id: $(this).attr('rel'), message_id: $(this).attr('id') },
               success: function () {
                   $(message).hide();
               },
               error: function () {
                   alert("could not reach server");
               }
           })

        }
        function swiperightHandler(message){
           $.ajax({
               type: "POST",
               url: "{{=URL('page','message_swipe')}}",
               data: { type: 'not_like', user_id: '{{=request.args(0)}}', category_id: $(this).attr('rel'), message_id: $(this).attr('id') },
               success: function () {
                   $(message).hide();
               },
               error: function () {
                   alert("could not reach server");
               }
           })

        }
        $(".message").swipe( {
           swipe:function(event, direction) {
               if (direction == 'left'){
                   swipeleftHandler(this);
               }
               else if (direction == 'right'){
                   swiperightHandler(this);
               }
           },
           threshold:50
        });
    });
</script>

I noticed when I commented out the first script tag, the swipe worked. Then I put the two script tags together and voila! So I'm not sure what the problem was, as far as I know the first script tag didn't have any errors.

I also moved back to TouchSwipe.js, but I was using this in the very beginning (also tried out some other libraries). So I think it was the other script tag's fault.

Ruud Schroën
  • 103
  • 1
  • 1
  • 10