Problem with back button in android v2.3

jaumeavila commented 11 years ago

Hi, After fixing the problem switching pages thanks to a workaround, I have noticed that the jquery mobile back button does not work. It does not work when is like this:

<a href="#" data-role="button" data-rel="back" data-icon="arrow-l">Back</a>

Here is a sample file that if viewed with a device or an emulator using Android v2.3 can be tested:

<!DOCTYPE html> 
<html ng-app="amovens">
 <head>
  <script src="https://github.com/tigbro/jquery-mobile-angular-adapter/raw/master/compiled/jquery-mobile-angular-adapter-standalone-1.1.2-SNAPSHOT.js" type="text/javascript"></script>
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

   <script>
     var module = angular.module("amovens", []);
     module.config(['$provide', function ($provide) {
        $provide.decorator("$browser", ['$delegate', function ($browser) {
            var _url = $browser.url;
            $browser.url = function() {
                var res = _url.apply(this, arguments);
                if (arguments.length===0) {
                    res = res.replace(/%23/g,'#');
                }
                return res;
            };
            return $browser;
        }]);
    }]);
   </script>
 </head> 
 <body> 

   <!-- Start of first page -->
   <div data-role="page" id="foo">

     <div data-role="header">
       <h1>Foo</h1>
     </div><!-- /header -->

     <div data-role="content">  
       <p>I'm first in the source order so I'm shown as the page.</p>       
       <p>View internal page called <a href="#bar">bar</a></p>  
     </div><!-- /content -->

     <div data-role="footer">
       <h4>Page Footer</h4>
     </div><!-- /footer -->
   </div><!-- /page -->

   <!-- Start of second page -->
   <div data-role="page" id="bar">

     <div data-theme="b" data-role="header" style="height: 45px;">
        <a href="#" data-role="button" data-rel="back" data-icon="arrow-l">Back</a>
        <h3>
            Bar
        </h3>
      </div> 

     <div data-role="content">  
       <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>       
       <p><a href="#foo">Back to foo</a></p>    
     </div><!-- /content -->

     <div data-role="footer">
       <h4>Page Footer</h4>
     </div><!-- /footer -->
   </div><!-- /page -->
 </body>
</html>

Thanks,

Jaume

tbosch commented 11 years ago

Hi, thanks, I could verify this is broken on Android Simulator. Have to look why...

Tobias

tbosch commented 11 years ago

Hi, with the latests changes (1.2.1-SNAPSHOT) this works in Android Simulator 2.3. Could you double check?

Thanks, Tobias

tbosch commented 11 years ago

Closing this. Please reopen if the problem still exists.

opitzconsulting / jquery-mobile-angular-adapter

Problem with back button in android v2.3 #112