Jquery mobile with phonegap

Hello All,
I am planning to create a new mobile app project developed by Jquery and html5 css3, and integrate it with the Phonegap. also planning to get my dynamic data from wordpress site by JSON.
my question here is it possible that JSON data list to be as a listview data role even if its with a large number of items like over 1000 items with no crash! if not possible, what is the best solution to make a large dynamic list!
Thanks

@pk4ut You need to select "jQuery Mobile with theme (local). That's the same as using (phonegap). Thanks for watching!
Paul

Similar Messages

JQuery Mobile with Trinidad/ADF Faces

Hi
Is it possible to use JQuery Mobile with Trinidad/ADF Faces? I tried using JQuery Mobile with Trinidad, but the trinidad components are not rendering on the page. Is there a way out?
Below is my code:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html" xmlns:trh="http://myfaces.apache.org/trinidad/html"
xmlns:tr="http://myfaces.apache.org/trinidad" xmlns:dvtt="http://xmlns.oracle.com/dss/trinidad/faces">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<trh:html>
<trh:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css"/>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</trh:head>
<trh:body>
<div data-role="page" data-theme="c" id="page">
<div data-role="header" data-theme="e" id="header">
<h1>Wireless > Logon</h1>
<a href="../../ data-icon="home" data-iconpos="notext" data-direction="reverse"
class="ui-btn-right jqm-home">Home</a>
</div>
</div>
<tr:form>
<tr:commandButton id="cbt" text="command button"/>
</tr:form>
</trh:body>
</trh:html>
</f:view>

</jsp:root>
Regards
Navin

