I'm making a mobile website using with JQM v1.4.
I made the pages as each single HTML. Ex) sub1.html, sub2.html, sub3.html
Is this possible to open sub2.html as popup(dialog) when click something in sub1.html ?
JQuery mobile has the ability to open another page in a popup. Its called Popup iframes.
Open Map
<div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
Close
<iframe src="sub2.html" width="480" height="320" seamless=""></iframe>
</div>
Check the documentation at:
http://demos.jquerymobile.com/1.4.2/popup-iframe/
AND
http://demos.jquerymobile.com/1.4.2/popup/
You can check this at http://demos.jquerymobile.com/1.2.0-rc.2/docs/pages/dialog/index.html using JQM dialog it is possible. Did you checked it?
Related
To link a page which is within the same page or else outside the html page it may redirects
to the particular link based on <a> link
Here is the code for the html:
<div data-role="page" id="main">
page1
page2
</div>
<div data-role="page" id="page2">
this is page2
</div>
Here the page1 is external html file if we click that it is showing as Loading Error page
while page2 is in the same page so it redirects to it . Please give suggestions for this how to link a html which is external.
From JQM Docs:
Linking without Ajax
Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.
I have an issue with a certain page in JQM that does not load when accessed by a link but will load. The page it is calling has some google chart libraries added which seem to be causing the non-loading issue. This problem can be sorted if ajax is disabled using the data-ajax="false" command.
Trouble is, when that link is then clicked on when we add the HTML5 as a native app on the iPad, it closes the app and opens safari to display the link.
How is this behavior disabled?
Code is below.
<div data-role="page" data-theme="a">
<div data-role="content" class="ui-grid-b my-breakpoint" align="center">
<div class="ui-block-a">
<img class="icons" border=0 alt="Storage Monitoring" src="Images/Fridge Icon.png">
</div>
Don't use data-ajax="false"... It will open in safari because without ajax it's the same as saying the link they click is external (rel="external"). What you need to do is figure out why it's not working without data-ajax="false".
I assume this has to do with one of the many common scripting errors seen with developers using JQM. Most people think they can use JQM with their current web development knowledge without reading the documentation, and this is a big mistake. Not necessarily saying you are, but it's all too common.
The first thing you need to do is post an example and tell us why it's not working. You also can't expect everything to magically work with JQM, are these charts supported? If not, you may have to tweak it to work properly.
I have created html5 screens for Mobile web app. I want to add actions to the pages. I means I tap on any button, the related html page should come like the below example.
http://elsies.appclerk.com/
The flow of the navigation I need to show for demo before development. Is there any way of easy process? Please suggest me.
EDIT:
Please check the [jsfiddle](http://jsfiddle.net/4cKhC/">html code).
There, when I tap on the back button the new page or another page should come like the above url (sliders effect).
If you interested only in prototyping you can easily (to a certain degree) achieve this using just jQuery Mobile markup.
You can declare a jQM pages like this:
<div id="contacts" data-role="page">
<div data-role="header">
<h1>Contacts</h1>
Back
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li data-role="list-divider">Colleagues</li>
<li><a href="#alan" data-transition="slide">
<img src="images/person.png">
<h1>Alan Ayckbourn</h1>
<p>Available</p>
</a></li>
</ul>
</div>
Add javascript and(or) server side scripting (e.g. php) and you can turn it into a real application.
Here is a three page mock-up for you.
First item in the list Alan Ayckbourn is clickable.
I have following buttons in My PopUp in jQueryMobile i.e.
HTML Submit Button,
ASP Link Button
Anchor and
ASP Button
<input type="submit" value="click" onserverclick="input_Click"/><br>
<asp:LinkButton runat="server" OnClick="input_Click" data-role="button">link< /asp:LinkButton><br>
<a href="#" data-role="button" onserverclick="input_Click" >anc< /a><br>
<asp:Button runat="server" ID="btn" runat="server" Text="btn" OnClick="input_Click" data-role="button"/ >
Only ASP Link Button Is Capable of Posting Back to the Code Behind i.e. to input_Click handler in aspx.cs , When Clicked From POPUP,
PopUp is below:
<div id="div123" data-role="popup"><br>
<myControl:testcontrol ID="ctltest" runat="server"></bt:testcontrol><br>< /div><br>
<a href="#div123" data-rel="popup" >open</a><br>
Why other buttons Cant do this ?
How Post Back takes place Inside POPUP in jQM ?
This is discussed on the following page: http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html
This means that any scripts and styles referenced in the head of a
page won't have any effect when a page is loaded via Ajax, but they
will execute if the page is requested normally via HTTP. When
scripting jQuery Mobile sites, both scenarios need to be considered.
The reason that the head of a page is ignored when requested via Ajax
is that the potential of re-executing the same JavaScript is very high
(it's common to reference the same scripts in every page of a site).
Due to the complexity of attempting to work around that issue, we
leave the task of executing page-specific scripts to the developer,
and assume head scripts are only expected to execute once per browsing
session.
So when you launch a dialog, it loads the page and has no access to the original JavaScript. I often embed <script></script> into the dialog someplace so that it loads when the dialog is opened.
Per the JQuery Mobile documentation ...
To enable animated page transitions, all links that point to an
external page (ex. products.html) will be loaded via Ajax
How, if it is even possible, can one enable page transitions when building a Phonegap application where all the pages are local rather than sitting on a web server?
There isn't a difference if AJAX is loading from local file or web (except if web you need to whitelist the domains).
By default Phonegap/Cordova for iOS loads from www/index.html.
Here is an example with 2 pages, with in-line data attributes for the transitions.
First page, page1.html
<!-- page1.html -->
...
<div id="page1" data-role="page">
Local on same page<br/>
same page
Local in another page<br/>
new page
</div>
<div id="samePage" data-role="page">
Same Page
</div>
...
A separate file page2.html.
<!-- page2.html -->
<div id="page2" data-role="page">
Page 2
</div>