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:

Similar Messages

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

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 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

Special Online Deals Website Proudly Built With Adobe Spry

Hi Don and Kin,
I built
http://www.icouponize.com/
using PHP and the Adobe Spry Ajax framework, and would like to
request to add it to your list of websites implementing Adobe Spry.
iCouponize.com features online and printable coupons,
clearance sale items, special offers, promotions and other hot
product deals.
It implements unobtrosive Spry/Javascript using the Spry
Element selector, accordion panels, sliding panels, collapsible
panels, tabbed panels, the Function:: functionality for Adobe AIR
compatibility, static and dynamic XML data and other Spry-specific
features.
Please let me know how to properly send the request to add it
to your list of Spry-enabled websites.
Thanks!

http://labs.adobe.com/wiki/index.php/Showcase
They have a hidden button in the showcase section called :
Showcase submission :p

Better Compatibility with Adobe Spry

I would hope Adobe will make ADDT more compatible with SPRY. For example, there are some issues when using the SPRY form validation methods with ADDT. Just does not always work.
Secondly, I wish they can remove the use of tables in some of the form. With more and more sites using CSS to layout their forms, I think its time that ADDT got on with the times and caught up a bit.

Yeah I was dissapointed as well that the Spry Validation did not work in ADDT. I did inquire about this. Basically it would require a complete rewrite of the ADDT validation.
So unless there (by some miracle) is a major upgrade to ADDT we won't see it happen.

Jquery Conflict with Adobe BC

Hi,
We have implemented a nice tab look in HTML5, you can see the awesome functionality in this link:
http://technology-day.incompanywebs.com/costa-rica-noticias.html
The Problem
When we get the HTML code directly from the server where the link above is hosted, and we upload the file into adobe bc, just the page, with no template associated, the tabs won't work. You can see what happens here:
http://technologyday.businesscatalyst.com/elsalvador/noticias
For some weird reason the tabs won't work. We tried using the "<script>$j = jQuery.noConflict();</script>" but it won't work.
We also notice that there are some errors present in the console, but they are pretty much the same that show up in the working site. Any ideas on how to solve this would be greatly appreciated. Here is the code for the page also.
http://jsfiddle.net/b5YC3/
Message was edited by: Liam Dilley - moved code over to a jsfildde.

If you use your browsers inspect tool, view the console or use say firebug you can easily see any errors you have.
I can see your using foundation for your framework and using the foundation tabs js.
http://technologyday.businesscatalyst.com/js/foundation/foundation-tab.js
Is the path you have but it is not there on the server.

Remember last tab visited with Adobe Spry Tabs

I have been searching for an answer for this for sometime now. The http://go.spry-it.com/cookie is not working and all forums say to go there. Any help/suggestions. I want to go to the last tab looked at to pop focus after a page refresh or page change. Cookies etc. Any help would be appreciated.

Have a look at the following
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spry Accordion</title>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script>
var Spry; if (!Spry) Spry = {}; if (!Spry.Utils) Spry.Utils = {};
// We need an unload listener so we can store the data when the user leaves the page
// SpryDOMUtils.js only provides us with a load listener so we create this function
Spry.Utils.addUnLoadListener = function(handler /* function */)
    if (typeof window.addEventListener != 'undefined')
        window.addEventListener('unload', handler, false);
    else if (typeof document.addEventListener != 'undefined')
        document.addEventListener('unload', handler, false);
    else if (typeof window.attachEvent != 'undefined')
        window.attachEvent('onunload', handler);
Spry.Utils.Cookie = function(type /* String*/, name /* String */, value /* String or number */, options /* object */){
    var name = name + '=';
    if(type == 'create'){
        // start cookie String creation
        var str = name + value;
        // check if we have options to add
        if(options){
            // convert days and create an expire setting
            if(options.days){
                var date = new Date();
                str += '; expires=' + (date.setTime(date.getTime() + (options.days * 86400000 /* one day 24 hours x 60 min x 60 seconds x 1000 milliseconds */))).toGMTString();
            // possible path settings
            if(options.path){
                str += '; path=' + options.path
            // allow cookies to be set per domain
            if(options.domain){
                str += '; domain=' + options.domain;
        } else {
            // always set the path to /
            str += '; path=/';
        // set the cookie
        document.cookie = str;
    } else if(type == 'read'){
        var c = document.cookie.split(';'),
            str = name,
            i = 0,
            length = c.length;
        // loop through our cookies
        for(; i < length; i++){
            while(c[i].charAt(0) == ' ')
                c[i] = c[i].substring(1,c[i].length);
                if(c[i].indexOf(str) == 0){
                    return c[i].substring(str.length,c[i].length);
        return false;
    } else {
        // remove the cookie, this is done by settings an empty cookie with a negative date
        Spry.Utils.Cookie('create',name,null,{days:-1});
var cookie = Spry.Utils.Cookie('read','panel');
//alert(cookie);
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: cookie ? parseFloat(cookie) : 0});
Spry.Utils.addUnLoadListener(function(){
    Spry.Utils.Cookie('create','panel',TabbedPanels1.getCurrentTabIndex());
</script>
</body>
</html>
Gramps

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

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 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.

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 with Adobe Spry?

Similar Messages

Maybe you are looking for