PHP rocks! wünscht allen Mitgliedern einen guten Rutsch ins neue Jahr 2017 !!!
Hinweis: Das Forum zieht um! Um keine Datenverluste zu haben, schalten wir zwecks Übernahme der Daten das Forum am Sonntag, den 24.04.2016 um ca. 21:00 Uhr offline und passen anschliessend die DNS-Einträge an.
www.php-rocks.de wird euch dann nach den Aktualisierungen der DNS-Server wieder wie gewohnt uneingeschränkt zur Verfügung stehen.
Danke für euer Verständnis!

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
angularJS ui.router und jQuery mobile
#1
Hallo,
so, mit dem ui.router (siehe anderer Thread) bin ich nun weiter und hab es begriffen.

Jetzt habe ich ein Problem mit ui.router in Verwendung mit jQuery mobile:
Code:
     if(false===navigator.isDesktop){
    $locationProvider.html5Mode({
           enabled: false,
          requireBase: false
        });
        $locationProvider.hashPrefix('#');
 }else{
  $locationProvider.html5Mode(false);
 }
funktioniert nicht insofern er wenn jqm initialisiert wurde IMMER den htm5 mode verwendet.

Zur Info:
Im html5 Modus wird der "pushState flow" verwendet, die URL wird also als "echte" URL aufgerufen
und nicht als #hash anker.

Auf der Testseite kann man sehen was ich meine, wenn man sie jeweils mit einem
Desktop device oder einem mobile device aufruft:
http://test.freizeittreffen.de/pmx/
(Bei Verwendung von device emulator ist ein cache refresh erforderlich!)

