I am trying to bind a function to a button using backbone.js,
but the event is not called on the button.
$(function () {
// expense model
// ----------
//
var ExpenseModel = Backbone.Model.extend({
// Default attributes for the todo item.
defaults: function () {
return {
month: "JAN",
category: Todos.nextOrder(),
amount: 0,
description: "empty string"
};
},
});
var ExpensesCollection = Backbone.Collection.extend({
model: ExpenseModel,
localStorage: new Backbone.LocalStorage("todos-backbone")
});
var ExpensesAddView = Backbone.View.extend({
el: $(".add-content"),
// The DOM events specific to an item.
events: {
"click .add-button": "ToggleDone"
},
ToggleDone: function () {
this.$el.slideToggle();
alert("done");
},
});
var ExpensesAppView = Backbone.View.extend({
el: $(".main-Page"),
// The DOM events specific to an item.
initialize: function () {
var addView = new ExpensesAddView({
model: ExpenseModel
});
}
});
var App = new ExpensesAppView;
});
This is the corresponding HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<!-- Extra Codiqa features -->
<link rel="stylesheet" href="styles/codiqa.ext.css">
<!-- jQuery and jQuery Mobile -->
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- Extra Codiqa features -->
<script src="lib/codiqa.ext.js"></script>
<script src="lib/jquery.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/backbone.localStorage.js"></script>
<script src="app/app.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="mainPage" class="main-Page">
<div id="expense-page-header-id" data-theme="a" data-role="header" class="expense-page-header">
<h3 id="header-text-id" class="header-text">
Header
</h3>
</div>
<div data-role="content">
<a id="add-button-id" data-role="button" data-inline="true"
href="#mainPage" data-icon="plus" data-iconpos="notext" class="add-button">
</a>
<div class="add-content">
<div data-role="fieldcontain" class="category-input">
<input name="" id="category-input-id" placeholder="category" value=""
type="text" data-mini="true">
</div>
<div data-role="fieldcontain" class="amount-input">
<input name="" id="amount-input-id" placeholder="amount" value="" type="text"
data-mini="true">
</div>
<div data-role="fieldcontain" class="description-input">
<input name="" id="description-input-id" placeholder="description" value=""
type="text" data-mini="true">
</div>
<a id="reset-id" data-role="button" data-inline="true" href="#" data-icon="delete"
data-iconpos="notext" class="reset">
</a>
<a id="done-id" data-role="button" data-inline="true" href="#" data-icon="check"
data-iconpos="notext" class="done">
</a>
</div>
</div>
</div>
</body>
</html>
I am trying to bind the ToggleDone method to the button in ExpensesAddView
but its not getting invoked.
I am quite new to backbone.js.
Your view's el is div.add-content, and events in views only trigger on elements that are inside (children-of) the view's el.
The button.add-button is not a child of the div.add-content - its a sibling of div.add-content, and therefore events on it will never bubble up to the view's el and therefore never trigger the function.
Related
This is my first time asking or doing this type of question
So I created this page http://lamp.cse.fau.edu/~mcuervo5/p4/
and it does your basic to do app list thing for adding and deleting stuff.
Apparently the only thing missing is to save the data on the current page. I heard that there a code that can save the current page to a local storage that has everything already in it, so when I re-open the link, instead of having nothing in the "complete and incomplete" list, it should look like this
thanks, it the only part I have left to do & I dont know if it implemented in HTMl or Jquery. I do not know how to do it.
and if you want to see the code here instead of "inspect" from the page with the link above, here it is. for html and Jquery
$(document).ready(function() {
// $('#list').innerhtml = localStorage.getItem("List");
//$('#incomplete-tasks').html("<P>I just replaced your stuff.</P>");
$("#Sumbit_Button").click(function() {
var textbox_Value = $("#textbox").val();
$('#incomplete-tasks').append('<li><span class="text" contenteditable="false">' + textbox_Value + "</span>" +
'<input/ style="display: none" class="new-value">' +
"<button type='button' class='delete'>Delete</button>" +
"<button type='button' class='edit'>Edit</button></li>");
});
$('#incomplete-tasks').on('click', '.delete', function() {
console.log('i am clicked.delete');
$(this).parent().remove();
});
$('#incomplete-tasks').on('click', '.edit', function() {
console.log("complete task click.edit");
$(this).siblings('input').show();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#incomplete-tasks').on('click', '.edit', function() {
console.log("INcomplete task click.edit");
$(this).siblings('input').show();
$(this).siblings('span').hide();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#incomplete-tasks').on('keyup', '.new-value', function(e) {
if (e.keyCode == 13) {
console.log("Complete Task _Version 2.new_value");
$(this).siblings('span').text($(this).val()).show();
$(this).siblings('input').hide();
$(this).siblings('.delete').show();
$(this).siblings('.edit').show();
$(this).hide();
}
});
$('#incomplete-tasks').on('click', '.text', function() {
var li = $(this).parent().remove().toggleClass("strikethrough");
$('#complete-tasks').append(li);
});
$('#complete-tasks').on('click', '.delete', function() {
console.log('i am clicked.delete');
$(this).parent().remove();
});
$('#complete-tasks').on('click', '.edit', function() {
console.log("complete task click.edit");
$(this).siblings('input').show();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#complete-tasks').on('click', '.edit', function() {
console.log("INcomplete task click.edit");
$(this).siblings('input').show();
$(this).siblings('span').hide();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#complete-tasks').on('keyup', '.new-value', function(e) {
if (e.keyCode == 13) {
console.log("Complete Task _Version 2.new_value");
$(this).siblings('span').text($(this).val()).show();
$(this).siblings('input').hide();
$(this).siblings('.delete').show();
$(this).siblings('.edit').show();
$(this).hide();
}
});
$('#complete-tasks').on('click', '.text', function() {
var li = $(this).parent().remove().toggleClass("strikethrough");
$('#incomplete-tasks').append(li);
});
// var save()
//{
// localStorage.setItem("List", $("#list").innerhtml());
// }
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>The Reminder list</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Custom CSS -->
<link href="css/heroic-features.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">To Do List</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h1> The Reminder Friend App </h1>
<p>this is my to do list app. type in the list you want to add & store in the list
</p>
<form>
<!-- textbox -->
<input type="text" id="textbox">
<!--add button -->
<input type="button" id="Sumbit_Button" value="Add">
</form>
</header>
<hr>
<div id='lists'>
<!-- Page Features -->
<div class="row text-center">
<div class="col-md-6 col-sm-6 hero-feature">
<div class="thumbnail">
<div class="caption">
<h3>Incomplete</h3>
<ul id="incomplete-tasks">
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 hero-feature">
<div class="thumbnail">
<div class="caption">
<h3>Complete</h3>
<ul id="complete-tasks">
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Mauricio Cuervo 2017</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
<script src="p4.js"></script>
</html>
Hello you can do something like this:
$("#Sumbit_Button").click(function() {
var textbox_Value = $("#textbox").val();
var list = [];
list.push(textbox_Value);
localStorage.setItem("listdata", list);
// do not manage using `append` whole html. Manage through list and display as you want
});
on page load call:
var stored = localStorage.getItem("listdata");
Now here you can manage array of items and iterate on complete & incomplete list.
So whenever any action of edit, delete, add occurs you have to just manage the localstorage instance on each call. and based on that just iterate list whereever you want.
I know Objective-C, but I am very new to HTML/jQuery/JS.
I want to create a Table view using these.
Can anyone assist me by showing me how to do this? Although I was able to create a static Table view using below code.
I am now stuck unsure of how to fill it with an Array.
Source code:
<!DOCTYPE html>
<html>
<head>
<title>Twitter Bootstrap : Grids using Bootstrap </title>
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<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.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
.demog {
background:#444;
color:#ffffff;
padding:10px;
height:80px;
margin-left: 0 ;
margin-bottom:1px;
text-align:left;
}
</style>
<body>
<div data-role="page" id="table">
<div data-role="header" data-add-back-btn="True" data-back-btn-text="Return">
<h1>Table</h1>
<a href="dashboard.html" class="ui-btn-left" data-icon="home" data-iconpos="notext"
data-direction="reverse">Home</a>
<div class="bootstrap-demo">
<div class="row ">
<div class="col-md-1"><p class="demog">value 1 <br><br>Thdepiof fu utoiurotiurotpu oiturou</p></div>
<div class="col-md-1"><p class="demog">Value 2</p></div>
<div class="col-md-1"><p class="demog">Value 3</p></div>
<div class="col-md-1"><p class="demog">Value 4</p></div>
<div class="col-md-1"><p class="demog">Value 5</p></div>
<div class="col-md-1"><p class="demog">Value 6</p></div>
<div class="col-md-1"><p class="demog">Value 7</p></div>
<div class="col-md-1"><p class="demog">Value 8</p></div>
<div class="col-md-1"><p class="demog">Value 9</p></div>
<div class="col-md-1"><p class="demog">Value 10</p></div>
<div class="col-md-1"><p class="demog">Value 11</p></div>
<div class="col-md-1"><p class="demog">Value 12</p></div>
</div>
</div>
</div>
</div>
</body>
</html>
For JQuery, a dynamic tableview implementation is pretty straightforward. You can replace your 'row' div with something like this:
<ul data-role="listview" id="itemslist" data-autodividers="true">
</ul>
where the last attribute is optional if you don't want sub-headers.
Then you can populate the list with javascript like this, where 'data' is a JSON array of 'item' objects:
function updateList(data, listId, target) {
// called to populate list
$(listId).empty();
$.each(data, function(i, item) {
$(listId).append('<li><h3>' + item.title + '</h3></li>');
});
$(listId).listview().listview('refresh');
}
The list can be populated on any of the page events (e.g. pageinit, pageshow, pagebeforeshow), as in the below example. Note that some page events are deprecated in JQuery Mobile 1.5, in favor of pagecontainer events.
$(document).on('pageinit', '#main', function(){
updateList(allitems, '#itemslist', '#itemdetail');
$('#itemslist').on('click', 'a', function(e) {
// store selected item into global variable for use on detail page
curItem = this.id;
});
});
Here's a complete working example, with data:
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html lang=en>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- JQuery dependencies -->
<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.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
var allitems = [
{"title":"first item",
"description":""
},
{"title":"second item",
"description":""
},
{"title":"third item",
"description":""
},
{"title":"fourth item",
"description":""
}
];
$(document).on('pageinit', '#home', function(){
updateList(allitems, '#itemslist', '#itemdetail');
$('#itemslist').on('click', 'a', function(e) {
// store selected item into global variable for use on detail page
curItem = this.id;
});
});
function updateList(data, listId, target) {
// called to populate list
$(listId).empty();
$.each(data, function(i, item) {
$(listId).append('<li><h3>' + item.title + '</h3></li>');
});
$(listId).listview().listview('refresh');
}
</script>
<title>List demo</title>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>List demo</h1>
</div>
<div data-role="main" class="ui-content">
<div>
<ul data-role="listview" id="itemslist">
</ul>
</div>
</div>
</div>
</body>
</html>
Im making a simple form with Telerik Appbuilder HTML5 + javascript that takes a users input and logs it to the console when they click the submit button.
ClientClass.js:
function Client() {
this.username = "username",
this.password = "Password",
this.printUsername = function() {
this.username=$("#Username").val()
console.log(this.username);
};
};
Home.html:
<div data-role="view" data-title="Login" data-layout="main" data-model="APP.models.login">
<script src="../scripts/ClientClass.js"></script>
<h1 data-bind="html: title"></h1>
<script src="../scripts/ClientClass.js"></script>
<script>
function printUsername() {
var client = new client();
client.printUsername();
}
</script>
<ul data-role="listview" data-style="inset">
<li>
<label>Username
<input type="text" value="" id="Username" />
</label>
</li>
<li>
<label>Password
<input type="password" value="" />
</label>
</li>
<li>
<label>
<button onclick="printUsername()" type="button">Submit</button>
</label>
</li>
</ul>
</div>
Index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ClientClass.js"></script>
</head>
<body>
<script src="scripts/ClientClass.js"></script>
<script src="scripts/ClientClass.js"></script>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!-- application views will be rendered here -->
<label>
<input type="password" value="password" />
</label>
<div data-role="footer">
<div data-role="tabstrip">
Home
Settings
Contacts
</div>
</div>
</div>
</body>
</html>
It says in the console:
uncaught type error: undefined is not a function.
Then it says it is at index.html#views/home.html:1 and when I click that and it takes me to sources panel of the debugger. And it says the source is index.html and it says:
(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {printUsername() }; }}}})
Does anyone see any issues with my html or javascript? Or the way I import the script? Thanks
you are declaring your client as an object, not as a "class". So using new on your object doesn't make quite sense.
So it's up to you or you keep your object and simply remove:
var client = new client();
or you use a class
function Client(){}
I'm very new with Intel-XDK.
Building a new App using the AppStarter framework.
I'm trying to make a very basic App that takes pictures on one "page", and then allows me to view the image(s) on another page, where I also want to capture details about each image.
I get the idea so far that you only really build one page with XDK, ie, everything is in index.html, and your "pages" are just div's.
I succesfully got the first page to envoke the camera, but I cannot get the image to "save" and be available for view on my "second page" yet.
On my iPhone, when testing this app, I can take a picture, but it isn't saved anywhere, on my Android device, it saves the image, but names it "test.jpg" and it saves to the root of the sdcard, and not to the usual DCIM folder.
I tried using the onclick events to kick-off the functions.
Any pointers welcome!
<!DOCTYPE html>
<html><!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
// This event handler is fired once the intel libraries are ready
function onDeviceReady() {
//hide splash screen now that our app is ready to run
intel.xdk.device.hideSplashScreen();
setTimeout(function () {
$.ui.launch();
}, 50);
}
//initial event handler to detect when intel is ready to roll
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
document.addEventListener("intel.xdk.camera.picture.add",onSuccess);
document.addEventListener("intel.xdk.camera.picture.busy",onSuccess);
document.addEventListener("intel.xdk.camera.picture.cancel",onSuccess);
function capturePhoto() {
intel.xdk.camera.takePicture(50,true,"jpg");
}
function onSuccess(evt) {
if (evt.success == true)
{
// create image
var image = document.createElement('img');
image.src=intel.xdk.camera.getPictureURL(evt.filename);
image.id=evt.filename;
document.body.appendChild(image);
}
else
{
if (evt.message != undefined)
{
alert(evt.message);
}
else
{
alert("error capturing picture");
}
}
}
function showImages() {
var arrPictureList = intel.xdk.camera.getPictureList();
for (var x=0;x<arrPictureList.length;x++)
{
// create image
var newImage = document.createElement('img2');
newImage.src=intel.xdk.camera.getPictureURL(arrPictureList[x]);
newImage.setAttribute("style","width:100px;height:100px;");
newImage.id=document.getElementById("img_" + arrPictureList[x]);
document.body.appendChild(newImage);
}
}
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && !$.os.ios && $("#afui").get(0).className !== "ios")
$("#afui").removeClass("ios");
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<div id="afui" class="ios">
<div id="header"></div>
<div id="content" style="">
<div class="panel" title="PhotoTag" data-nav="nav_0" id="main" selected="selected"
style="" data-appbuilder-object="page">
<ul class="list" data-appbuilder-object="list" style="">
<li>Take Picture
</li>
<li>View Pictures
</li>
<li>Help
</li>
</ul>
</div>
<div class="panel" title="Take Picture" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
onclick="capturePhoto();">Take Picture</a>
</div>
<div class="panel" title="View Picture" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
onclick="showImages();">Show Pictures</a>
</div>
<div class="panel" title="Help" data-nav="nav_0" id="page_3" data-appbuilder-object="page"
style=""></div>
</div>
<div id="navbar">
Home
</div>
<header id="header_0" data-appbuilder-object="header">
<a id="backButton" href="#" class="button back" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">test</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
</div>
</html>
OK, I managed to come right.
This code does what I need so far wrt taking the picture on one "page" and then displaying it on another.
Having issues with the use of the localStorage now - posted a new question.
<!DOCTYPE html>
<html><!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
// This event handler is fired once the intel libraries are ready
function onDeviceReady() {
//hide splash screen now that our app is ready to run
intel.xdk.device.hideSplashScreen();
setTimeout(function () {
$.ui.launch();
}, 50);
}
//initial event handler to detect when intel is ready to roll
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
document.addEventListener("intel.xdk.camera.picture.add",onSuccess);
document.addEventListener("intel.xdk.camera.picture.busy",onSuccess);
document.addEventListener("intel.xdk.camera.picture.cancel",onSuccess);
function capturePhoto() {
intel.xdk.camera.takePicture(50,true,"jpg");
}
function onSuccess(event)
{
if (event.success === true)
{
var imagesrc = intel.xdk.camera.getPictureURL(event.filename);
var pic1 = document.getElementById("pic1");
pic1.src = imagesrc;
localStorage.imagesrc = imagesrc;
}
else
{
if (event.message !== undefined)
{
alert(event.message);
}
else
{
alert("error capturing picture");
}
}
}
function showPicture()
{
var picture = document.getElementById("pic2");
var pic1src = localStorage.imagesrc;
picture.src = pic1src;
document.form2.locationview.value = localStorage.location;
document.form2.titleview.value = localStorage.title;
document.form2.metadataview.value = localStorage.metadata;
}
function saveForm()
{
localStorage.location = document.form1.location.value;
localStorage.title = document.form1.title.value;
localStorage.metadata = document.form1.metadata.value;
}
function updateForm()
{
localStorage.location = document.form2.locationview.value;
localStorage.title = document.form2.titleview.value;
localStorage.metadata = document.form2.metadataview.value;
}
function showStorage()
{
document.getElementById("page_3").innerHTML = localStorage.location;
}
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && !$.os.ios && $("#afui").get(0).className !== "ios")
$("#afui").removeClass("ios");
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<div id="afui" class="ios">
<div id="header"></div>
<div id="content" style="">
<div class="panel" title="PhotoTagger" data-nav="nav_0" id="main" selected="selected"
style="background-image: url(images/splash.jpg);"
data-appbuilder-object="page" data-footer="footer_1">
<div class="centerbutton">
<a class="button" href="#page_1" data-appbuilder-object="button" data-transition="slide"
id="button_1" onclick="capturePhoto();">Store data in EXIF</a>
</div>
</div>
<div class="panel" title="Take Picture" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
style="" data-footer="footer_1">
<form style="width: 100%;min-height: 50px;" data-appbuilder-object="form" class=""
id="form1" name="form1">
<img src="images/EmptyBox-Phone.png" id="pic1" width="150px" height="200px">
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Location</label>
<input type="text" style="float:left;" id="location" placeholder="">
</div>
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Title</label>
<input type="text" style="float:left;" id="title" placeholder="">
</div>
<div class="textarea_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="textarea">
<label for="">MetaData</label>
<textarea id="metadata"></textarea>
</div>
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
id="" onclick="saveForm();">Save</a>
</form>
</div>
<div class="panel" title="View Picture" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
style="" data-footer="footer_1">
<form style="width: 100%;min-height: 50px;" data-appbuilder-object="form" class=""
id="form2" name="form2">
<img src="images/EmptyBox-Phone.png" id="pic2" width="150px" height="200px" style=""
class="">
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Location</label>
<input type="text" style="float:left;" id="locationview" placeholder="">
</div>
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Title</label>
<input type="text" style="float:left;" id="titleview" placeholder="">
</div>
<div class="textarea_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="textarea">
<label for="">MetaData</label>
<textarea id="metadataview"></textarea>
</div>
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
id="" onclick="updateForm();">Update</a>
</form>
</div>
<div class="panel" title="Test Local Storage" data-footer="footer_1" data-nav="nav_0"
id="page_3" data-appbuilder-object="page" style=""></div>
</div>
<div id="navbar"> Home
</div>
<header id="header_0" data-appbuilder-object="header">
<a id="backButton" href="#" class="button back" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">PhotoTagger</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
<footer id="footer_1" data-appbuilder-object="footer">Home<a href="#page_1" class="icon camera"
onclick="capturePhoto();">Take Picture</a>
View Pictures
Local Storage
</footer>
</div>
</html>
Below is the code that I have for an onclick event.
What I am trying to do is after the last students information is displayed, I want the button to be disabled and display done instead of next.
I have my JS code here and my HTML code below that. I have already tried the .one method with no success.
My JS code:
var studentInfo=[
{
name: 'Sabrina Hill',
address:{street:'172 Brushcreek Dr',city:'Sanford',state:'FL'},
gpa:[3.2,3.7,4.0]
},{
name: 'JoelOsteen',
address:{street:'3226 Lilac Dr', city:'Chicago',state:'IL'},
gpa:[3.0,2.7,2.0]
} ,{
name: 'Superman',
address:{street:'123 Test Dr', city:'Maple Shade',state:'NJ'},
gpa:[3.4,2.7,2.7]
}
];
function el(id){ return document.querySelector(id); }
function displayInfo(){
var st = studentInfo[c];
el('#name').innerHTML = 'Name: '+ (st.name);
el('#address').innerHTML = 'Address: '+(st.address.street+' '+st.address.city+' '+st.address.state);
el('#gpa').innerHTML='GPA: '+st.gpa[c]+' ,'+st.gpa[1]+' ,'+st.gpa[2];
}
el('#info_btn').addEventListener('click', function(){
displayInfo();
c = ++c % studentInfo.length; // Increase Array pointer and loop
}, false);
My HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Student Info</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="form_box">
<div id="contact-form">
<p class="heading">Display Students Information Below:</p>
<div id="form-box">
<div id="output">
<div id="name">
<p></p>
</div>
<div id="address">
<p></p>
</div>
<div id="gpa">
<p></p>
</div>
<div id="date">
<p></p>
</div>
<div id="gpaavg">
<p></p>
</div>
<div id="phone">
<p></p>
</div>
<!-- <div class="clear"></div> -->
</div>
<div id="info_box">
<div id="info_btn">
<h4 id="round" class="heading">Click To See Next Student</h4>
Next
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>