Is it possible to call a JQM Popup using a custom image as a button. Using the following, I can call an external site, but I can't seem to get it to call a JQM popup.
<img src="../MapPin1.png" />
Yes, but you need data-rel="popup" in your anchor tag for JQM popups, and the href is supposed to contain the ID of the popup element (not a hyperlink).
Here's an example:
<img src="../MapPin1.png" />
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
See: http://demos.jquerymobile.com/1.2.1/docs/pages/popup/
Related
I would like to have a back button on the page, using data-add-back-btn="true". However I also want a popup on the same page, with a header, that doesn't have a back button on it. It seems that the data-add-back-btn="true" attribute applies to everything on the page.
I've played around with different settings here: http://jsfiddle.net/n9trV/4/ but have had no luck. Can anyone get this working?
Is there any neat way of doing this using the JQM attributes? Otherwise I will probably just delete the button manually after the page has initialised.
I think you should report this as a bug (I feel it is so). However, to solve your problem just using markup, you can delete the
data-add-back-btn="true"
and place inside of your page header, whether it's a <div> or a <header> (better), a link like the following:
Back
If you want to use your previous icon, in the link use this attribute instead:
data-icon="arrow-l"
So you should have something like this:
<div data-role="page" id="page2">
<header data-role="header">
Back
<h1>Page 2</h1>
</header>
<!-- other code goes here -->
</div>
I am using the fastklick plugin for iOS what is very popular on the net for speeding the click event on jquery mobile apps with phonegap on iOS.
The buttons and links are working very well except the back button from jquery.
If I use this:
<div data-role="page" id="test" data-add-back-btn="true">
then if I want to click on the button, there is already the delay from iOS. The button is getting blue at first and after that the page is sliding. How can I prevent this so this button is working fast like the other buttons I am creating with
<button>...</button>?
Is it possible to create my own back button and apply an event to it?
First remove data-add-back-btn="true" then you can try this:
<a class="ui-btn-left" data-icon="arrow-l" href="javascript:history.back(1) " data-theme="a">Back</a>
or this:
<a class="ui-btn-left" data-icon="arrow-l" href="#" data-theme="a" id="back-btn">Back</a>
$('#back-btn').bind('touchstart', function(e) {
$.mobile.changePage("#pageID");
});
Just change #pageID to your real page ID. touchstart event is great for back button if you are just doing it and not a page scrolling.
In jQuery mobile I am using an iframe. When you press the back button (in the app or the browsers back button) the iframe content goes away. Then when you press the back button again the app transitions to the previous page.
The iFrame is getting added to history. I thought this was never supposed to happen.
A jsFiddle has been created that illustrates the puzzle in as simple a form as possible.
In it you will find a fragment of HTML that creates two jQuery Mobile pages. On the first page there is a link to go to the second page. On the second page,there are two back buttons (one on the header and one as a button on the page) and also a button to reload the <iframe>. To recreate the problem:
From page 1 follow the link to page 2
On page 2, click the button to load the <iframe>
Click either of the back buttons
You will notice that you do not go back to page 1.
Here is the HTML:
<div data-role="page">
<p>This is page 1</p> Go to page 2
</div>
<div data-role="page" id="page2">
<div data-role="header" data-add-back-btn="true">
<h1>Page 2</h1>
</div>
<p>This is page 2</p>
<p>What follows is the iFrame</p>
<iframe id="i1" width="500" src="http://www.ibm.com"></iframe>
<p>This button issues a programmatic back</p>
<button id="backButton">Go Back</button>
<p>This button loads new content into the iframe</p>
<button id="reloadButton">Reload iFrame</button>
</div>
Here is the JavaScript
$(function () {
$("#backButton").click(function () {
jQuery.mobile.back();
});
$("#reloadButton").click(function() {
$("#i1").attr("src", "http://www.microsoft.com?x=" + Math.random());
});
});
(This is the code you will find in the jsFiddle).
I'm guessing it is because JQM programatically manipulates the history with replaceState. You can read more about how they track history in an ajax environment in the docs
Show me some code or a fiddle and I may be able to give you a more detailed answer.
One answer that seems to work (so far) is not to attempt to reload the <iframe> via changing its src attribute but instead, inserting a brand new <iframe> element to replace the one that was previously there. The logic to achieve this might look as follows:
$("#frameLocation").html('<iframe id="i1" width="500" src=' + newURL + '"></iframe>');
A corresponding jsFiddle showing it working is available.
This has been tested on Chrome 38.0 and Internet Explorer 11.0.
jQuery mobile button renders gibberish for filter button after clicking on pagination. Click event that shows map also stops working after changing the page.
Should I call refresh page?
Sandbox link
Markup is as following:
<div data-role="header" data-theme="b" id="rest-header">
<div class="ui-grid-b">
<div class="ui-block-a">Filter</div>
<div class="ui-block-b"><input type="search" name="search"value="" data-theme="d" /></div>
<div class="ui-block-c">Map</div>
</div>
</div><!-- /header -->
First I would suggest using jQuery 1.6.4 as jQM only supports this version for 1.0
Your problem is you're adding a back button when navigating to another page, this is causing an overlap of both the filter and back button.
Removing the data-add-back-btn="true" attribute should solve the issue
For map button you should use live event binding or delegation so that it works for dynamic content. Instead of
$( "#map-btn" ).bind( "click", function(event, ui) { ... });
try
$(document).on('click', '#map-btn', function() {
// ...
})
For filter button I can see the Back button under the Filter one, so you want to get rid of the Back button since you don't need it right there. You can remove data-add-back-btn="true" attribute.
I have a page with a normal link to an image. When jQuery Mobile is loaded and you click on the link, all that is returned is 'undefined'.
How can you link to an image and have the image loaded when clicked?
edit:
It's just a normal link with an image:
<img src="picture_thumbnail.jpg" />
Seems to work when adding rel="external" to the <a> tag.
<a href="picture.jpg" class="image" rel="external">
<img src="picture_thumbnail.jpg" />
</a>