Um den jqm push state modus zu vermeiden (für solche Fälle nutze ich meine eigene direktive http://www.jsclasses.org/blog/package/445/post/1-Fast-Migration-of-Regular-Sites-to-Mobile-using-Flow-Library.html ) hänge das rel="external" attribut an ausgehende links.
Dies funktioniert auch ganz gut, solange ich nicht den angular ui.router verwende.
Also:
- jqm geht
- ui.router geht
- beides zusammen -> conflict


Meine jqm initialisierung sieht so aus (wird aufgerufen wenn KEIN desktop device):
Code:
    var initialPageWrap = frdl.$q('body *[data-role="page"]');
  if(0 === initialPageWrap.length){
$('body' ).wrapInner( '<div data-dom-cache="false" data-role="page" data-frdl-mod="nodesktop" id="nodesktop-'+ str_replace('.', '-', new frdl.Url().getHost()) + '-' + Sha1.hash(new frdl.Url().urlMakeNew()) + '-' + Sha1.hash(document.title) +'" style="top:0px;left:0px;right:0px;bottom:0px;height:auto;width:auto;"></div>' );
  }    
  try{
 
         
    frdl.watchFor('a[href*=":\/\/"]:not([data-flow-prepared="true"]):not([frdl-ajax-link-boddystripped])').every(function(el){
        $(el).attr('data-flow-prepared', 'true')
             .attr('rel', 'external');
     });
     
     
       $('*[data-role="page"]').page({
                        create: function( event, ui ) {
                              $.mobile.pushStateEnabled = false;
                              $.mobile.initializePage();      
                          $.mobile.loading( 'hide' );
                        }
          });  
                   
               
                   
                       
           $('*[data-role="page"]').trigger('create');
           $.mobile.pushStateEnabled = false;
         
                             
}catch(err){
console.error(err);
}

In Internetforen habe ich gelesen man solle
Code:
<script> $.mobile.pushStateEnabled = false;</script>
bereits im HEADER der Seite deklarieren.
Das $.mobile wird allerdings bei mir asynchron geladen per $.lazy http://unwrongest.com/projects/lazy/ geladen
und jqm wird (wenn erforderlich) erst initialisiert wenn DOMContentLoaded.
Eine Verwendung von $.mobile im Header würde jqm zu früh und ungewollt laden!

Ich habe versucht das "normale Verhalten zu emulieren" indem ich das ui.router url prefix lösche und
$locationProvider.hashPrefix('#'); als hash prefix setzte.
Dies funktioniert zum einen nicht und ist zum anderen auch keine saubere Lösung.


Zusammenfassung:
Wie kann ich  $.mobile.pushStateEnabled = false; erzwingen?
Antworten
#2
Hallo Till,

Bei mir ist die Testseite auf allen Devices leer und die Konsole sagt das:
Ausgabe:
Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
Antworten
#3
Bei mir funktioniert es nun wie gewünscht, wenn ich die pushState config einfach auskommentiere, wie folgt:
Code:
     if(true===frdl.UI.isMobileTheme){
  /*   $locationProvider.html5Mode({
           enabled: false,
           requireBase: false
        });
        $locationProvider.hashPrefix('#');*/
 }else{
  $locationProvider.html5Mode(false);
 }
Zitat:Bei mir ist die Testseite auf allen Devices leer und die Konsole sagt das:
Ausgabe:
Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
Mh, Mist!
Danke für die INfo!
Scheint eine security Restrektion zu sein, ich vermute von AngularJS...!?
Sorry zu schnell gelesen, bei SyntaxError hast Du mich wohl gerade beim update erwischt , einfach neu laden?

(Jemand eine Idee dazu? Ich denke ich muß dazu einen neuen Thread aufmachen, @Arne hast den Thread als erledigt markiert?*verguckt?* )

mfg
Antworten
#4
Zitat:Bei mir funktioniert es nun wie gewünscht, wenn ich die pushState config einfach auskommentiere
Klappt doch noch nicht so ganz!
Antworten
#5
Hallo Till,

Hier meine Konsole:
[Bild: http://www.php-rocks.de/uploads/webfan-console.jpg]

Ich habe mir das nicht intensiv angesehen, muss ich zugeben, da ich bisher wenig mit AngularJS gemacht habe, aber vielleicht hilft es Dir?

Schöne Grüße
Arne
Antworten
#6
Hallo Arne,
erstmal vielen Dank für Deine Hile!

[object FileError] sollte nun behoben sein!?!
(chrome fileSystem API shim)

Die DOMExceptio tritt bei mir so nicht auf, muß ich nochmal untersuchen...!?

Ich habe es jetzt so:
Code:
if(true===frdl.UI.isMobileTheme){
       /*  */ $locationProvider.html5Mode({
            enabled: false,
            requireBase: false
         });
           $locationProvider.hashPrefix('#');
          $.mobile.pushStateEnabled = false;    
      }else{
          $locationProvider.html5Mode(false);
      }
und
Code:
       var initialPageWrap = frdl.$q('body *[data-role="page"]');
       if(0 === initialPageWrap.length){
                $('body' ).wrapInner( '<div data-dom-cache="false" data-role="page" data-frdl-mod="nodesktop" id="nodesktop-'+ str_replace('.', '-', new frdl.Url().getHost()) + '-' + Sha1.hash(new frdl.Url().urlMakeNew()) + '-' + Sha1.hash(document.title) +'" style="top:0px;left:0px;right:0px;bottom:0px;height:auto;width:auto;"></div>' );
       }        
          try{
  
        
        frdl.watchFor('a[href*=":\/\/"]:not([data-flow-prepared="true"]):not([frdl-ajax-link-boddystripped])').every(function(el){
     /* frdl.watchFor('a[href]:not([data-flow-prepared="true"]):not([frdl-ajax-link-boddystripped])').every(function(el){*/
         $(el).attr('data-flow-prepared', 'true')
              .attr('rel', 'external');
      });
      
     frdl.cron.add('flow.$jqm.repair.ui-sref.if#prefix', function(){
           webfan.$Async(function(){
               $.mobile.pushStateEnabled = false;    
          /*  frdl.watchFor('a[ui-sref]:not([data-flow-prepared-ui-sref="true"]):not([frdl-ajax-link-boddystripped])').every(function(el){ */

        
           frdl.watchFor('a[ui-sref]').every(function(el){
              
              setTimeout(function(){
                $(el).attr('data-flow-prepared-ui-sref', 'true')
                   .attr('href',  str_replace('##', '#',$(el).attr('href')))
                   .attr('href',  str_replace('##', '#',$(el).attr('href')))
                   .attr('href',  str_replace('##', '#',$(el).attr('href')))
                   .attr('href',  str_replace('#', '',$(el).attr('href')))
                   .attr('href',  '#'+$(el).attr('href'))
                ;
               },750);  
              
           });                
           },250);
     });
  
    
          
             $('*[data-role="page"]').page({
                         create: function( event, ui ) {
                               $.mobile.pushStateEnabled = false;
                               $.mobile.initializePage();      
                               $.mobile.loading( 'hide' );
                         }
           });  
                    
                
                    
                        
            $('*[data-role="page"]').trigger('create');
/**/        
          setTimeout(function(){
            $.mobile.pushStateEnabled = false;    
          },800);
        
          
          frdl.UI.isMobileTheme = true;                    
          
        }catch(err){
            console.error(err);
        }

Der hashPrefix wird so verdoppelt ## und bei den href links bereinigt #.
Zumindest habe ich nun erreicht, daß nun keine 404 Seite mehr kommt, die Lösung ist allerdings, nunja unschön.

...

Viele Grüße
Till
Antworten
#7
Ich denke so geht es nun (bisher keine Fehler):
document.addEventListener("mobileinit", function(){
$.extend( $.mobile , frdl.UI.o.jQueryMobile.o);
});
Code:
    $( window ).one( "mobileinit", function() {
        $.extend(  $.mobile , frdl.UI.o.jQueryMobile.o);
    });  
Antworten


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  angularJS ui.router - Fragen über Fragen... Till 4 11.325 29.02.2016, 23:31
Letzter Beitrag: Till

Gehe zu: