how can I update the data other than form. ? I created a button but do not update my data.
<html>
<head>
<meta name="layout" content="main">
<g:set var="entityName" value="${message(code: 'product.label', default: 'product')}" />
<title><g:message code="default.edit.label" args="[entityName]" /></title>
</head>
<body>
<div id="wyszukaj">
<g:form method="post">
<div class="fieldcontain" ${hasErrors(bean: productInstance, field: 'symbolIndeksu', 'error')}">
<label for="symbolIndeksu" style="width: 152px;">
<g:message code="product.wyszukajSymbolIndeksu.label" default="Symbol Indeksu" />
</label>
<g:select id="id" name="id" from="${com.app.product.findAll([sort:"symbolIndeksu"])}" optionKey="id" value="${productInstance?.id}" class="many-to-one inptSearch chzn-select" />
<g:actionSubmit class="save" action="edytuj" value="Zmień" />
<g:actionSubmit class="save" action="aktualizuj" value="${message(code: 'default.button.update.label', default: 'Update')}" />
/* Button at this point should update the data */
</div>
</g:form>
</div>
<div id="view-tab">
<g:render template="tabs"/>
<div id="content-tab">
<div id="edytuj-product" class="content scaffold-edit" role="main">
<g:if test="${flash.message}">
<div class="message" role="status">${flash.message}</div>
</g:if>
<g:hasErrors bean="${productInstance}">
<ul class="errors" role="alert">
<g:eachError bean="${productInstance}" var="error">
<li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}"/></li>
</g:eachError>
</ul>
</g:hasErrors>
<g:form method="post" >
<g:hiddenField name="id" value="${productInstance?.id}" />
<g:hiddenField name="version" value="${productInstance?.version}" />
<fieldset class="form">
<g:render template="formularz"/>
</fieldset>
</div>
</div>
</g:form>
</div>
</body>
</html>
In summary. I would like to use the update button outside of the form g: form. Previously, I had the buttons at the bottom
Related
I need to add a login popup to the header of every page, so naturally I want to add it to the layout as a partial view.
The problem is, the layout doesnt have a pagemodel.
We do use a BasePageModel that every page inherits from, where I can add 2 strings for username/password. But how would the layout see those fields?
You can specify a model for the Layout page just as you would a standard content page:
#model BasePageModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
Then your properties are accessible via the Model property of the Layout page. The BasePageModel will also be passed to any partials that you add to the layout (unless you specify a different model for the partial), so you can also access the properties in those.
I need to add a login popup to the header of every page, so naturally
I want to add it to the layout as a partial view.
According to your description, I do a demo for that situation. But I don’t use a BasePageModel that every page inherits from.
The demo as below, hoping it can help you.
1.Add a Login page with page model, and post method
Login.cshtml.cs:
public class LoginModel : PageModel
{
[BindProperty]
public string Username { get; set; }
[BindProperty]
public string Password { get; set; }
public string Msg { get; set; }
public void OnGet()
{
}
public IActionResult OnPost(string Username, string Password)
{
//do your other things...
return Page();
}
}
Login.cshtml:
#page
#model Login.Pages.LoginModel
#{
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login</title>
</head>
<body>
<h3>Login Form</h3>
#Model.Msg
<form method="post" asp-page="Login">
<table>
<tr>
<td>Username</td>
<td><input type="text" asp-for="#Model.Username" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" asp-for="#Model.Password" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Login" /></td>
</tr>
</table>
</form>
</body>
</html>
Add the login form in the layout. Using name attribute: change input type="text" asp-for="#Model.Username" into input type="text" name="Username"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
<div>
<fieldset>
<div class="container">
<div class="row">
<div class="col-xs-12">
<button id="btnShowModal" type="button"
class="btn btn-sm btn-default pull-left col-lg-11 button button4">
login
</button>
<div class="modal fade" tabindex="-1" id="loginModal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form method="post" asp-page="Login">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td>Username</td>
<td><input type="text" name="Username"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="Password"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Login"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - Login - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
<script type="text/javascript">
$(document).ready(function () {
$("#btnShowModal").click(function () {
$("#loginModal").modal('show');
});
$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
});
});
</script>
</body>
</html>
Results:
I'm having a hard time figuring out how to essentially reload a section of my view with new data after a selection from a DropDownMenu(in grails 3.3.9)
I've tried using the same convention of a button in grails, which is pretty straight forward:
<g:select class="btn bg-primary" action="filterByCommittee" controller="management"
from="${Committee.list()}" optionKey="id" optionValue="${name}"
name="committees" value="${committees}" noSelection="${['null':'Select..']}"/>
the code above means(AFAIK) i want to trigger an action(filterByCommittee) which resides in a controller(Management), using params.committees(the name of the field). the mentioned action would filter the purchases(a list shown to the user) by the selected committee.
any help would be greatly appreciated!
some relevant code:
class ManagementController {
PurchaseService purchaseService
CommitteeService committeeService
def index(Integer max) {
params.max = Math.min(max ?: 10, 100)
List<Purchase> purchaseList = Purchase.findAllByAccountantApprovalInList(Approval.findAllByApproved(true))
}
respond purchaseList, model:[purchaseCount: purchaseService.count()]
}
def filterByCommittee() {
Committee selectedCommittee = Committee.findByName(params.committees)
List<User> userList = User.findAllByCommittee(selectedCommittee)
List<Purchase> purchaseList = Purchase.findAllByUserInList(userList)
respond purchaseList, model:[purchaseCount: purchaseService.count()]
}
}
class Committee {
String name
static hasMany = [users:User, summaries:Summary]
static constraints = {
users(nullable: true)
summaries(nullable: true)
}
#Override
public String toString() {
return name
}
}
<!DOCTYPE html>
<!--<%# page import="attainrvtwo.Committee" contentType="text/html;charset=UTF-8" %>-->
<html xmlns:g="http://www.w3.org/1999/html">
<body>
<g:message code="default.link.skip.label" default="Skip to content…"/>
<div class="nav" role="navigation">
<ul>
<li><g:select class="btn bg-primary" action="filterByCommittee" controller="management" from="${Committee.list()}" optionKey="id" optionValue="${name}" name="committees" value="${committees}" noSelection="${['null':'Select..']}"/></li>
</ul>
</div>
<div id="list-purchase" class="content scaffold-list" role="main">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<g:if test="${flash.message}">
<div class="message" role="status">${flash.message}</div>
</g:if>
<f:table collection="${purchaseList}" />
<div class="pagination">
<g:paginate total="${purchaseCount ?: 0}" />
</div>
</div>
</body>
</html>
In gsp file, on select (fill "" with the corresponding values):
<g:select id="" name="" value="" from='${}' optionKey="id"
onchange="optionChanged(this.value);" >
</g:select>
<div id="tabla" style="display:block;"></div>
In same gsp file:
<script>
function optionChanged(committeeId) {
<g:remoteFunction controller="management" action="filterByCommittee"
update="tabla" params="'commId='+committeeId"/>
}
</script>
In another gsp file name="filterByCommittee.gsp":
Code to display
In the controller add the id param to the function:
def filterByCommittee(commId)
the solution i pieced together looks something like this:
in the ManagementController
package attainrvtwo
class ManagementController {
CommitteeService committeeService
List<Purchase> purchaseList
def filterByCommittee() {
session.filterPurchases = true
Committee selectedCommittee = committeeService.get(params.id)
List<User> userList = User.findAllByCommittee(selectedCommittee)
purchaseList = Purchase.findAllByUserInList(userList)
respond purchaseList, model:[purchaseCount: purchaseService.count()]
}
}
in the index.gsp file of management view
<!DOCTYPE html>
<!--<%# page import="attainrvtwo.Committee" contentType="text/html;charset=UTF-8" %>-->
<html xmlns:g="http://www.w3.org/1999/html">
<head>
<meta name="layout" content="main" />
<g:set var="entityName" value="${message(code: 'purchase.label', default: 'Purchase')}" />
<title></title>
</head>
<body>
<g:message code="default.link.skip.label" default="Skip to content…"/>
<div class="nav" role="navigation">
<ul>
<!-- <li><a class="home" href="${createLink(uri: '/volunteer/index')}"><g:message code="default.home.label"/></a></li>-->
<li><g:select class="btn bg-primary" id="commDDLid" name="committeeDDL" action="filterByCommittee" controller="management" from="${Committee.list()}" optionKey="id" optionValue="${name}" value="${committees}" noSelection="${['null':'Select..']}" onchange="goToPage(this.value)"/></li>
</ul>
</div>
<div id="list-purchase" class="content scaffold-list" role="main">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<g:if test="${flash.message}">
<div class="message" role="status">${flash.message}</div>
</g:if>
<f:table collection="${purchaseList}" />
<div class="pagination">
<g:paginate total="${purchaseCount ?: 0}" />
</div>
</div>
<script type="text/javascript">
function goToPage(requestParams) {
window.location.href="${'/management/filterByCommittee'}" + "/" + requestParams;
}
</script>
</body>
</html>
then i've also added the filterByCommitty.gsp view which is basically a copy of my index.gsp
(notice the import line at the beginning and the script tag at the end)
<!DOCTYPE html>
<!--<%# page import="attainrvtwo.Committee" contentType="text/html;charset=UTF-8" %>-->
<html xmlns:g="http://www.w3.org/1999/html">
<head>
<meta name="layout" content="main" />
<g:set var="entityName" value="${message(code: 'purchase.label', default: 'Purchase')}" />
<title></title>
</head>
<body>
<g:message code="default.link.skip.label" default="Skip to content…"/>
<div class="nav" role="navigation">
<ul>
<li><g:select class="btn bg-primary" id="commDDLid" name="committeeDDL" action="filterByCommittee" controller="management" from="${Committee.list()}" optionKey="id" optionValue="${name}" value="${committees}" noSelection="${['null':'Select..']}" onchange="goToPage(this.value)"/></li>
</ul>
</div>
<div id="list-purchase" class="content scaffold-list" role="main">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<g:if test="${flash.message}">
<div class="message" role="status">${flash.message}</div>
</g:if>
<f:table collection="${purchaseList}" />
<div class="pagination">
<g:paginate total="${purchaseCount ?: 0}" />
</div>
</div>
<script type="text/javascript">
function goToPage(requestParams) {
window.location.href="${'/management/filterByCommittee'}" + "/" + requestParams;
}
</script>
</body>
</html>
i hope this helps someone.
if there are any improvement suggestions i'd be glad to correct them.
cheers ;)
I have problem with update foreign key in a instance of my domain class Semester. I'm new in Groovy Grails. When I create new Semester everything is ok.
Semester.groovy
class Semester {
int name
Season season
}
Season.groovy
class Season {
String name
}
SemesterController.groovy
SemesterController{
def update(){
def semester = Semester.get(params.id)
semester.name = params.semester
semester.season = params.season // Here is a problem !!
semester.save(flush: true)
redirect(uri: "/semester/index")
}
}
edit.gsp
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="bootstrap-main" />
<title>SARNA</title>
</head>
<body>
<br />
<div class="container">
<g:form class="form-horizontal" role="form"
url="[resource:semester, controller: 'Semester']">
<label for="semester" class="col-sm-2 control-label">Semestr</label>
<g:textField class="form-control" name="semester"
value="${semester.name}" />
<g:select name="season" from="${com.sarna.entity.Season.list()}" optionKey="id"
optionValue="name" value="${semester?.season?.id}"/>
<g:actionSubmit class="btn btn-primary" value="Zapisz"
action="update" />
</g:form>
</div>
</body>
</html>
When I'm trying save changes I have this Exception:
URI: /SARNA/semester/index/1
Class: java.lang.IllegalStateException
Message: Cannot convert value of type [java.lang.String] to required type [com.sarna.entity.Season] for property 'season': no matching editors or conversion strategy found
What am I doing wrong ? Could you help me? Thanks
Make the following changes to the form
<g:form class="form-horizontal" role="form"
url="[resource:semester, controller: 'Semester']">
<g:hiddenField name="id" value="${semester.id}"/>
<label for="semester" class="col-sm-2 control-label">Semestr</label>
<g:textField class="form-control" name="name" value="${semester.name}" />
<g:select name="season.id" from="${com.sarna.entity.Season.list()}" optionKey="id"
optionValue="name" value="${semester?.season?.id}"/>
<g:actionSubmit class="btn btn-primary" value="Zapisz"
action="update" />
</g:form>
You can then simplify your action to:
SemesterController{
def update(Semester semester){
semester.save(flush: true)
redirect(uri: "/semester/index")
}
}
Having one html file called index.html.Here I'm having one page for list view(group).Another one(pg_add-group) is for both new and edit view.
If I hit the Add button from list view,the new form opened correctly.If I select any of the product from list view,its correctly uploaded the details to the edit view.
Its done by getting date from session.Now if I again try to add product, its containing old session data in the new form.The new form should contain with empty details.Can you help me to do this ?
Here is my coding,
pg_add-group
<div id="pg_add-group" data-role="page">
<form name="frm_add-group" id="frm_add-group" action="" method="post">
<div data-role="header" data-transition="fixed">
<h1 id="add-group-header"></h1>
Back
</div>
<div data-role="main" class="ui-content" >
<div id="add_sms-group_notification" class="center-wrapper-error" data-icon="right"></div>
<label for="group_name" class="ui-hidden-accessible"></label>
<input type="text" name="group_name" id="group_name" placeholder="Enter Group Name" />
<label for="group_desc" class="ui-hidden-accessible"></label>
<textarea name="group_desc" id="group_desc" placeholder="Enter Group Decription"></textarea>
<div class="containing-element">
<label for="group_published">Published</label>
<select name="group_published" id="group_published" data-theme="b">
<option value="1" >Yes</option>
<option value="0" >No</option>
</select>
<input type="hidden" name="group_id" id="group_id" />
</div>
<div class="containing-element">
<button type="submit" name="submit" value="submit" data-theme="a" data-icon="check">Submit</button>
<button type="reset" name="reset" value="reset" data-theme="a" data-icon="delete" >Reset</button>
</div>
<div data-role="footer" data-position="fixed">
<h1 id='add-book-footer'></h1>
</div>
</form>
</div>
test.js
From he below coding
group_id is comes from the list view's selected group id.
session data ses_group contains the list of groups.
$('#pg_add-group').on('pageshow', function(event) {
var group_list = $.parseJSON(sessionStorage.getItem("ses_group"));
var group_id = sessionStorage.group_id;
$.each(group_list, function(ctr, obj) {
if(group_id == obj.groupid){
$('input[id=group_name]').val(obj.groupname);
$('textarea[id=group_desc]').val(obj.groupdesc);
$('input[id=group_id]').val(obj.groupid);
$("#group_published").val('0').slider('refresh');
}
});
$( ".input[id=group_name]" ).textinput( "refresh" );
$( ".textarea[id=group_desc]" ).textinput( "refresh" );
});
Working example: http://jsfiddle.net/Gajotres/2AVWQ/
Usage:
Take a look at provided code, every element used has a custom attribute called data-default-value, it is used to determine which element is a default one. Basically use provided code to reset any form.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<input type="button" id="clr-form-btn" value="Clear form"/>
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="Some value"/>
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider" data-default-value="off">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1"/>
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" checked="checked" data-default-value=""/>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-0" data-default-value="standard">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
<textarea>
asd
asd
asd
as
das
d
asdassd
</textarea>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#index', function(){
cleanForm();
});
function cleanForm() {
var page = $.mobile.activePage;
// Reset input elements
page.find('.ui-content *').filter("[type='text'],textarea").each(function(){
$(this).val('');
});
// Reset drop down elements
page.find('.ui-content *').filter(".ui-select").each(function(){
var select = $(this).find('select');
var defaultValue = select.attr('data-default-value');
select.val(defaultValue);
select.selectmenu('refresh', true);
});
// Reset flip switch elements
page.find('.ui-content *').filter('[data-role="slider"]').each(function(){
var flipSwitch = $(this);
var defaultValue = flipSwitch.attr('data-default-value');
flipSwitch.val(defaultValue);
flipSwitch.slider('refresh');
});
// Reset radio elements
page.find('.ui-content *').filter('fieldset:has([type="radio"])').each(function(){
var radio = $(this);
var checkedRadio = radio.find(':checked').prop("checked",false).checkboxradio("refresh");
var defaultRadio = radio.find('[data-default-value]').prop("checked",true).checkboxradio("refresh");
});
}
I'm building my first JQM site so I think I'm missing some simple little thing that's causing me a bunch of problems.
I have setup the page, header, content and footer and a panel for the menu. Then I have I have a js file with the following:
$(document).on('pageinit', function (event) {
alert('this works every time you navigate to another page');
$("#menu-panel").panel("open");//this works the first time only
$("#new-lump-sum").popup("open");//this never works
});
Can anyone tell me why I'm getting this behaviour instead of both the panel and the popup opening every time you navigate to another page?
I also can't open them programmatically from the browser console (using chrome)
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cashflow - IFA Portal</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link href="/Styles/System.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery.mobile-1.3.1.min.js"></script>
<script src="/Scripts/highcharts.js"></script>
<script src="/Scripts/System.js"></script>
</head>
<body class="computer android">
<div id="page-wrapper">
<div data-role="page" class="page ui-responsive-panel"><!-- Start Page -->
<div data-role="panel" id="menu-panel" data-position="left" data-display="reveal" data-theme="a" data-dismissible="false" class="">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search Items..." data-theme="a" data-filter-theme="a">
<li><img src="/Images/Icons/home.png" alt="" class="ui-li-icon"/>Home</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Tools</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Cashflow</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Clients</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Proposals</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Funds</li>
</ul>
</div>
<div id="header" data-role="header" data-theme="d">
<div id="top-border"></div>
<div class="floatleft">
</div>
<div id="logo">
<img src="/Images/AllanGray-Logo.png" />
</div>
<div class="floatleft header-toolbar" data-role="controlgroup" data-type="horizontal">
Favourites
<img src="/Images/Icons/179-notepad.png" class="ui-li-icon small-icon" />Notes
Display Settings
</div>
<div id="logout">
<section id="login">
Log In
</section>
</div>
<div id="display-options" data-role="popup" class="ui-content">
Close
<form>
<fieldset id="theme-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Theme</legend>
<input type="radio" name="theme" id="theme-1" value="android" checked="checked" />
<label for="theme-1" class="theme-option">Android</label>
<input type="radio" name="theme" id="theme-2" value="apple" />
<label for="theme-2" class="theme-option">Apple</label>
<input type="radio" name="theme" id="theme-3" value="windows" />
<label for="theme-3" class="theme-option">Windows</label>
</fieldset>
<br />
<fieldset id="size-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Screen Size</legend>
<input type="radio" name="size" id="size-1" value="computer" checked="checked" />
<label for="size-1" class="size-option">Computer</label>
<input type="radio" name="size" id="size-2" value="tablet" />
<label for="size-2" class="size-option">Tablet</label>
<input type="radio" name="size" id="size-3" value="phone" />
<label for="size-3" class="size-option">Phone</label>
</fieldset>
</form>
</div>
</div>
<div id="content" data-role="content">
<h2>Cashflow Calculator</h2>
<div class="ui-grid-a">
<div class="ui-block-a" style="padding-right:5px;">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Investment Assumptions</h3>
<div data-role="fieldcontain" class="narrow">
<label for="time">Time horizon (years)</label>
<input type="range" name="time" id="time" value="20" min="0" max="100" data-highlight="true" style="width"/>
<label for="nominal">Nominal return after unit trust fees (%)</label>
<input type="text" name="nominal" id="nominal" value="" />
<label for="inflation">Inflation rate p.a. (%)</label>
<input type="text" name="inflation" id="inflation" value="" />
<label for="administration-fees">Net platform administration fees (%)</label>
<input type="text" name="administration-fees" id="administration-fees" value="" />
<label for="advisor-fees">Financial advisor fees (%)</label>
<input type="text" name="advisor-fees" id="advisor-fees" value="" />
</div>
</div>
Add Contributions or Withdrawals
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Contributions & Withdrawals </h3>
<ul id="lump-sums" data-role="listview" data-split-icon="delete" data-split-theme="d">
<li>
<a>
<h3>Contribution: R20 000</h3>
<p class="topic"><strong>Recurres: 6 times</strong></p>
<p class="ui-li-aside"><strong>Start Date: 01/08/2013</strong></p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Contribution: R5000</h3>
<p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Withdrawal: -R25 000</h3>
<p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
</a>
Delete
</li>
</ul>
</div>
<div data-role="popup" id="new-lump-sum" class="ui-content">
Close
<form>
<fieldset id="lump-sum-type" data-role="controlgroup" data-type="horizontal">
<legend>Add New</legend>
<input type="radio" name="lump-sum-type" id="contribution" value="contribution" checked="checked" />
<label for="contribution" class="">Contribution</label>
<input type="radio" name="lump-sum-type" id="withdrawal" value="withdrawal" />
<label for="withdrawal" class="">Withdrawal</label>
</fieldset>
<label for="lump-sum-amount">Amount (R)</label>
<input type="text" name="lump-sum-amount" id="lump-sum-amount" value="" />
<label for="lump-sum-date">Date</label>
<input type="text" name="lump-sum-date" id="lump-sum-date" value="" />
<a data-role="button" data-theme="b" onclick="addLumpSum()">Add</a>
</form>
</div>
</div>
<div class="ui-block-b" style="padding-left:5px;">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Future Value Graph</h3>
<div id="container" style="width:100%; height:400px;">fgjfjfgjh</div>
<script type="text/javascript">
</script>
</div>
</div>
</div>
</div>
<div id="footer" data-role="footer">
<div id="bottom-border"></div>
<p>Copyright © 2013 Allan Gray. All Rights Reserved.</p>
</div>
<div data-role="panel" id="right-panel" data-position="right" data-display="overlay" data-theme="b">
<h3>Favourites</h3>
<div id="search-box">
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" placeholder="Search..." />
</div>
</div>
<script>
</script>
</div><!-- End Page -->
</div>
</body>
</html>
Popups and dialogs are tricky when it comes to opening them right after a page event occurs. To fix this issue, you need to use setTimeout to open a dialog or a popup.
$(document).on('pageinit', function() {
setTimeout(function () {
$('#new-lump-sum').popup('open');
}, 100); // delay above zero
});