I am new to jquery mobile.
Please find the following code...
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
var count = 1;
var newSet = '<div data-role="fieldcontain">' +
'<fieldset data-role="controlgroup">'+
'</fieldset></div>';
$(function (){
$('.cbDiv').append(newSet);
}) ;
$(document).on("click", ".add", function() {
newSet = newSet += '<input type="radio" name="radio' + count + '" id="radio' + count + '" value="radio' + count + '" />' +
'<label for="radio' + count + '">radio' + count + '</label>';
$(".cbDiv").html(newSet);
count++;
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<input type="button" class="add" value="Add Radio Button" />
<div class="cbDiv"></div>
</div>
</div>
</body>
I dynamically adding the radio buttons in jquery mobile. It works fine..
but, its not working as radio button (ie. single selection). It working as a check box.(ie. Multiple selection).
How to prevent this?
Also the style has not applied.
With radio buttons you will need to give the name attribute. If you give each box the same name, then it will behave as single selection instead of a checkbox. In your case, they name attribute changes with every radio button. You should remove the number from it and it should work as expected.
This jsfiddle shows how it works.
The style should apply if you use the proper classes and CSS selectors. If it doesn't, you add the wrong class or you have a mistake in your CSS.
Edit: I see you use radio as id. You should probably have this as class instead, since id should only be used for a single element on a page.
Related
I'm trying to see if I can get the Bootstrap datePicker (datePicker)to work in Grails v3.3.9/fields plugin 2.2.10
I've done a standalone page, that is I create a controller, and give it an action called 'ldt'.
I create grails view called ldt.gsp like this. When I hit trigger my controller in the browser - this simple page renders fine and datePicker works
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap datepicket demo</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script type='text/javascript'>
$(function(){
//$('.input-group.date').datepicker({
$('#datepicker').datepicker({
calendarWeeks: true,
todayHighlight: true,
autoclose: true
});
});
</script>
</head>
<body>
<div class="container">
<h1>Bootstrap datepicker</h1>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</body>
</html>
You can see that here. This is not using normal Grails site mesh etc
So I tried to put the same into views/layouts/main.gsp
So here is the head section of my revised main.gsp. (I've not included Bootstrap nor jQuery as them come with grails application.js).
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>
<g:layoutTitle default="Grails"/>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<asset:link rel="icon" href="favicon.ico" type="image/x-ico"/>
<asset:stylesheet src="application.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script type='text/javascript'>
$(function(){
$('#datepicker').datepicker({
calendarWeeks: true,
todayHighlight: true,
autoclose: true
});
});
</script>
<g:layoutHead/>
<%-- header assets --%>
</head>....
Now I am trying to render a specific field in the domain class - which is of type LocalDateTime. To try and do this I have created a _fields/localDateTime/_wrapper.gsp that looks like this in which I setup the input control (as I did for the standalone page), but I give the input a start date time for now.
localDateTime/_wrapper.gsp
<%# page import="java.time.LocalDateTime; java.time.format.DateTimeFormatter" %>
<g:set var="localDateTimePattern" value="${message(code: 'default.localDateTime.format',default: 'yyyy-MM-dd HH:mm')}"/>
<div class="fieldcontain" >
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class="input-group date" id='datetimepicker1' >
<label for=${this.pageScope.property}> ${this.pageScope.getVariable("label")} </label>
<input type='text' class="form-control" value="${java.time.LocalDateTime.now().toString()}"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
When I go this page in the browser it gets rendered, but the clickable field behaviour etc does not fire and the field has no calendar icon on the right hand side (this may be because Grails is loading Bootstrap 4, and when I tried the standalone with v4.3.1 the icon didn't render - but the click event still worked).
See rendered form here - using the 'edit' action which in turn is using standard scaffolds with <f:all which calls my _wrapper.gsp.
The string value of the date gets rendered fine (not formatted), but I get no click action and calendar doesn't pop up - no action at all. I've included a snip of the browser page inspection in the browser opened for the contractSignedDate property.
So if a standalone page gsp works just fine (albeit with Bootstrap 4 as loaded by Grails bau) does my click action not fire
So why can't the gsp action action fire when using the main.gsp/normal fields plugin/and _wrapper.gsp for java LocalDateTime? It worked for standalone gsp example so I know the datePicker works
How can I get the Bootstrap datepicker as described here working in a Grails scaffolded form?
PS it's not missing jqueryUI library - I've included 1.12.1 in both standalone and main.gsp see this image from inspector. Works fine on standalone but not using main.gsp and scaffolded forms
PS if I click into the scaffolded form property as shown in the _widget.gsp, the outer text box is highlighted in blue (which the bau grails rendered elements don't - so some form of click action is happening - just not getting a calendar to pop up.
This is very odd. When referenced on standalone gsp and link JS/CSS from CDN, the page worked.
If I add <meta name="layout" content="main" /> and had the page rendered via site mesh in main.gsp it would fail.
I tried many different combinations in the standalone page <head>, and basically the date picker doesn't seem to need the bootstrap js to work - but it does need the jQuery and it must be in the head section.
If you want the styles you need to include the bootstrap.css and the bootstrap-datepicker3 CSS.
<head>
<%--<meta name="layout" content="main" />--%>
<title>Bootstrap datepicket demo</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<%--<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> --%>
<script type='text/javascript' src='//code.jquery.com/jquery-3.3.1.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
</head>
However if you uncommented the meta tag it would all stop. In the end to get this to work I had to edit the /assets/application.js and remove the entries for Bootstrap and jQuery using the local copies in /assets/javascripts, and instead reference these directly from the cdn in main.gsp.
So my working application.js looks like this - where I include my own LCM-app JS:
// This is a manifest file that'll be compiled into application.js.
//
// Any JavaScript file within this directory can be referenced here using a relative path.
//
// You're free to add application-wide JavaScript to this file, but it's generally better
// to create separate JavaScript files as needed.
//= require LCM-app
//= require popper.min
//= require_self
My LCM-app js just looks like this where my selector is using class selector - note you seem to have add the dot between group and date '.input-group.date' - but that becomes a space in your markup
// used by bootstrap date picker - matching class selector is for class class='.input-group date'
$(function(){
$('.input-group.date').datepicker({
calendarWeeks: true,
todayHighlight: true,
autoclose: true
});
});
I then went to main.gsp and edited in the cdn references that I had in the standlone page (asset plugin is now disabled for jQuery and Bootstrap)
main.gsp (head section) - you dont need jqueryUI for this to work
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>
<g:layoutTitle default="Grails"/>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<asset:link rel="icon" href="favicon.ico" type="image/x-ico"/>
<asset:stylesheet src="application.css"/>
<%-- <script type='text/javascript' src='//code.jquery.com/jquery-1.12.1.js'></script>--%>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type='text/javascript' src='//code.jquery.com/jquery-3.3.1.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<g:layoutHead/>
<%-- header assets --%>
</head>
Now when you uncomment out the <meta> tag in the standalone page and remove the direct refs - then the main.gsp site mesh adds these back exactly as they were in the standalone page
Point your browser at the test page and it all works as normal.
It even works when I put the basic code into a taglib (you have to stop the escaping using the static encodeAsForTags and set to 'none' for your tag).
JdtDateTimeTagLib
class JavaDateTimeTagLib {
static defaultEncodeAs = [taglib:'html']
//static encodeAsForTags = [tagName: [taglib:'html'], otherTagName: [taglib:'none']]
static encodeAsForTags = [ jdtScaffoldField:'none']
static namespace = "jdt" //java8 date time name space for tags
GrailsNameUtils grailsNameUtils = new GrailsNameUtils()
def jdtScaffoldField = {attrs, body ->
assert grailsNameUtils
String propertyName = attrs.propertyName ?: "unknown"
String property = attrs.property ?: "unknown"
String value = attrs.value
String naturalName = grailsNameUtils.getNaturalName(propertyName)
String label = attrs.label ?: 'unknown'
String ldtStr = attrs.ldt
String page = """
<g:set var="localDateTimePattern" value="${message(code: 'default.localDateTime.format',default: 'yyyy-MM-dd HH:mm')}"/>
<div class="fieldcontain" >
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group form-inline">
<label class='control-label' for="$propertyName"> ${label} </label>
<div class="input-group date" >
<input type='text' class="form-control" value="${ldtStr?.toString()}"/>
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
"""
out << page
}
}
I can then simplify the _fields/localDateTime/_wrapper.gsp to use that tag like so
<%# page import="java.time.LocalDateTime; java.time.format.DateTimeFormatter" %>
<g:set var="localDateTimePattern" value="${message(code: 'default.localDateTime.format',default: 'yyyy-MM-dd HH:mm')}"/>
<jdt:jdtScaffoldField propertyName="xyc" label="my label"></jdt:jdtScaffoldField>
Now when you go to a normal grails edit action my field is rendered and the calendar actions.
I've lost variables in this version as I'm not getting the values passed to the wrapper and putting them forward into my tag - but I think that's not too hard. See working screen shot 'as-is'
Sadly the lest of the Grails scaffolding is using its own rendering so the CSS styles don't match, alignment is a bit out etc - but its an improvement if I can just get the submit action etc to take the selected date and convert pack to LocalDateTime to persist in the database.
Basically it would be better if the grails <g:datePicker could be 'fixed' to work with new Java time formats and use the Bootstrap picker - because the fields plugin invokes the <g:datePicker for ordinary Java Date but completely doesn't handle the Java 8 temporal stuff.
I have tried to 'find' where the grails <g: taglib is implemented (thought it was going to be in the GSP plugin or core projects - but I can't find it in either.
However whilst it's not ideal - its good enough for the mini demo using scaffolds I was going to show people - just looks a little clunky as it's not consistent.
So I'm trying to load dynamic content straight into my checkbox container (group_checkboxes)
<div id='group_checkboxes' data-role="fieldcontain">
</div>
This is the statement I'm running to populate the container:
$('#group_checkboxes').append('<fieldset data-role="controlgroup"><input type="checkbox" name="' + $(this).find('data').text() + '" class="custom" /><label for="' + $(this).find('data').text() + '">' + $(this).find('label').text() + '</label></fieldset>');
The checkboxes are all populated but the jQuery style is not applied.
According to the docs all I need to do is call this function to update the checkbox style...
$("input[type='checkbox']").checkboxradio("refresh");
That doesn't work though... Any idea what I'm doing wrong?
When appending checkboxes or radio buttons to a controlgroup dynamically, you deal with two jQuery Mobile widgets, .checkboxradio() and .controlgroup().
Both should be created/updated/enhanced/styled with jQuery Mobile CSS once new elements are added.
The way to achieve this is different in latest stable versions and RC version, but the methods are the same.
jQuery Mobile 1.2.x - 1.3.x (stable versions)
After appending checkbox / radio button to either a static or dynamic controlgroup, .checkboxradio() should be called first to enhance checkbox / radio button markup and then .controlgroup("refresh") to re-style controlgroup div.
$("[type=checkbox]").checkboxradio();
$("[data-role=controlgroup]").controlgroup("refresh");
Demo
jQuery Mobile 1.4.x
The only difference here is elements should be appended to .controlgroup("container")
$("#foo").controlgroup("container").append(elements);
and then enhance both controlgroup and all elements within it, using .enhanceWithin().
$("[data-role=controlgroup]").enhanceWithin().controlgroup("refresh");
Demo
First try their own static demo code:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</div>
They are using just one fieldset as I mentioned in comments.
If this works, then adjust your script to generate the same markup dynamically and then refresh them
$("input[type='checkbox']").checkboxradio("refresh");
If this will work with their code, you will know that you have error in markup. If not, there is an error with that refresh function. (I know it's not final solution but you have to do a bit of debugging sometimes :)
Edit:
Found similar problems, solved by using Page()
JQM FAQ
SO Question
try with $("#<id of fieldset controlgroup>").trigger("create");
http://jsfiddle.net/YKvR3/36/
try
$('input:checkbox').checkboxradio('refresh');
<!DOCTYPE HTML>
<html>
<head>
<title>checkbox</title>
<link rel="stylesheet" href="jQuery/css/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="jQuery/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jQuery/js/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript">
var myArray = [];
$(document).ready(function() {
// put all your jQuery goodness in here.
myArray[myArray.length] = 'Item - 0';
checkboxRefresh();
});
function checkboxRefresh(){
var newhtml = "<fieldset data-role=\"controlgroup\">";
newhtml +="<legend>Select items:</legend>" ;
for(var i = 0 ; i < myArray.length; i++){
newhtml += "<input type=\"checkbox\" name=\"checkbox-"+i+"a\" id=\"checkbox-"+i+"a\" class=\"custom\" />" ;
newhtml += "<label for=\"checkbox-"+i+"a\">"+myArray[i]+"</label>";
}
newhtml +="</fieldset>";
$("#checkboxItems").html(newhtml).page();
//$('input').checkboxradio('disable');
//$('input').checkboxradio('enable');
//$('input').checkboxradio('refresh');
//$('input:checkbox').checkboxradio('refresh');
$("input[type='checkbox']").checkboxradio("refresh");
$('#my-home').page();
}
$('#bAdd').live('click', function () {
myArray[myArray.length] = 'Item - ' + myArray.length;
checkboxRefresh();
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="my-home">
<div id="my-homeheader">
<h1 id="my-logo">checkbox</h1>
</div>
<div data-role="content">
<div id="checkboxItems" data-role="fieldcontain"></div>
<fieldset class="ui-grid-b">
<div data-role="controlgroup" data-type="horizontal">
<a id="bAdd" href="#" data-role="button" data-icon="plus" >Add new item</a>
</div>
</fieldset>
</div>
</div>
</body>
</html>
It works just ones for me. Any idea why?
The Answer for me is:
$("input[type='checkbox']").checkboxradio();
What work out for me was to remove the whole fieldset then replace place a new fieldset with the new item I wanted to add then I called the .trigger('pagecreate'); method on the whole page. This is not the most efficient solution but that is the only one that worked in my case.
I am fairly new to the concept of javascript client side development. I am running into an issue, though it may be I just don't understand how to accomplish something with the mash of frameworks.
I know I want to use Knockout for it's rich client side goodies. I also wanna use Sammy.js to allow for routing and passing data to the knockout views (I come from an MVC background where I stuff a model with data, then return view(model), and MVC binds it nice and good for me).
So now I am trying to do something similar client side...
Here is my Index.html :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>The EClassifieds Mobile</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<!-- <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->
<script type="text/javascript" charset="utf-8" src="./scripts/cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/knockout.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/templ.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/sammy.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/sammy.tmpl.js"></script>
<script type="text/javascript" charset="utf-8" src="./services/RouteManager.js"></script>
<script type="text/javascript" charset="utf-8" src="./services/ApplicationManager.js"></script>
<link rel="stylesheet" href="./style/site.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
</head>
<body>
<div id="main">
<h1>HELLO WORLD!</h1>
<!--Sammy should update the content of this div dynamically, creating a SPA (single page application)-->
</div>
</body>
</html>
Here is my Sammy Configuration.
(function ($) {
alert('Building Routes');
var app = $.sammy('#main', function () {
this.use('Tmpl', 'html');
this.get('#/', function (context) {
alert('Rendering Partial for Login page');
context.app.swap('Loading...');
this.render("/views/Login.html");
});
});
$(function () {
app.run('#/');
});
})(jQuery);
Here is my Login.html
<!--Model File Goes Here -->
<script type="text/javascript" charset="utf-8" src="../models/Login.js"></script>
<fieldset title="Please Login to Begin :">
<div data-role="content" style="padding: 15px">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="txtUsername">
Username
</label>
<input id="txtUsername" data-bind="value: username" placeholder="Stevie" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="txtPassword">
Password
</label>
<input id="txtPassword" data-bind="value: password" placeholder="yep!" value="" type="password" />
</fieldset>
</div>
<a id="btnLogin" data-role="button" data-transition="fade" href="#page1" >
Login
</a>
</div>
<div id="errorText">
<h1></h1>
</div>
<p id="deviceProperties">Loading device properties...</p>
</fieldset>
<script type="text/javascript">
$(document).ready(function () {
ko.applyBindings(new LoginDataModel(0, "Stevie", "theTV", true));
});
</script>
I also need some way to pass the data from the sammy get handler, to the knockout page. Is there a way to do this, or am I attempting the impossible?
UPDATE 1 :
I would really love to be able to do something like :
var app = $.sammy('#main', function () {
this.use('Tmpl', 'html');
this.get('#/', function (context) {
alert('Rendering Partial for Login page');
context.app.swap('Loading...');
var data = getLoginData();
this.render("/views/Login.html", data);
});
Sammy does this same exact thing using other template frameworks, however, I don't see how I would bind the $data in the Knockout view to the data passed from Sammy.
Not sure if you saw this, but the webmail tutorial on the knockoutjs website uses sammy.js for routing:
http://learn.knockoutjs.com/#/?tutorial=webmail
Here's a link to the finished product (so you can view source if you don't want to follow the whole tutorial)
http://learn.knockoutjs.com/WebmailExampleStandalone.html
the Knockout.js-External-Templates plugin will help you in achieving this behavior. A good starting point will be from here
EDIT: The "starting point" link now goes to malware.
Even John Papa endorses it here
The above solution is useful only when you frequently reuse your templates. Use inline templating whenever possible. Inline templating – and using foreach binding, performs around 1/3 faster than applying template from a separate DOM element, the so-called named template binding. More info on this here
I'm building an app utilizing JQuery Mobile in which I'm showing a progress bar to indicate to the user their progress based on the steps completed.
For the progress bar I'm utilizing JQuery UI which is simple to implement
<script>
$(document).ready(function(){
var currentStep = $("#formNumber").val(); //get the the current step from form
var totalSteps = 8;
var formProgress = 0;
// determine overall form progress after step is completed
if (currentStep >1) {
formProgress = (currentStep-1)/totalSteps*100;
}
// Set progress value
$("#progressbar").progressbar({value: formProgress});
$('#percentage').text(formProgress);
});// End function
</script>
However since the pages in JQuery Mobile are loaded via Ajax the progress bar does not show. I'm guessing it's because the "#progressbar" div is empty.
if the pages loads without Ajax it will show the progress bar. Any one knows how i can solve this by allowing the progress bar to show when the page loads via Ajax
Bind to pageinit not dom ready or in this case i bind to pageshow. In a JQM ajax app dom ready only happens once on the first page. So any new content brought into the dom doesn't get the benefit of the code you wrote. Also when the second page is brought into the dom. The first page doesn't go anywhere its just hidden. Because of this using the same id in every page causes problems. Get used to using classes instead. If you need to pick something out of the current page use the .ui-page-active class to help you select the appropriate element.
Something like $('.ui-page-active .formNumber') will select the correct input for you. So here is my revised first step according to the info you gave me.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Step 1</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
function getProgress(){
var currentStep = $(".ui-page-active .formNumber").val(); //get the the current step from form
var totalSteps = 4;
var formProgress = 0;
// determine overall form progress after step is completed
if (currentStep >1) {
formProgress = (currentStep-1)/totalSteps*100;
}
$(".ui-page-active .progressbar").progressbar({value: formProgress});
}
$(document).on('pageshow',function(){
getProgress();
});
</script>
</head>
<body>
<div data-role="page" id="step1">
<div data-role="header">
<h1>Step 1</h1>
</div><!-- /header -->
<div data-role="content">
<input type="hidden" class="formNumber" value="1" />
<div class="progressbar"></div>
Step 2
</div><!-- /content -->
</div>
</body>
</html>
step2.html
<div data-role="page" id="step2">
<div data-role="header">
<h1>Step 2</h1>
</div><!-- /header -->
<div data-role="content">
<input type="hidden" class="formNumber" value="2" />
<div class="progressbar"></div>
Step 3
</div><!-- /content -->
</div>
step3.html
<div data-role="page" id="step3">
<div data-role="header">
<h1>Step 3</h1>
</div><!-- /header -->
<div data-role="content">
<input type="hidden" class="formNumber" value="3" />
<div class="progressbar"></div>
Step 4
</div><!-- /content -->
</div>
...... and on and so forth
If you interested I made a sample for you to look at. http://starwebservices.net/so/
I have searched high and low but I cannot get this simple thing to work.
All I want to do is have a dialogue popup open when the homepage loads.
Can someone please point me in the right direction?
Check this out Dialog and this
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog();
});
</script>
</head>
<body style="font-size:62.5%;">
<!--<div id="dialog" title="Dialog Title">Test Dialog Box</div>-->
<div id="dialog" title="Google">
<IFRAME id="frame" style="border: 0px;" SRC="www.google.com" width="100%" height = "100%" >
</div>
</body>
Different solution
try this..if this ok..
Different solution
Try the Modal Dialog..Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link.
$(document).delegate('div[data-role=dialog]', 'pageinit', function() {})