With out the JQuery mobile settings ie the css and js entries. The trinidad components are rendering. Below is my web.xml file.
<?xml version = '1.0' encoding = 'windows-1252'?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.faces.PARTIAL_STATE_SAVING</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<description>If this parameter is true, there will be an automatic check of the modification date of your JSPs, and saved state will be discarded when JSP's change. It will also automatically check if your skinning css files have changed without you having to restart the server. This makes development easier, but adds overhead. For this reason this parameter should be set to false when your application is deployed.</description>
<param-name>org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION</param-name>
<param-value>false</param-value>
</context-param>
<filter>
<filter-name>trinidad</filter-name>
<filter-class>org.apache.myfaces.trinidad.webapp.TrinidadFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>trinidad</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>FORWARD</dispatcher>
<dispatcher>REQUEST</dispatcher>
<dispatcher>ERROR</dispatcher>
</filter-mapping>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>resources</servlet-name>
<servlet-class>org.apache.myfaces.trinidad.webapp.ResourceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>resources</servlet-name>
<url-pattern>/adf/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>resources</servlet-name>
<url-pattern>/afr/*</url-pattern>
</servlet-mapping>
</web-app>

Page from Sample - Mobile Starters - jQuery Mobile with theme not working on mobile

I created a new webpage - New - Page from Sample - Mobile Starters - Jquery Mobile with Theme and did not modify it.
That does not work on an iPhone or Android.
What am I missing? Is there an update to make the jquery mobilesite work?
This is how it looks in dreamweaver
http://ricston.com/push/test/screenshot_dreamweaver.png
This is how it looks on my phone:
http://ricston.com/push/test/screenshot_galaxy.png
The page for the template is here http://ricston.com/push/test/test.html - As you can see, nothing has been changed.

Thank you. I was having the exact same problem. I even upoaded the unmodified starter page, just in case it was something I did. Inserting the viewport line fixed it. (Now I need to go back and insert that line into each of the pages I was working on.)
The question remains, however, as to why the mobile starter pages don't include that line in the first place.
[edit] FYI - On Dreamweaver CC, it's under the "common" group within "insert". (I would have expected it under "JQuery Mobile", but it's not there.)

Can I use jQuery mobile with Apache Cordova in VS2013?

Hi,
I'm developing my first mobile app. I just need to build a very simple form with a few text fields and a date picker. I was wondering can I use jQuery Mobile for this? I saw an example of using jQuery Mobile with Ajax to call a web service
when user clicks Submit button and wondering if I can use that in VS 2013 Apache Cordova project.
Also, is there a way for user to define data for a couple of fields, like their user id and password for the app? How can that be done so users don't have to enter credential each time they use the app.
Thank you
Thank you

No. You need an officially unlocked iPhone. Contract free DOES NOT equal officially unlocked. All contract free means is that you are not obligated to a contract, nothing more.
In the US, only Apple sells officially unlocked iPhones.

Dreamweaver cc jquery mobile with theme

Hi everyone
I m trying to create my first mobile site using Dreamweaver jquery mobile with theme. First I up date the jquery mobile and jquery files. But after I have done this the icons are no longer available. I have tried several things including: pulling the icons out of the jquery mobile folder titled 'icons-png' and place them in an image folder. But no luck.
Dreamweaver installs these files on the starter page
<link href="jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0.min.js" type="text/javascript"></script>
and I replace them with these files
<link href="jquery.mobile.theme-1.4.4.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile.structure-1.4.4.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile.inline-svg-1.4.4.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile.inline-png-1.4.4.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile.icons-1.4.4.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile.external-png-1.4.4.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile-1.4.4.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.4.4.min.js" type="text/javascript"></script>
I know this is a pretty basic problem. I cant find any thing on the web to remedy the problem.
In advance thank you for your advice
Cheers
Paul
https://forum.jquery.com/html/blank.html

Thank you. I was having the exact same problem. I even upoaded the unmodified starter page, just in case it was something I did. Inserting the viewport line fixed it. (Now I need to go back and insert that line into each of the pages I was working on.)
The question remains, however, as to why the mobile starter pages don't include that line in the first place.
[edit] FYI - On Dreamweaver CC, it's under the "common" group within "insert". (I would have expected it under "JQuery Mobile", but it's not there.)

JQuery Mobile with Adobe Spry?

Hi everyone,
I'd like to use a Spry dataset in a jQuery Mobile page. At the moment it doesn't work, only displaying the field names instead of actual data. It seems like nothing Spry works on the page, I wondered if the two are compatible?
I created a separate page with minimal code with a Spry dataset and it works OK, so I guess the code is OK? When it's copied to the jQuery Mobile page no data is displayed, just the field names.
Can anyone help? I'd really like to have Spry functionality in the mobile application!
Thanks

I have this problem also, as posted in the jquery mobile forum:
What would cause Spry Validation to allow my Form to be submitted when the "Required" fields are left blank? Here is what is happening:
- I leave the fields blank and click my "Submit" button
- I briefly see the fields go Red with message "A Value is required"
- Then the Form submits anyway (tables update/no errors)
Here is the full code listing: http://cerberus.clearwave.com/jerry/spry_example_ctt1b.pdf
Notice:
- I'm using jquery mobile 1.1.0 on my page
- I'm inserting data into two tables at one time (Lines 8, 196, 203)
- I have Spry text Validation on only a few fields for now (ex. Line 483)
Here is a design view of my page:

JQuery Mobile with Dreamweaver CS6 - Blink

I´ve created a JQuery Mobile page using Dreamweaver CS6 that works perfectly in Firefox, but in iPad it appears blink effect when there´s a transition.
How to remove blink in transitions for JQuery Mobile ?

Yes, you can update the included version of jQuery Mobile.
Download the desired version from jquerymobile.com, and replace the files within Dreamweaver's Configuration folder. Greg Rewis wrote up a helpful blog post that details this process: http://blog.assortedgarbage.com/2011/05/updating-jquery-in-dreamweaver-cs5-5/
I haven't run into any issues with the newer stable versions (i.e. jQm 1.1.0 and jQ 1.7.1/1.7.2).
If you do, though, we'd like to hear about it: http://adobe.ly/DWBug

JQuery Mobile with Kaltura player

I am able to use the Kaltura player quite well if on my menu page, which allows for navigation to the video-playing page, I use rel="external", but I give up all Ajax navigation buttons. If I don't use rel="external" the poster frame displays fine, but the video never buffers or loads. I'm guessing it's because Kaltura is waiting for a page loaded event that never fires within the Ajax call. Does someone have a solution for me re: how to get the video player to perform normally and still use the ajax navigation buttons?

Hi,
Please confirm that your web server is sending the correct headers for the video files -
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Consider posting these questions on the library forum - http://www.kaltura.org/forums/html5-video/html5-video

Cannot get background image to appear in app made with jquery mobile

Not sure where to post this issue but i thought here might be a good place as it is related to Dreamweaver.
I am using jquery mobile and phonegap to develop an app and i'm a noob at this.
I just want to make a scalable image as a background. After searching stack overflow it seems this problem comes up alot but I've tried all solutions and they do not work! When viewing it in a web browser...all looks fine but when i run it on the emulator or download the test build to my android phone it does not show at all!!
I know that the jquery mobile stylesheets overwrite anything i try to custom style so i have gone in directly and targeted those elements
CSS:
.ui-page.ui-body-c {
background: url(jquery-mobile/images/phone-bg.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
margin: 0; padding: 0;
Like I said, this works fine in a web broswer when testing and fine in Live mode but in the app build i can see nothing at all.
Has anyone got a good workaround/solution for this??? Because all suggestions i see in stack overflow just don't work...

This is where your SpryHorizontal12.css file is looking for that image. It's 404 not found at that location (notice the path):
http://eappromotions.healthandperformancesolutions.net/eappromotions/EAP%20Promo%20Kit/htm l/images/top_nav_button.gif
Also, don't use spaces in file & folder names. It creates problems when spaces are converted to %20.
Nancy O.

JQuery Mobile on Phone Gap for Android DW CS 5.5

Hi,
I thought that I should take my dynamic Jquery Mobile site to the test as a native application by building it with the Dreamweaver CS 5.5 Phone Gap extension. Building it and getting it up as an application on the Android SDK emulator was pretty straightforward.
The Jquery Mobile site consists of 1 multipage page starting with a login form (userid, password and a submit button). The PHP page with the MySQL database access is called using AJAX. If login successful, PHP returns an XML array with a number of categories that will be listed (ul/li) on the subsequent page. Now, this is all we need to know for now.
The corresponding Phone Gap application loads fine on the Android emulator, a click on the app icon kicks off the splash page and the login form comes up exactly like it does when run as a Jquery Mobile web page but nothing happens when I click the submit button. Trying to understand I started the emulator loggin (adb logcat) and found this (I am listing only the latest log items):
===
I/InputDispatcher(   74): Dropped event because it is stale.
D/dalvikvm(   74): GC_CONCURRENT freed 525K, 14% free 9234K/10695K, paused 37ms+46ms
D/dalvikvm( 396): GC_CONCURRENT freed 896K, 13% free 6997K/8007K, paused 23ms+40ms
D/dalvikvm( 137): GC_CONCURRENT freed 457K, 6% free 7729K/8199K, paused 24ms+11ms
D/SntpClient(   74): request time failed: java.net.SocketException: Address family not supported by protocol
W/webview ( 396): Stale touch event ACTION_DOWN received from webcore; ignoring
W/webview ( 396): Got ACTION_DOWN but still waiting on stale event. Catching up.
W/webview ( 396): Stale touch event ACTION_DOWN received from webcore; ignoring
===
Every time I click/tap the submit button I get "Stale touch event..." which I strongly relate to that nothing happens.
Anyone tried this (Phone Gapping Jquery Mobile) or having a clue of where to look next?
Thanks
/Ralf

wow....Matt is has been a while since i first build the sample app using the jquery mobile and phonegap in DW5.5. Since I faced lots of challenge with getting the app to talk to mysql, i decided to go with "Flash Builder 4.5.1". I have already develped and deployed both android and ios app using flash builder.
I don't recall how i develped the sample app with jquery mobile and phonegap in DW5.5. As far as i can recall...i followed a tutorial provided on Adobe Developer Connection under DW5.5. I don't have the link anymore...i will try to find it for you.

Jquery Mobile Website does not preview properly in Dreamweaver's Live View or in my web browser

I'm using Dreamweaver 12.0 Build 5861.
I can't figure out what I'm doing wrong. I go
File / New / Page from Sample / Mobile Starters / JQuery Mobile with theme (local).
I then save my page.
Then when I go to preview my new page in Live View, it shows a page without any styles, etc.
When I upload the page and additional files created by Dreamweaver to my server. I preview it and it will look like the default style JQuery page, but when I click on the button to see the content for that page, there is not a "back" button to come back to my home page.
Also, when I try to implement a JQuery mobile swatch, the Swatch window says "No Theme Applied."
I feel like I'm missing something really simple,,, but what? Is there a setting I need to change or am I missing a step? I have looked at many video tutorials online and I believe I am taking the same steps.

You're missing the viewport meta attribute. Add ths to your <head> section.
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
And add this to Line 13:
<div data-role="page" id="page" data-add-back-btn="true">
Do this for all page IDs.

DW CS6 and jQuery Mobile 1.2.0 - does not copy icons folder

Using the trial version of DW CS6
Attempting to create a JQuery Mobile Web site using DW and JQM 1.2.0
This is what I have done.
1. Created a new folder in C:\Program Files\Adobe\Adobe Dreamweaver CS6\configuration\Third Party Source Code\jquery-mobile2
and copied the following files:
jquery-1.8.2.js
jquery.mobile-1.2.0.js
jquery.mobile.structure-1.2.0.css
jquery.mobile.theme-1.2.0.css
\images - all files copied from the JQuery Mobile download for v1.2.0
2. Edited the following files in C:\Program Files\Adobe\Adobe Dreamweaver CS6\configuration\BuiltIn\Mobile Starters:
jQueryMobileLocalMultiPage.htm
jQueryMobileLocalSplitMultiPage.htm
and pointed them to the new jquery-mobile2 folder by changing each path from
../../Third Party Source Code/jquery-mobile/
to
../../Third Party Source Code/jquery-mobile2/
3. In DW, File New and selected the "Page from Sample > Mobile Starters > jQuery Mobile with Theme(local) and DW created a file with paths pointing to the local copies of jquery-mobile2 folder.
4. File > Save As and point to a folder and hit save and DW opens a dialog box asking me if I want to copy the 2 CSS and 2 JS files mentioned above.
So I hit "Copy" and it saves the HTML file and also copies the 2 CSS and 2 JS files. But when I open the HTML file created, in my browser, there are no images displayed. I checked the folder and although DW has copied the other files it has NOT copied the images folder. I have to manually copy the folder across and only then will the images display corrctly in the page.
This appears to be a bug in DW CS8 and its handling of the JQMobile template.
Is there a proper solution other than remembering to manually copy the images folder or can this be noted as a bug and corrected as I want to use the latest version of JQMobile.

Fixed it myself. I realized that I needed to leave <link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/> in index.html and to add a new line <link href="jquery-mobile/y_theme.css" rel="stylesheet" type="text/css"/>

Jquery mobile dinamic action refresh don't work

Hi,
I wan't to refresh region report on jquery mobile with change value on Select list item. I create dinamic action (event Change on item action refresh region). This work fine on desktop application but not on mobile.
What I have to do that dinamic refresh work on mobile.
thanks for help,
Vojko

Probably running into this issue:
http://www.oracle.com/technetwork/developer-tools/apex/application-express/apex-421-patch-set-notes-1885751.html#CHDCEDFH

JQuery Mobile Swatches "No Theme Applied."

I am trying to use the new "jQuery Mobile Swatches" tool. To start I followed the video tutorial and created a new "jQuery Mobile with theme" page from the sample provided. No matter what I do, or what I select, or modify in the css, etc.. the window alays says "No Theme Appied." What am I missing?

had the same problem (wrote webpages in HTML 5.0 and CSS 3.0, and linked up the custom themes in the appropriate place). Custom themes were not displayed (i.e. they were all rendered in white color). I tried this:
when creating themes with the ThemeRoller, make sure to check no fields are empty in the Theme Settings (left hand side column) of the themes you created (in my case, the text color field was empty in "button:normal", "button:hover" and "button:pressed". Enter a color there.
when I loaded my page in IE9, it didn't work. I then opened my page with Firefox - there it did work. Afterwards opened it with IE9 again where then it worked too. However, it only worked on my computer. When I opened my page with IE9 on a different computer the custom themes where ... white.
I tried a few more things, like locally hosting the default themes and editing the default themes, but no use, IE won't read it even though it is linked up correctlty.

Jquery mobile samples

This question was not fully answered in a previous post so I'll ask it again.
The Jquery mobile sample templates are missing in the New Document window - where have they gone?
My students find these extremely useful so I'm hoping that they are still available somewhere.
Ian

Hi Nancy,
I have since found what I was looking for - templates used to be in New/Sample Templates/Jquery Mobile with theme but now I see that in CC2014 you have to first build an html page then insert JQuery mobile elements.
Ian
Ian Bennett
Lecturer
Department of Communication and Media,
Anglia Ruskin University,
East Road,
Cambridge
CB1 1PT
[email protected]

Jquery mobile with phonegap

Similar Messages

Maybe you are looking for