I seem to be running into a problem with jquery-mobile's header and angularjs.
the issue is i'm trying to place a standard jquery-mobile header.
<div data-role="header">
Cancel
<h1>Edit Contact</h1>
Save
</div>
This works as expected when the header is outside of a ng-view.
in chrome, I see the following html.
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Cancel</span><span class="ui-icon ui-icon-delete ui-icon-shadow"> </span></span>
<h1 class="ui-title" role="heading" aria-level="1">Edit Contact</h1>
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Save</span><span class="ui-icon ui-icon-check ui-icon-shadow"> </span></span>
</div>
When I'm trying to put in a ng-view, angularjs puts a ng-scope on the div, which now produces a conflict. This is the final control being outputed
<div ng-view>
<div data-role="header" class="ng-scope">
Cancel
<h1>Edit Contact</h1>
Save
</div>
</div>
Is there a simple way to get the two platforms to behave nicely?
Found this solution in google groups
https://groups.google.com/forum/?fromgroups=#!searchin/angular/jquery$20mobile/angular/-BufJRGQ6-M/bYa6AfCSTVYJ
Related
I have my angular directive, and that is some div's with around it an but when I click on the div it doesn't reload my page.
Am I doing something wrong?
This is the full directive
<div class="col s12 m6 l4">
<div class="video-card">
<a href="#/videos/detail/{{video.Id}}" target="_self">
<div class="card-image">
<img ng-src="{{video.ThumbnailUrl?video.ThumbnailUrl:'img/images.png'}}" src="" />
</div>
</a>
<a href="#/videos/detail/{{video.Id}}" target="_self">
<div class="card-content">
<div class="card-title-box">
<a href="#/videos/detail/{{video.Id}}">
<span class="card-title grey-text text-darken-4">
{{video.Title}}
</span>
</a>
</div>
<div class="card-action">
<div class="more-info">
<span class="group grey-text">
{{ video.Author}}
</span>
<a href="#/groups/detail/{{playlist.Id}}/List/{{video.Id}}" ng-if="playlist">
<i class="mdi-av-play-arrow right tooltipped black-text small "
data-position="top" data-delay="0" data-tooltip="{{'video.playFromhere' | translate}}"></i>
</a>
</div>
</div>
</div>
</a>
</div>
</div>
I need to reload the page due to a bug in a plugin I'm using on the detail page, and nor the author of that plugin nor I can figure out what is happening, and the only way to get it work is to reload the page when going to a video.
You can reload a page in Javascript using window.location.reload()
Target only sets which frame the link should act on. So if you want the document to reload use
window.location.reload();
In my phonegap application for android(4.2.2) using jquery mobile(v 1.3.2) when the text box is focused (keyboard is open/show) at the time the jquery mobile FIXED header hide never visible again.Here is the sample code.
<!-- header start -->
<div data-role="header" id="header" data-position="fixed" data-tap-toggle="false">
<h4>Stop Card</h4>
<div class="ui-btn-left">
<a data-role="button" data-icon="check" id="save" >Lagre</a>
</div>
<div class="ui-btn-right">
<a data-role="button" data-icon="delete" id="stopCardcancel" >Avbryt</a>
</div>
</div>
<!-- header end -->
Using this you can fix the header issue data-hide-during-focus="false". This will fix the header.
Try like this
<!-- header start -->
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-hide-during-focus="false" data-transition="none">
<h4>Stop Card</h4>
<div class="ui-btn-left">
<a data-role="button" data-icon="check" id="save" >Lagre</a>
</div>
<div class="ui-btn-right">
<a data-role="button" data-icon="delete" id="stopCardcancel" >Avbryt</a>
</div>
</div>
<!-- header end -->
Note: Only in JQM 1.3.2
Looks the repository, is an open issue 'fixed toolbars unfix after softkeyboard #5556'
Perhaps this answer for another stackoverflow question can help you.
Some times data-position="fixed" will not work properly, so give position:fixed for ui-header class.
.ui-header
{position:fixed;}
The especially strange part about this is that I am not using JS to tweak anything, just the HTML data- attributes. Original Markup:
<div id="navContainer">
<div data-role="collapsible" data-iconpos="right" data-collapsed="true" data-theme="b">
<h4>Go to a different page »</h4>
<ul data-role="listview">
<li class="current">
About Us
</li>
...
</ul>
</div>
</div>
I should note that this is built on top of SilverStripe, a PHP MVC product. It makes heavy use if caching for performance, and sometimes clearing out the cache can fix a weird problem like this. Not seeming to in this case, but I wanted to "put all my cards on the table". Here is the JQM "Enhanced Markup":
<div id="navContainer">
<div class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-theme="b" data-collapsed="true" data-iconpos="right" data-role="collapsible">
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-right ui-btn-b" href="#">
<a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-right ui-btn-b" href="#">
Go to a different page »
<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
</h4>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
</div>
</div>
Notice the extra ui-collapsible-heading-toggle:
<a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-right ui-btn-b" href="#">
<a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-right ui-btn-b" href="#">
Where is that coming from? And why is it intermittent? Sometimes the page will start to load with it, and then it disappears and the markup ends up as it should. Sometimes it stays there permanently, and the events get all screwed up and the hidden content won't expand. There is nothing strange in the original markup that should be causing it. I'm baffled.
Here is the same exact page - I just refreshed it. Notice now that the markup and behavior is perfect. The content is a listview btw, same as in the original markup.
<div id="navContainer">
<div class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-theme="b" data-collapsed="true" data-iconpos="right" data-role="collapsible">
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-right ui-btn-b" href="#">
Go to a different page »
<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
</h4>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
</div>
</div>
............
You can check it all live at http://m.brooksransom.com if you'd like. Any of the top links will "sometimes" exhibit this behavior. Sometimes if fixes it's rendering error a half-second later. Very strange.
#ezanker it looks like your solution has done it. There was one intermittent, but small, issue left where I had some hanging, but I remembered under the previous static navigation I was using data-ajax="false". As far jquery-mobile being added twice (I assume that's what Ilya Luzyanin meant) that wasn't it, I'm using an overall mobile solution that is part of the SilverStripe MVC framework. Let me know if there's anything else I'm doing incorrectly to give #ezanker full credit on this.
I can't seem to get the navigation bar widget to work at all in my code. I'm building my first application in notepad++ and I'm trying to learn as I build so I apologize for any simple mistakes.
As of now, it shows up as two 2 row tables with the first showing the first button with a space below it and the second showing a space above it with the 2nd button below it. I've checked the jQuery mobile demo site to try and figure out the code and came up with noting, and so I come to you.
<div data-role="page" id="pageone">
<div data-role="header" data-id="header" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#pagetwo" class ="ui-btn-active ui-state-persist">
<h2>Summoner Information</h2>
<h3>Statistics & Achievements</h3><a/></li>
<li><a href="#todolist">
<h2>To-Do List</h2>
<h3>Application wish list</h3></a></li>
</ul>
</div><!--/navbar -->
</div><!--/header -->
<div data-role="main" class="ui-content">
<p>This is an ongoing test page for my League of Legends Statistical Analysis and Coaching application</p>
<p>Please enter your summoner name in the text box below.</p>
<h2>Enter Your Summoner Name</h2>
<div class="ui-grid-a">
<div class="ui-block-a"><input type="search" name="SumName" id="SumName" placeholder="Summoner Name" data-clear-btn="true"></div>
<div class="ui-block-b"><a href="#pagetwo" id="callSum" class="ui-btn" >Search</a></div>
</div>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
You have a syntax error in closing tag of anchor. you have used like <a/> instead of </a>
Update your code like below.
<li><a href="#pagetwo" class ="ui-btn-active ui-state-persist">
<h2>Summoner Information</h2>
<h3>Statistics & Achievements</h3></a>
</li>
i have a problem, you can see that here (with firefox) : http://fiddle.jshell.net/ckuskun/qrcdS/show/light/
when click to "open" link, a dialog is opening. after closing this dialog, fixed header is jumping to the top.
how can i fix this problem
i'm having this problem mac firefox and windows firefox, no problem with other browsers. I have tried both as local and hosting.
http://www.screenr.com/BVhH
This is a jQuery Mobile bug and it is related to dialog's and how framework is handling page back action.
For now it can be fixed if you remove data-position="fixed" from a first page header.
Working example: http://jsfiddle.net/A5Tp8/5/embedded/result/
HTML :
<div data-role="page" id="yonetim">
<div data-role="header" id="fheader">
<h1>lorem</h1>
</div><!--header-End-->
<div data-role="content">
<a href="#yeni-kullanici-ekle" data-prefetch="true" data-theme="a" data-icon="plus" data-iconpos="right" data-rel="dialog" data-transition="pop" >open</a>
</div><!--content-End-->
<div data-role="footer" data-position="fixed" style="border-top:1px solid #aaa;">
<h6 id="footer-text"><a href="<?=BASE_URL; ?>/Anasayfa/CikisYap/" data-ajax="false" >log-out</a> - </h6>
</div><!--footer-End-->
</div><!--page-End-->
<div data-role="dialog" id="yeni-kullanici-ekle" data-theme="a">
<div data-role="header" data-theme="a">
<h1>Yeni Kullanıcı</h1>
</div>
<div data-role="content" data-theme="a">
deneme
</div>
<div data-role="footer" data-theme="a">
deneme
</div>
</div>