in my notification dialog,
i want to specified by parameter dialog box type.
but theming isnt manage after all, so input and others arent theme with css from my javascript function.
HTML :
<div id="notification" data-role="page" >
<div data-role="header" data-theme="c">
<h1></h1>
</div>
<div data-role="content" data-theme="c">
</div>
</div>
JAVASCRIPT :
function notification(title, text, notification_transition){
$.mobile.changePage( "#notification", {
transition: notification_transition,
role: "dialog"
} );
$("#notification h1").html(title);
$("#notification p.message").html(text);
$("#notification div[data-role=content]").html('<p class="message"></p>'+
'<p>Identifiant</p>'+
'<input type="text" value="" data-theme="a">');
try
{
navigator.notification.vibrate(500);
}
catch(error) {}
}
how relaunch jaquery mobile theming after $("#notification div[data-role=content]").html();
thank in advance
Metos
You could try the following:
http://forum.jquery.com/topic/how-to-refresh-the-theme-of-a-button
Related
I have a php form with several checkboxes and radio buttons using jqueryMobile. When the user submits the form a javascript function is executed. This function basically checks wether any radio button has been pressed or not and warns the user that he/she has to check a minimum of one radio button. I tried a lot of things to show a simple alert dialog box but cannot seem to make it work in mobile devices. My android form basically shows nothing. Any ideas will be highly appreciated. Thanks.
Here is the form:
<form id="EnviarEnquesta">
<input type="submit" id="submitButton" value="<?php echo(_('SendSurvey')); ?>" onClick="doSomeChecks();" />
</form>
Here is the javascript function
function doSomeChecks(){
var formObj = document.getElementById("enviarEnquesta");
(...)
if(counter == 0){
/*display a jquery mobile alert type*/
}else{
/*just submit the form*/
document.getElementById("enviarEnquesta").submit();
}
}
Basic popup usage:using the open() method:
<div data-role="page" id="page">
<div data-role="header">
<h1>Example Page</h1>
</div>
<div role="main" class="ui-content">
<button id="openpopup">Open popup</button>
</div>
<div data-role="popup" id="popupBasic"> <p>This is a completely basic popup, no options set.</p> </div>
</div>
<script>
$(document).on("pagecreate","#page", function(){
$("#openpopup").click(function(){
var contador=0;
if(contador == 0)
$( "#popupBasic" ).popup( "open");
else alert("contador is not zero!");
})
});
</script>
I have the following code:
http://jsfiddle.net/xFzy8/4/
HTML:
<body>
<!-- ..................... Page 1 - HOME ..................... -->
<!-- ......................................................... -->
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h3>My Test App</h3>
</div>
<div data-role="content">
<div class="container-wrapper">
<!--
..................FOR TESTING ONLY..................
<div class="container">
<div data-role="collapsible" id="coll1">
Delete
<h3>Item 1</h3>
<p>This is item 1</p>
</div>
</div>
..................................................
-->
</div>
</div>
</div>
</body>
CSS:
.btn-delete{
position:absolute;
top:0;
right:2px;
display:block !important;
z-index:10000;
}
.ui-collapsible {
position: relative;
}
Javascript:
$(document).ready(function() {
var $containerWrapper = $('.container-wrapper');
/*..............FOR TESTING...................
//var $btnDelItem1 = $('#delColl1').detach();
//$('#coll1').append($btnDelItem1);
..............................................*/
for(var i=1; i<=5; i++) {
var $containerDiv = $('<div>', {'class':'container'})
var $divCol = $('<div>', {'data-role':'collapsible', 'id':'coll'+i});
var $btnDel = $('<a>', {'href':'#', 'class':'btn-delete ui-btn ui-icon-delete ui-corner-all ui-btn-icon-notext', 'id':'btnDel'+i});
var $colHead = $('<h3>', {'text':'Item '+i});
var $colContent = $('<p>', {'text':'This is item '+i});
$containerDiv.append($divCol);
$divCol.append($colHead);
$divCol.append($colContent);
$containerWrapper.append($containerDiv);
$containerWrapper.trigger('create');
$divCol.append($btnDel);
}
});
I am using the same code to run the webapp on firefoxOS emulator. But i am getting a different result. This is the result i'm getting on the emulator:
http://imagizer.imageshack.us/v2/800x600q90/208/mzv6.jpg
On JSFiddle, the Delete icon is appearing as it should. But on the emulator, the delete button is appearing below the collapsible headers. Even when i open the 'index.html' in a normal browser, im getting the same result as in the emulator.
How do I fix this?
Thanks!
Try these 2 things:
1 put the btn-delete class at the end of the list instead of first in the list of classes and see if it makes any difference.
2 Instead of the class, just use jQuery to set the CSS. After appending the created DOM elements, run this:
$btnDel.css({"position": "absolute", "top": "0", "right": "2px", "zIndex": "10000"});
Here is your updated FIDDLE
Also, instead of jQuery document.ready, use one of the jQM init events like:
$(document).on("pageinit", function() {...
If jQM is still overriding your class, try appending the DOM elements in pageinit, and then set the CSS in pageshow.
Using i18next, how can I translate JQuery Mobile widgets? Specifically, I'd like to know how to do that without resorting to using data-i18n-target to modify generated inner elements, because that is brittle since future widget versions may change the generated code.
Is there a specific page lifecycle event I can subscribe to in order to be able to have i18next modify the DOM before the widget transformation happens?
In this example (see jsfiddle), some markup is correctly translated, but homeBtn and submitBtn are not:
HTML:
<div id="home_page" data-role="page">
<div data-role="header">
<a id="homeBtn" href="/" data-icon="home" data-i18n>app.home</a>
<h2 data-i18n>app.title</h2>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput1" data-i18n>app.label</label>
<input type="text" name="textinput1" id="textinput1" value=""></input>
</div>
<form action="">
<input id="submitBtn" type="submit" data-i18n="[value]app.button" />
</form>
</div>
<div data-role="footer">
<center>
<p data-i18n>app.footer</p>
</center>
</div>
</div>
JavaScript:
var i18nOpts = {
resStore: {
dev: {
translation: {
app: {
button: 'Button',
home: 'Home',
label: 'Label',
footer: 'Footer',
title: 'i18n Test'
}
}
},
}
};
i18n.init(i18nOpts).done(function() {
$("html").i18n();
});
jQuery Mobile widgets are auto-initialized (Markup enhancement) on two events, pagebeforecreate and pagecreate. The majority of widgets are initialized once pagecreate occurs.
All you need is to wrap i18n code in pagebeforecreate.
$(document).on("pagebeforecreate", function () {
// code
});
Demo
I'm writing a very simple app in PhoneGap + jQuery Mobile.
The aim is to become more confident in writing PhoneGap applications.
The app is very simple: it has an HomePage with a navbar.
The navbar has three buttons: Contacts, Calendar and Docs.
The buttons manage three tabs in the <div data-role="content"> element.
I have hidden those three tabs.
When the user tap on the navbar, I can navigate through the tab correctly.
Now, the problem: I successfully load the Contacts in the first tab but, when I navigate to it, I see only the dividers!
Instead, if I do not hide the Contact tab in the home, I can see the contacts correctly.
I'd like to load all the data while the user is still in the home page. So, while he decide what to do, the app should has enough time to load them.
The following screenshots show what I mean:
Why does this happens?
If you need my code, here it is (only significant part! ;) )
HTML:
<!-- Home jQueryMobile page -->
<div data-role="page" id="homePage" data-dom-cache="true">
<!-- Header -->
<div data-role="header" id="homePageHeader" data-position="fixed">
<h1>Frankie App</h1>
</div>
<!-- android style navbar. If the device is not an android, it
will not be shown -->
<div data-role="navbar" id="androidNavBar" hidden>
<ul>
<li>Contatti</li>
<li>Calendario</li>
<li>Documenti</li>
</ul>
</div>
<!-- Page content: it contains 4 tabs. The home + the 3 tabs reachable by the navbar-->
<div data-role="content">
<div id="homeLogger" hidden>Logger</div> <!-- I use this div as a console to debug -->
<div id="tabs">
<div id="homeTab">
<p align="center">
<img src="http://leaderchat.files.wordpress.com/2011/10/bigstock_cartoon_frankenstein_moster_as_151295541.jpg" height="280"/>
</p>
</div>
<div id="contactsTab">
<h1>Contacts</h1>
<ul id="contactList" data-role="listview" data-autodividers="true" data-inset="true">
</ul>
</div>
<div id="calendarTab" hidden>
<h1> Calendar </h1>
</div>
<div id="docsTab" hidden>
<h1> Documents </h1>
</div>
</div>
</div>
<!-- Footer -->
<div data-role="footer" id="homePageFooter" data-position="fixed">
<!-- iOS style navbar. If the device is not an iPhone, it
will not be shown -->
<div data-role="navbar" id="iOSNavBar" hidden>
<ul>
<li>Contatti</li>
<li>Calendario</li>
<li>Documenti</li>
</ul>
</div>
</div>
</div>
JS:
$('#homePage')
.bind('pageinit',
function(){
//Comment the next line to remove the logger from the home page
$("#homeLogger").show();
$("#homeLogger").text("jQuery Initialized");
//Registering to PhoneGap/Cordova lifecycle events
$(document).bind('deviceready', initialize)
});
// ============ //
// Initializers //
// ============ //
function initialize()
{
$("#homeLogger").text("device ready");
initNavBar();
initContacts();
}
function initNavBar()
{
//Retrieve the device platform using PhoneGap
platform = window.device.platform;
$("#homeLogger").text("detected platform: "+platform);
var navbar = null;
if(platform && platform == Constants.ANDROID){
navbar = $("#androidNavBar");
$("#homeLogger").text("show Android navBar");
} else {
//If the platform is not an android, I keep the bottom
//navbar because I prefer its look
navbar = $("#iOSNavBar");
$("#homeLogger").text("show iOS navBar");
}
if(navbar) //safety check to avoid null reference.
navbar.show(); //jQuery show() method
}
function initContacts(){
$("#homeLogger").text("loading contacts...");
var contManager = new ContactManager();
contManager.getAllContacts(["id", "name"],
function(retrievedContacts){
for(var i=0; i<retrievedContacts.length; i++){
var toAppend = "<li><a href='#'>"+retrievedContacts[i].name.formatted+"</a></li>";
$("#contactList").append(toAppend);
$("#homeLogger").text("element appended "+i);
}
$("#homeLogger").text("element "+$("#contactListview"));
$("#contactList").listview('refresh');
$("#homeLogger").text("list refreshed");
},
function(error){
$("#homeLogger").text("error: "+error);
});
}
// ========== //
// Navigation //
// ========== //
function showTab(tab)
{
$("#homeLogger").text("Selected Tab: "+tab);
$("#tabs").find("div").hide();
$("#"+tab.id).show();
}
Thank you very much for your help.
Rik
Have your tried to recreate the content page after dynamically adding content?
$('[data-role="content"]').trigger('create');
I gues your should do this b4 refreshing your ListViews (but after your for-loop has finished).
I'm bringing external data via JSON for my app. The loading of data is OK.
The problem is when I display this data. I have this page:
<!-- cinema -->
<div data-role="page" id="cinema">
<div data-role="header">
<h1>WGBN Cinema Salvador</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-divider-theme="d" id="programa">
</ul>
</div>
</div>
and this javascript to this page:
$(document).delegate("#cinema", "pageinit", function(data) {
// loop nas salas
$.each($.objCinema, function(key,value) {
$("#programa").append('<li data-role="list-divider">'+value.sala+'</li>').trigger('create');
$.each(value.filmes, function(a,b) {
$.each(b, function(c,d) {
$("#programa").append('<li>'+d+'</li>').trigger('create');
});
});
});
});
And even using .trigger("create") elements inserted in the page are not being styled by jQuery Mobile, I'm doing something wrong?
Try this -
$("#programa").listview("refresh");
/edit
I forgot to mention to try this listview refresh after your inner for each loop.