I have a refresh button in the header of my jQuery mobile app and the click event will not fire in my browser (Chrome). Here is my code:
HTML
<div data-role="header" data-position="fixed">
<a id="#refresh_deals" data-role="button" data-inline="true" data-iconpos="notext" data-mini="true" data-icon="refresh"></a>
<div data-role="fieldcontain" class="ui-title" data-inline="true"><input id="main_search" data-mini="true" type="search" /></div>
<a id="map_btn" data-inline="true" data-mini="true" data-transition="slide" href="#gps_map">Map</a>
</div><!-- header -->
JavaScript
$(document).bind('pageinit', function() {
$('#refresh_deals').on('click', function(){
console.log('refresh clicked')
});
});
It's a pretty simple thing but have no luck with it! I have tried the tap event and pretty much everything else I could find around the web. Does anyone have any idea as to what is going on here?
Your HTML is incorrect, try changing this:
<a id="#refresh_deals" ... />
to this:
<a id="refresh_deals" ... />
Related
I am building a hybrid app on jquery mobile and i wanna use back buttons to navigate between different pages.
I have created the back button and it DOES load the url of the last page, but it doesn't refresh the page content (it keeps showing the same page ie: the button doesn't realize the function)
Looking through the questions previously asked about back button - jquery mobile I can't find one exposing a problem of page loading (cause as I said the button gets the right url but doesn't load the page content)
NOTE: i am using IBM Mobile First
<a href="#loginPage" data-direction="reverse" data-role="button"
id="mainPageBackBtn" data-icon="back" data-iconpos="notext"
data-corners="false">Button</a>
(I wanna move from main page --> login page)
Your HTML button tag is working fine in JSfiddle:
https://jsfiddle.net/pengyanb/a8pzr7gt/6/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<div data-role="page" id="mainPage" data-theme="a">
<div data-role="header" data-position="fixed">
<a href="#loginPage" data-direction="reverse" data-role="button"
id="mainPageBackBtn" data-icon="back" data-iconpos="notext"
data-corners="false">Button</a>
<h5>Main Page</h5>
</div>
<div data-role="main" class="ui-content">
<h2>This is Main Page</h2>
</div>
</div>
<div data-role="page" id="loginPage" data-theme="a">
<div data-role="header" data-position="fixed">
<a href="#mainPage" data-direction="reverse" data-role="button"
id="mainPageBackBtn" data-icon="back" data-iconpos="notext"
data-corners="false">Button</a>
<h5>Login Page</h5>
</div>
<div data-role="main" class="ui-content">
<h2>This is Login Page</h2>
</div>
</div>
Maybe try check you tag Id is correctly assigned?
You can try using data-ajax="false" here:
<a href="#loginPage" data-ajax="false" data-direction="reverse" data-role="button"
id="mainPageBackBtn" data-icon="back" data-iconpos="notext"
data-corners="false">Button</a>
I'm having a problem with showing JQuery Mobile icon buttons on a listview using a Handlebars template: the buttons' icons won't display.
Everything works fine otherwise, the template generates the list, but the buttons' icons aren't displayed. The buttons do work when clicked, and if I add some character between the tags it displays properly and works when clicked.
If I simply copy/paste the content of the template into the HTML document, the icon displays fine. It's only when being generated by the template that it doesn't display.
I'm using jquery mobile 1.4.2 and Handlebars 2.0.
EDIT: JSFiddle at http://jsfiddle.net/6x9s9ys4/
This is the HTML:
<div data-role="content">
<ul id="audioList" data-role="listview" data-inset="true" >
<!-- audioList-template -->
</ul>
</div>
This is the template:
<script id="audioList-template" type="text/x-handlebars-template">
{{#.}}
<li class="ui-grid-a" data-id="{{this.id}}">
<div class="ui-block-a">
<p>{{this.name}}</p>
</div>
<div class="ui-block-b">
<a href="#" id="btnAddFavorite" data-icon="star" data-role="button" data-inline="true" data-iconpos="notext" ></a>
<a href="#" id="btnAddToCart" data-icon="plus" data-role="button" data-inline="true" data-iconpos="notext" ></a>
</div>
</li>
{{/.}}
</script>
And this is the JS:
$('#audioList').empty();
var audioListHandler = Handlebars.compile($("#audioList-template").html());
$('#audioList').html(audioListHandler(audioList));
$('#audioList').listview().listview('refresh');
Thanks in advance.
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 am trying to open a Dialog from within a Dialog without Success.
Here is my html:
Delete page...
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Delete Page?</h1>
</div>
<div data-role="content" data-theme="d" >
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
Cancel
<a data-role="button" data-rel="back" data-transition="flow" data-theme="b" onclick="NewDialog();">Open New Dialog</a>
</div>
</div>
<div data-role="popup" id="popupDialog1" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:600px;">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Top Delete Page?</h1>
</div>
<div data-role="content" data-theme="d" >
<h3 class="ui-title">Dialog Called from A Dialog</h3>
<p>This action cannot be undone.</p>
Option-1
Option-2
</div>
</div>
And here is the a small js function:
function NewDialog()
{
//alert("Alert-1");
("#popupDialog1").popup("open");
}
Any idea how can I call the second dialog successfully?
JS Fiddle is here
You need to set the first popups second button which is the open new dialog to popup. And set its data-rel instead of data-rel="back" set it to data-rel="popup" and also provide a reference to what you want to popup which is the href --> href="#popupDialog1"
here's a Fiddle with a popup within popup --> http://jsfiddle.net/EWQ6n/520/
And btw you can remove the onClick event you have setup.