Hello,
Three questions have me stumped. Let me know if you can answer them.
A code snippet is below.
When the script begins, the text of each <ons-list-item>is displayed briefly in a flash of unformatted text on line one of the page before the screen is blanked out. Then the formatted page is displayed.
How do I kept that initial text from being displayed?
In the body of the home page I am trying to have the md-menu icon be displayed in an inline fashion. How do I do that?
Go to the Attend Event page using the splitter menu. Here I present the user with a simple form. When the ‘Reserve My Space’ button is pressed I want to verify the forms fields are not blank. If one is blank I want to display a dialog box with a message like, ‘Please fill in your name’ and then have the form remain on the page so the user can fill-in the empty field.
How do I control the page transitions so I can keep the page with the form on the screen?
Here is a demo code snippet
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Tucson Business Networking</title>
<link rel='stylesheet prefetch' href='//unpkg.com/onsenui/css/onsenui.css'>
<link rel='stylesheet prefetch' href='//unpkg.com/onsenui/css/onsen-css-components.css'>
<link rel='stylesheet prefetch' href='//tucsonbusinessnetworking.com/style.css'>
</head>
<body>
<ons-splitter>
<ons-splitter-side id='menu' side='left' width='210px' collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item modifier='longdivider' onclick='fn.load("index.html")' tappable>
Home
</ons-list-item>
<ons-list-item modifier='longdivider' onclick='fn.load("attend.html")' tappable>
Attend One Event
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id='content' page='index.html'></ons-splitter-content>
</ons-splitter>
<template id='index.html'>
<ons-page>
<ons-toolbar>
<div class='left'>
<ons-toolbar-button onclick='fn.open()'>
<ons-icon icon='md-menu'></ons-icon>
</ons-toolbar-button>
</div>
<div class='center'>
Tucson Business Networking
</div>
</ons-toolbar>
<h2 id='after_tab_bar_index'> </h2>
<ons-list-item modifier='longdivider' class='left'>Welcome! It is our pleasure that you've decided to visit our website. Take a look around by clicking on the menu icon, <ons-icon icon="md-menu" style="display:inline-block;" class="ons-icon"></ons-icon>.</ons-list-item>
</ons-page>
</template>
<template id='attend.html'>
<ons-page>
<ons-toolbar>
<div class='left'>
<ons-toolbar-button onclick='fn.open()'>
<ons-icon icon='md-menu'></ons-icon>
</ons-toolbar-button>
</div>
<div class='center'>Attend an Event</div>
</ons-toolbar>
<h2 id='after_tab_bar_attend'> </h2>
<ons-list>
<ons-list-item modifier='longdivider'>
<p>
Please fill out all the fields below to get started.
</p>
</ons-list-item>
</ons-list>
<ons-list>
<form id='attend_form' method='post'>
<ons-list-item modifier='longdivider'>
<ons-input type='text' placeholder='First Name' name='first_name' id='first_name'>
</ons-input>
</ons-list-item>
<ons-list-item modifier='longdivider'>
<ons-input type='text' placeholder='Last Name' name='last_name' id='last_name'>
</ons-input>
</ons-list-item>
<ons-list-item modifier='longdivider'>
<ons-input type='email' placeholder='Email' name='email' id='email'>
</ons-input>
</ons-list-item>
<ons-list-item modifier='longdivider'>
<ons-input type='text' placeholder='Cell Phone' name='cell_phone' id='cell_phone'>
</ons-input>
</ons-list-item>
<ons-list-item modifier='longdivider'>
<label for='event_month'>For Event on</label>:
<ons-select select-id='event_month'>
<option selected value='99'>Select Month</option>
<option value='01'>January</option>
<option value='02'>February</option>
<option value='03'>March</option>
<option value='04'>April</option>
<option value='05'>May</option>
<option value='06'>June</option>
<option value='07'>July</option>
<option value='08'>August</option>
<option value='09'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</ons-select>
<ons-select select-id='event_year'>
<option selected value='2099'>Select Year</option>
<option value='2019'>2018</option>
<option value='2019'>2019</option>
<option value='2020'>2020</option>
<option value='2021'>2021</option>
</ons-select>
</ons-list-item>
<ons-list-item class='left' modifier='longdivider'>
<button class="button red-btn" onclick="clear_form('attend_form');">Cancel</button>
<button class="button green-btn" onclick="attempt_to_attend();
">Reserve My Space</button>
</ons-list-item>
</form>
</ons-list>
<ons-dialog id="dialog-A">
<div style="text-align: center; padding: 10px;">
<p id='dialog-A-message'>
This template is outside any ons-page<br />
This dialog is within its own template.
</p>
<p>
<ons-button onclick="hideDialog('dialog-A')">Close</ons-button>
</p>
</div>
</ons-dialog>
</ons-page>
</template>
<script src='//unpkg.com/onsenui/js/onsenui.js'></script>
<script>
window.fn = {};
/**
* The ons-splitter-side element has an id of menu
*/
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function(page) {
var content = document.getElementById('content');
var menu = document.getElementById('menu');
content.load(page)
.then(menu.close.bind(menu));
};
function clear_form(form_name) {
'use strict';
if (confirm('Are you sure you want to delete your keyed in values?') === true) {
document.getElementById(form_name).reset();
}
}
var showDialog = function(id) {
"use strict";
document
.getElementById(id)
.show();
};
var hideDialog = function(id) {
"use strict";
document
.getElementById(id)
.hide();
};
var toggleDialog = function() {
"use strict";
var dialog = document.getElementById('dialog-A');
if (dialog) {
dialog.show();
} else {
ons.createDialog('dialog.template')
.then(function(dialog) {
dialog.show();
});
}
};
function verify_required_fields(month, year, first_name, last_name, email, cell_phone, amount, return_to) {
'use strict';
var content;
console.log('verify_required_fields()');
if (first_name == '') {
showDialog('dialog-A');
content = document.querySelector('#content');
content.load(return_to);
return;
}
if (last_name == '') {
document.querySelector('#dialog-A-message').value =
'Please enter your last name';
content = document.querySelector('#content');
content.load(return_to);
return;
}
if (email == '') {
document.querySelector('#dialog-A-message').value =
'Please enter your email address';
toggleDialog();
content = document.querySelector('#content');
content.load(return_to);
return;
}
if (cell_phone == '') {
document.querySelector('#dialog-A-message').innerText =
'Please enter your cell phone';
content = document.querySelector('#content');
content.load(return_to);
return;
}
if (parseInt(month, 10) > 0 && parseInt(month, 10) < 13) {
document.querySelector('#dialog-A-message').value =
'Please choose a month';
content = document.querySelector('#content');
content.load(return_to);
return;
}
if (parseInt(month, 10) > 2017 && parseInt(month, 10) < 2037) {
document.querySelector('#dialog-A-message').value =
'Please choose a year';
content = document.querySelector('#content');
content.load(return_to);
return;
}
if (amount === '$15') {
// verified that attend form is valid so process credit card
if (attempt_attend_credit_card_charge(
event_month, event_year, first_name, last_name, email, cell_phone)) {
// card went through so add to database
attend_add_to_database(event_month, event_year, first_name, last_name, email, cell_phone);
}
} else {
// verified that application form is valid so process credit card
if (attempt_join_credit_card_charge(j_first_name, j_middle_name, j_last_name,
j_preferred_name, j_email, j_cell_phone, j_office_phone, j_business_name, j_business_address, j_city, j_state,
j_zip, j_job_title, j_website, j_business_type, j_business_description, j_seeking, j_join_agreement, j_join_month,
j_join_year)) {
//charge went through so add to database
join_add_to_database();
}
//submit the credit card form
document.forms.PrePage.submit();
}
}
/**
*
* call the Authority.net API to charge to user $15
* @returns {boolean} the result of the charge attempt
*/
function attempt_attend_credit_card_charge() {
"use strict";
console.log('attempt_attend_credit_card_charge()');
return true;
}
/**
*
* attempt_to_attend() runs when the 'Reserve My Space' button
* is pressed in the attend_form. The 6 required fields are sent to be validated.
*
*/
function attempt_to_attend() {
"use strict";
var content;
var event_month = document.querySelector('#event_month').value;
var event_year = document.querySelector('#event_year').value;
var first_name = document.querySelector('#first_name').value;
var last_name = document.querySelector('#last_name').value;
var email = document.querySelector('#email').value;
var cell_phone = document.querySelector('#cell_phone').value;
console.log('attempt_to_attend()');
verify_required_fields(event_month, event_year, first_name, last_name,
email, cell_phone, '$15', 'attend.html');
}
</script>
</body>
</html>
Thanks for answering my questions.
Tony