I created a mobile page where i can slide left or right which loads a new page, so not inside a div, but a new url.
There is a next and prev button on the page which works fine,
but sliding does this:
the first time sliding is okay, but on the new page there appear to be a copy of the old source inside,
then when i swipe again the first part stays the same but the second part gets updated to what i expect and want. This results in a sort of loop between the two id´s in the users output.
this is what i see after the first swipe
- <div data-role="page" data-url="/mobile/photo.php?type=photoday&id=19" tabindex="0" class="ui-page ui-body-c" style="min-height: 371px;">
- <script type="text/javascript">
- $(function(){
- $( "html" ).on( "swiperight", swiperightHandler );
- $( "html" ).on( "swipeleft", swipeleftHandler );
-
- function swiperightHandler( event ){ //prev item
- $.mobile.changePage("?type=photoday&id=18", {transition: "fade"});
- }
- function swipeleftHandler( event ){ //next item
- $.mobile.changePage("?type=photoday&id=20", {transition: "fade"}); }
- });
- </script>
- ...
- <div data-role="page" data-url="/mobile/photo.php?type=photoday&id=16" data-external-page="true" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 259px;">
- <script type="text/javascript">
- $(function(){
- $( "html" ).on( "swiperight", swiperightHandler );
- $( "html" ).on( "swipeleft", swipeleftHandler );
-
- function swiperightHandler( event ){ //prev item
- $.mobile.changePage("?type=photoday&id=15", {transition: "fade"});
- }
- function swipeleftHandler( event ){ //next item
- $.mobile.changePage("?type=photoday&id=17", {transition: "fade"}); }
- });
- </script>
does anybody knows what is going on?