I am using PhoneGap, jQuery mobile in Xcode. I have a local xml (data.xml) file with the following data
<?xml version="1.0" encoding="utf-8" ?>
<RecentTutorials>
<Tutorial author="The Reddest">
<Title>Silverlight and the Netflix API</Title>
<Categories>
<Category>Tutorials</Category>
<Category>Silverlight 2.0</Category>
<Category>Silverlight</Category>
<Category>C#</Category>
<Category>XAML</Category>
</Categories>
<Date>1/13/2009</Date>
</Tutorial>
<Tutorial author="The Hairiest">
<Title>Cake PHP 4 - Saving and Validating Data</Title>
<Categories>
<Category>Tutorials</Category>
<Category>CakePHP</Category>
<Category>PHP</Category>
</Categories>
<Date>1/12/2009</Date>
</Tutorial>
<Tutorial author="The Tallest">
<Title>Silverlight 2 - Using initParams</Title>
<Categories>
<Category>Tutorials</Category>
<Category>Silverlight 2.0</Category>
<Category>Silverlight</Category>
<Category>C#</Category>
<Category>HTML</Category>
</Categories>
<Date>1/6/2009</Date>
</Tutorial>
<Tutorial author="The Fattest">
<Title>Controlling iTunes with AutoHotkey</Title>
<Categories>
<Category>Tutorials</Category>
<Category>AutoHotkey</Category>
</Categories>
<Date>12/12/2008</Date>
</Tutorial>
And I have the following code in my html file:
<script type="text/javascript">
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "data.xml",
dataType: "xml",
success: function(xml){
$(xml).find("Tutorial").each(function()
{
$("#output").append($(this).attr("author") + "<br />");
});
}
});
});
</script>
<script type="text/javascript">
function parseXml(xml)
{
$(xml).find("Tutorial").each(function()
{
$("#output").append($(this).attr("author") + "<br />");
});
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>The title</h1>
</div><!-- /header -->
<div data-role="content" id="output">
<--! XML DATA SUPPOSED TO BE DISPLAYED HERE BUT I GOT NOTHING HERE -->
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>The Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
I am using Xcode for the output in the iPhone simulator and its not displaying anything inside the content which is supposed to be displayed.
Where did I do mistake or do I need third-party xml parser ?
Any suggestions would be a great help.
Thanks
I have found the solution for this and it worked perfectly for me.
Instead of using
$(document).ready(function() {
});
I wrote the following:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
// AJAX code goes here
});
<script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.js"></script>
Its important to note that this code should be between the jquery-core and jquery-mobile link as I did above.
Related
I'll try and provide as much information as i possibly can.
Currently I've started developing an application which will be able to receive recent updates via the pull to refresh feature. I have set up a HTTP-GET and it successfully receives the data from the JSON file and loads it into my pull to refresh. At the moment it's only loading one specif message. How do i add more so it can receive other notifications/messages via the pull to refresh? I'll post a picture of my application in action and the post the HTML, Javascript code and the JSON file. If anyone could help me add more messages to my application from the JSON file or point me in the correct direction i would really appreciate it!
This is what my application looks like when i pull down the pull to refresh loads the information from the JSON file.
This is what my JSON file. I don't understand how i can load ExampleMessage2 into my application.
{
"response1": [
{"announcement_name": "ExampleMessage1"},
{"date": "26/05/2015"},
{"message": "ExampleMessage1"}
],
"response2": [
{"announcement_name": "ExampleMessage2"},
{"date": "27/05/2015"},
{"message": "ExampleMessage2"}
]
}
This is my JavaScript file. This receives the data from the webhost.
.controller('Controller', function($scope, $http) {
$scope.items = [1,2,3];
$scope.doRefresh = function() {
$http.get("")
.success(function(data) {
$scope.announcement_name = data.announcement_name;
$scope.date = data.date;
$scope.message = data.message;
})
.finally(function() {
// Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
});
};
});
And finally this is my HTML document which loads the data into the div form.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Announcement</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="Announcement">
<ion-view view-title="Announcements">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">Pull To Refresh</h1>
</ion-header-bar>
<ion-view view-title="Announcements">
<ion-content ng-controller="Controller">
<ion-refresher on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="item in items" ng-click="getData()">
<div class="list card">
<div class="item item-divider">{{announcement_name}} - {{date}}</div>
<div class="item item-body">
<div>
{{message}}
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</body>
</html>
What you're doing right now is using ng-repeat on $scope.items which contains three number elements. Then you are rendering $scope.announcement_name and $scope.message which contain the same value each time you iterate.
You need to store the data in $scope.items :
.controller('Controller', function($scope, $http) {
$http.get("http://www.wikicode.co.uk/announcement.json")
.success(function(data) {
$scope.items = data;
});
$scope.doRefresh = function() {
$http.get("http://www.wikicode.co.uk/announcement.json")
.success(function(data) {
$scope.items = data;
})
.finally(function() {
// Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
});
};
});
and then in the html you need to get the properties for each item (eg. {{item.announcement_name}} ):
<body ng-app="Announcement">
<ion-view view-title="Announcements">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">Pull To Refresh</h1>
</ion-header-bar>
<ion-view view-title="Announcements">
<ion-content ng-controller="Controller">
<ion-refresher on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="item in items" ng-click="getData()">
<div class="list card">
<div class="item item-divider">{{item.announcement_name}} - {{item.date}}</div>
<div class="item item-body">
<div>
{{item.message}}
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
I've built a Cordova 2.0 App for iOS with jQuery Mobile 1.2. Framework inside. I've successfully installed the Childbrowser plugin (in this version and with this guide. Thanks for the help from these nice guys at this point,
Now I can call the Childbrowser directly with an onclick event with this javascript in the head:
<script type="text/javascript">
app.initialize();
function launchCB() {
if(window.plugins.childBrowser != null) {
window.plugins.childBrowser.onLocationChange = function(loc){};
window.plugins.childBrowser.onClose = function(){};
window.plugins.childBrowser.onOpenExternal = function(){};
window.plugins.childBrowser.showWebPage('http://www.google.de');
} else {
alert('not found');
}
}
</script>
OR directly with for example
Google
Now I want to open all links with the attribute target="_blank". Therefore I've found this thread and picked up the solution by Charlie Gorichanaz.
But when I start the application in the iPhone simulator, all I get is the sandclock or rather the spinning wheel of death of jQuery mobile.
I'm happy for every helpful advice, I never coded before this app. Here's my index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "format-detection" content = "telephone=no"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Cordova</title>
<script type="text/javascript" src="cordova-2.0.0.js"></script>
<script type="text/javascript" src="ChildBrowser.js"></script>
<gap:plugin name="ChildBrowser" /> <!-- latest release -->
<script type="text/javascript" charset="utf-8" src="EmailComposer.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function launchCB() {
if(window.plugins.childBrowser != null) {
window.plugins.childBrowser.onLocationChange = function(loc){};
window.plugins.childBrowser.onClose = function(){};
window.plugins.childBrowser.onOpenExternal = function(){};
window.plugins.childBrowser.showWebPage('http://www.google.de');
} else {
alert('not found');
}
}
/*
var args;
cordova.exec(null, null, "EmailComposer", "showEmailComposer", [args]);
*/
</script>
<!-- jQuery mobile -->
<link type="text/css" rel="stylesheet" media="screen" href="jqm/jquery.mobile-1.2.0-alpha.1.min.css">
<link type="text/css" rel="stylesheet" media="screen" href="jqm/Changes.css">
<script type="text/javascript" src="jqm/jquery-1.7.2.min.js"></script>
<script>
// for using childbrowser to open pdf on remote sites
$(document).bind( "mobileinit", function() {
$.mobile.allowCrossDomainPages = true;
}
);
// the function i want to implement
$(document).bind("pageinit", function() {
onDeviceReady();
});
function onDeviceReady() {
var root = this;
cb = window.plugins.childBrowser;
if (cb != null) {
$('a[target="_blank"]').click(function(event) {
cb.showWebPage($(this).attr('href'));
event.preventDefault();
event.stopImmediatePropagation();
return false;
});
}
}
// don't know is this thing is right in place...
document.addEventListener("deviceready", onDeviceReady, false);
</script>
<script src="jqm/jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
<body>
<section data-role="page" id="home" data-theme="a" data-position="fixed">
<div data-role="header"> <!-- header -->
<h1>Test</h1>
<div style="position:absolute; top:0px; right:5px;">
<a href="#about" data-transition="pop">
<img src="images/schlange-sw.png" alt="Schlange">
</a>
</div>
</div>
<!-- /header -->
<div data-role="content"> <!-- content -->
<a id="domainbut" onclick='launchCB()'>Working </a>
not working
</div>
<!-- content -->
<div data-role="footer" data-theme="a" data-position="fixed"></div>
</section>
<section data-role="dialog" id="about" data-close-btn-text="Close This Dialog">
<div data-role="header">
<h1>Über</h1>
</div>
<div data-role="content">
<h1 style="text-align: center;"></h1>
<div align="center">
</div>
<p style="text-align: center;">The owner of this app</p>
<button onclick="cordova.exec(null, null, 'EmailComposer', 'showEmailComposer', [args]);">Compose Email</button>
<p>
OK
</p>
</div>
</section>
</body>
</html>
Thank you in advance.
Regards
Kieke
#Kieke, if you decide to do away with ChildBrowser, I found the following worked for me.
NOTE: Assuming you are using PhoneGap 2.x
In your Cordova.plist set OpenAllWhitelistURLsInWebView = YES and set your ExternalHosts list, * is fine. Anything you want the webview not to block (viewed in Safari or in the app) has to be in your ExternalHosts list.
In your MainViewController.m add the following code to the bottom, you can manually redirect any URL to Safari, see the if statement for www.loadDomainInSafari.com:
- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL *requestURL =[ [ request URL ] retain ];
NSString *host = [ [ requestURL host] retain ];
// if YES, directs to WebView
// otherwise, takes OpenAllWhitelistURLsInWebView setting
// if www.loadDomainInSafari.com, open in Safari by explictly stating NO.
// otherwise take OpenAllWhitelistURLsInWebView setting of YES
if ([host isEqualToString:#"www.loadDomainInSafari.com"]) {
return ![ [ UIApplication sharedApplication ] openURL: [ requestURL autorelease] ];
}
[ requestURL release ];
return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
}
In your Cordova.plist, do you have OpenAllWhitelistURLsInWebView = YES and are all the domains (eg. www.google.com, localhost) you are connecting to are in your ExternalHosts list?
Look in the console of your Xcode debugger as #Littm describes, you will see if your link are being blocked because they aren't in the whitelist.
You can also check your system.log as well, tail /var/log/system.log for any errors after you execute.
I am using the following technologies:
- jQuery Mobile 1.0.1
- Phonegap 1.3.0
- Xcode 4.2
When I try to submit form data to a remote server, I get success using the application through the browser.
When I try to submit form data to a remote server using the application natively, I can not send.
I need some plugin PhoneGap?
I need some setup Xcode?
The following sample code was run on the iPhone Simulator 5.0:
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="scripts/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.mobile-1.0.min.js"></script>
<script>
$(document).ready(function() {
$('#loginForm').submit(function() {
$('#output').html('Connecting....');
var postTo = 'http://myserver/login.php';
$.post(postTo,{username: $('[name=username]').val() , password: $('[name=password]').val()} ,
function(data) {
if(data.message) {
$('#output').html(data.message);
} else {
$('#output').html('Could not connect');
}
},'json');
return false;
});
});
</script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p id="output"></p>
<form method="post" id="loginForm">
Username: <input type="text" name="username"> <br /> <br />
Password: <input type="password" name="password"> <br />
<input type="submit" value="Login">
</form>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
In my server: (login.php)
<?php
if(isset($_POST['username']) and isset($_POST['password'])) {
if ($_POST['username'] == 'test' and $_POST['password'] == 'test') {
$data['success'] = true;
$data['message'] = 'Login succesful';
} else {
$data['success'] = false;
$data['message'] = 'Login failed';
}
// return json
echo json_encode($data);
}
?>
Does anyone have any idea how to solve this problem?
Both PhoneGap and jQuery Mobile examples use AJAX request not $.post.
This blog entery uses $.ajax and jQuery Mobile
http://www.giantflyingsaucer.com/blog/?p=1948
This this other one uses a XMLHttpRequest:
http://wiki.phonegap.com/w/page/42450600/PhoneGap%20Ajax%20Sample
Hopefully that gets you pointed in the right direction.
I don't know if it's helpful but your PHP uses "and" on line 4 but I think it should use && to test if the posted variables are both called test.
I'm using jQuery 1.4.2 for a fixed bar on my site that scrolls with the site as you scroll.
But I'm also using 1.6.1 for a facebook thing I'm doing, and when I add them together, the bar breaks and the facebook thing works, but when I add the noConflict in, the bar works, but the facebook breaks, so if you could look at my code, and help me?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" href="themes/default/jx.stylesheet.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict();
</script>
<script type="text/javascript" src="src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
mc$(document).ready(function() {
mc$("#floating-bar").jixedbar();
});
</script>
<style type="text/css">
body {
margin: auto;
background-image: url(template.png);
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
<div id="floating-bar">
<ul>
<li title="Home"><img src="icons/home.png" alt="" /></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title="Around The Web"><img src="icons/network.png" alt="Share" />
<ul>
<div id="fb-root"></div>
<!-- USE 'Asynchronous Loading' version, for IE8 to work
http://developers.facebook.com/docs/reference/javascript/FB.init/ -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '209445949091775',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<li><a id="share_button" href="#"><img src="icons/facebook.png" title="Facebook" /> Facebook</a></li>
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'Atomic Star Studios',
link: 'http://www.facebook.com/pages/Atomic-Star-Studios/228192187207829',
picture: 'http://www.atomicstarstudios.com/logo.jpg',
caption: 'http://www.atomicstarstudios.com/',
description: 'This is the content of the "description" field, below the caption.',
message: 'Visit Atomic Star Studios for excellent prices on great printg and professional design! We Have All Your Marketing Needs!!!'
});
});
});
</script>
<li><img src="icons/twitter.png" title="Twitter" /> Twitter</li>
</ul>
</li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title"Top Pages">Top Pages
<ul>
<li title="About"><img src="icons/info.png" alt="About" /></li>
<li title="Products"><img src="icons/blogs.png" alt="Products" /></li>
<li title="Portfolio"><img src="icons/block.png" alt="Portfolio" /></li>
</ul>
</li>
</ul>
<span class="jx-separator-left"></span>
<div class="text-container">Like us on Facebook!</div>
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Atomic-Star-Studios/228192187207829&layout=button_count&send=true&show_faces=false&width=100&action=like" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:30px;" allowTransparency="true"></iframe>
Follow #atomstars
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<span class="jx-separator-left"></span>
<ul>
<li title="Facebook"><img src="icons/facebook.png" alt="" /></li>
<li title="Twitter"><img src="icons/twitter.png" alt="" /></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title="Chat with us Live!"><img src="http://www.atomicstarstudios.com/livezilla/image.php?id=04&type=inlay"></li>
</ul>
<span class="jx-separator-right"></span>
</div>
</body>
</html>
There are two problems with your code.
First, you should call the noConflict in-between both jQuery requests, not after the second one. You need to load the modules you need with each version of jQuery with the version so that when you call noConflict, references to the plugins are moved with it. You should also add "true" to noConflict so that all references to jQuery are removed before loading the second one:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
For more information, see the jQuery.noConflict documentation.
With that said, you should really consider find a way to not have to do this. It is not an elegant way to use jQuery.
TO ANSWER #TGR: Try this for yourself and you'll see for yourself that my solution works perfectly fine:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jixedbar.googlecode.com/svn/trunk/src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
alert('jQuery ' + mc$.fn.jquery + ': ' + ( typeof mc$.fn.jixedbar ));
alert('jQuery ' + jQuery.fn.jquery + ': ' + ( typeof jQuery.fn.fixedbar ));
});
</script>
<title>6367968</title>
</head>
<body>
<p>6367968</p>
</body>
</html>
The first alert will show "jQuery 1.4.2: function" while the second one will show "jQuery 1.6.1: undefined".
load jQuery 1.4
load all plugins which need to use 1.4
use noConflict
load jQuery 1.6
The problem is that jQuery plugins tend to be written this way:
(function($) {
// plugin code using $ for jQuery calls
})(jQuery)
i. e. they have an internal copy of whatever window.jQuery was at the time the plugin loaded, and you cannot change that afterwards.
update: a little more detail on how noConflict works (was too long for the comments). When you load jQuery, it creates an object containing all its functions and data, and sets window.$ and window.jQuery to that object. The old value of window.$ and window.jQuery is saved in the object.
When you call noConflict, it restores the saved value (by default for $; if you call it with true, also for jQuery). This is useful if you had something in those variables before loading jQuery, and don't want it to be overwritten. E.g. if you loaded things like this:
load jQuery 1.6
load jQuery 1.4
call noConflict(true)
then the first step would put jQuery 1.6 into $ and jQuery, the second would overwrite them with 1.4, and noConflict would restore $ and jQuery to the 1.6 version.
But since you load 1.4 first, and call noConflict between the two, the old value for $ and jQuery which is restored is undefined, which is not particularly useful, and will be overwritten by 1.6 anyway, so the noConflict call does not do anything useful beyond returning the value of $ which then can be stored by some other name ($mc in this case). var $mc = $; would work just as well for that.
As for the plugins, the auto-executing function copies the value of window.jQuery at the moment the plugin is loaded, and it does not matter at all what happens to window.jQuery afterwards:
window.jQuery = 'foo';
(function($) {
window.fun = function () {
console.log($);
}
})(jQuery);
window.jQuery = 'bar';
fun(); // will log 'foo'
I am using the jQuery Mobile date picker control but I cannot change any of the properties. For example, the following code will attempt to set the first day of the week to Wednesday, in the document ready function but it doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
<script src="jquery.ui.datepicker.js"></script>
<script src="jquery.ui.datepicker.mobile.js"></script>
<script>
$(document).ready(function()
{
$("#date").datepicker({ firstDay: 3 });
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="home">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
<div data-role="fieldcontain">
<input type="date" name="date" id="date" value="" />
</div>
</div>
</div>
</body>
</html>
Any ideas what I'm doing wrong? Is this failing to work because the date picker is already displayed?
I have managed to change to change the properties by changing the "jquery.ui.datepicker.mobile.js" file
To change the date format to : "dd/mm/yy" Code shown below
//bind to pagecreate to automatically enhance date inputs
$( ".ui-page" ).live( "pagecreate", function(){
$( "input[type='date'], input[data-type='date']" ).each(function(){
$(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true, dateFormat: "dd/mm/yy" }));
});
});
What happens if you try a different setter?
$('.selector').datepicker('option', 'firstDay', 1);
Your missing the bind()
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
Docs (At the bottom of the page): http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/
Also I like the DateBox a littler better IMO: http://dev.jtsage.com/jQM-DateBox/
I had a similar problem and had to change two lines in jquery.ui.datepicker.mobile.js
First, I needed to store the return value of the call to prevDp (line 18).
var value = prevDp.call( this, options );
Then I had to return this value instead of this (line 46)
return value;
Now you should be able to call the datepicker with options like Matt Ball suggested.