Uncaught ReferenceError: sendcard is not defined

Uncaught ReferenceError: sendcard is not defined - javascript

Ok so i keep getting this error but have no idea why... And yes i have checked other similar posts but nothing helped. Here is the error:
Uncaught ReferenceError: sendcard is not defined
onclick # kikcards.html:102
which is:
<tr><td colspan=2 align=center><img src="/Images/generate.png" width=150 onclick="sendcard()"></td></tr>
All the code i have:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kik Cards | Crazii</title>
<link rel="stylesheet" type="text/css" href="/-default.css"/>
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link id="kikicon" rel="kik-icon" href="kik.png"/>
<script src="/navOpen.js"></script>
<script src="https://cdn.kik.com/kik/2.0.5/kik.js"></script>
</head>
<body class="body">
<nav id="mainNav">
<div id="logo">
<span>C</span>razii<span> </span>
</div>
<div id="mobileToggle">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<ul id="mainMenu">
<li>
Home
</li>
<li>
About
</li>
<li>
PS3 Modding
</li>
<li>
PDFs
</li>
<li>
Kik Cards
</li>
</ul>
</nav>
<div class="mainContent">
<div class="content">
<article class="Content1">
<header>
<h2> Kik Cards</h2>
</header>
<footer>
<p class="post-info"> <br> </p>
</footer>
<content>
<p>
<table>
<tr><td style="text-align:right">Title:</td><td><input id="title"></td></tr>
<tr><td style="text-align:right">Text (optional):</td><td><input id="text"></td></tr>
<tr><td style="text-align:right">Main Title:</td><td><input id="maintitle"></td></tr>
<tr><td style="text-align:right">Little Icon (URL, optional):</td><td><input id="icon"></td></tr>
<tr><td style="text-align:right">Big Picture (URL, optional):</td><td><input id="pic">(If nothing is entered here, the default icon will be used)</td></tr>
<tr><td style="text-align:right">Redirect URL (optional):</td><td><input id="redirect"></td></tr>
<tr><td style="text-align:right">Big picture? (hides the title)</td><td><input type="checkbox" id="big"></td></tr> <!-- document.getElementById(big).checked -> bool -->
<tr><td style="text-align:right">Forward-able?</td><td><input type="checkbox" id="forward" checked=true></td></tr>
<tr><td colspan=2 align=center><img src="/Images/generate.png" width=150 onclick="sendcard()"></td></tr>
</table>
</p>
</content>
</article>
</div>
</div>
<footer class="mainFooter">
<p> Copyright © 2015 <a href="#" title="Crazii"><b>Crazii</b></p>
</footer>
<script>
window.onload = function()
{
if (kik.message && kik.message['url']!="") {
window.location.replace(kik.message['url']);
}
var title = "";
var maintitle = "";
var body = "";
var display = "";
var bigpicture = "";
var forwardable = "";
var redirect = "";
function precede(str, check_for) {
return str.slice(0, check_for.length) == check_for;
}
function sendcard() {
title = document.getElementById("title").value;
maintitle = document.getElementById("maintitle").value;
if (maintitle=="") {
maintitle = "Kik Cards | Crazii";
}
body = document.getElementById("text").value;
document.getElementById("kikicon").href = document.getElementById("icon").value;
display = document.getElementById("pic").value;
if (display == "") {
display = "http://crazii.herobo.com/Images/kik.png";
}
bigpicture = document.getElementById("big").checked;
if (document.getElementById("forward").checked == true) {
forwardable = false;
} else {
forwardable = true;
}
redirect = document.getElementById("redirect").value;
if (precede(redirect, "http://")) {
redirect = redirect;
} else if (precede(redirect, "https://")) {
redirect = redirect;
} else if (redirect == "") {
redirect = "http://crazii.herobo.com";
} else {
redirect = "http://"+redirect;
}
document.getElementById("webtitle").innerHTML = maintitle;
kik.send({
title: title,
text: body,
pic: display,
big: bigpicture,
noForward: forwardable,
data: {'url': redirect}
});
}
}
</script>
</body>
</html>
In advance i appreciate any help i can get, thanks!

The function sendcard() is defined within the scope of the window.onload callback, as of that it is not visible in the global scope.
To self this you cab use addEventListener.
You need the be able to find your element, e.g. by adding an id to it:
<img src="/Images/generate.png" width=150 id="sendcard">
Then in your window.onload you search for that element, and add an event listener:
document.getElementById("sendcard").addEventListener("click",sendcard, false);
You could also think of moving the sendcard definition out of the callback, but then you would pollute the global scope which should be avoided.

Try this:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kik Cards | Crazii</title>
<link rel="stylesheet" type="text/css" href="/-default.css"/>
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link id="kikicon" rel="kik-icon" href="kik.png"/>
<script src="/navOpen.js"></script>
<script src="https://cdn.kik.com/kik/2.0.5/kik.js"></script>
</head>
<body class="body">
<nav id="mainNav">
<div id="logo">
<span>C</span>razii<span> </span>
</div>
<div id="mobileToggle">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<ul id="mainMenu">
<li>
Home
</li>
<li>
About
</li>
<li>
PS3 Modding
</li>
<li>
PDFs
</li>
<li>
Kik Cards
</li>
</ul>
</nav>
<div class="mainContent">
<div class="content">
<article class="Content1">
<header>
<h2> Kik Cards</h2>
</header>
<footer>
<p class="post-info"> <br> </p>
</footer>
<content>
<p>
<table>
<tr><td style="text-align:right">Title:</td><td><input id="title"></td></tr>
<tr><td style="text-align:right">Text (optional):</td><td><input id="text"></td></tr>
<tr><td style="text-align:right">Main Title:</td><td><input id="maintitle"></td></tr>
<tr><td style="text-align:right">Little Icon (URL, optional):</td><td><input id="icon"></td></tr>
<tr><td style="text-align:right">Big Picture (URL, optional):</td><td><input id="pic">(If nothing is entered here, the default icon will be used)</td></tr>
<tr><td style="text-align:right">Redirect URL (optional):</td><td><input id="redirect"></td></tr>
<tr><td style="text-align:right">Big picture? (hides the title)</td><td><input type="checkbox" id="big"></td></tr> <!-- document.getElementById(big).checked -> bool -->
<tr><td style="text-align:right">Forward-able?</td><td><input type="checkbox" id="forward" checked=true></td></tr>
<tr><td colspan=2 align=center><img src="imgh.jpg" width=150 onclick="sendcard()" /></td></tr>
</table>
</p>
</content>
</article>
</div>
</div>
<footer class="mainFooter">
<p> Copyright © 2015 <a href="#" title="Crazii"><b>Crazii</b></p>
</footer>
<script>
if (kik.message && kik.message['url']!="") {
window.location.replace(kik.message['url']);
}
var title = "";
var maintitle = "";
var body = "";
var display = "";
var bigpicture = "";
var forwardable = "";
var redirect = "";
function precede(str, check_for) {
return str.slice(0, check_for.length) == check_for;
}
function sendcard() {
alert("sdf");
title = document.getElementById("title").value;
maintitle = document.getElementById("maintitle").value;
if (maintitle=="") {
maintitle = "Kik Cards | Crazii";
}
body = document.getElementById("text").value;
document.getElementById("kikicon").href = document.getElementById("icon").value;
display = document.getElementById("pic").value;
if (display == "") {
display = "http://crazii.herobo.com/Images/kik.png";
}
bigpicture = document.getElementById("big").checked;
if (document.getElementById("forward").checked == true) {
forwardable = false;
} else {
forwardable = true;
}
redirect = document.getElementById("redirect").value;
if (precede(redirect, "http://")) {
redirect = redirect;
} else if (precede(redirect, "https://")) {
redirect = redirect;
} else if (redirect == "") {
redirect = "http://crazii.herobo.com";
} else {
redirect = "http://"+redirect;
}
document.getElementById("webtitle").innerHTML = maintitle;
kik.send({
title: title,
text: body,
pic: display,
big: bigpicture,
noForward: forwardable,
data: {'url': redirect}
});
}
</script>
</body>
</html>
Remove :- window.onload = function()
{
and end image tag

Related

Using tag key to insert text and change the size of text in Web application

I am making a basic online editing interface for coursework and i want to use keyboard events. The tab key should insert text, this works, but it should also reduce the size of the text on that line. When I use the getElementById, an error displays saying: Cannot read property 'style' of null. How do I go about this?
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="">
</head>
<body>
<aside class="bar">
<div id="heading-container"></div>
</aside>
<div id="inputArea">
<div id="bulletPoints" contenteditable="true">
<div id="divList" contenteditable="true">
<ul class="inputList">
<li id="outlineList"></li>
</ul>
</div>
</div>
</div>
<script>
window.onload = () => {
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key){
if (key.keyCode === 9){
key.preventDefault();
document.execCommand("insertText", true, " ");
document.getElementById("inputList").style.fontSize = "smaller";
}
}
};
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="">
</head>
<body>
<aside class="bar">
<div id="heading-container"></div>
</aside>
<div id="inputArea">
<div id="bulletPoints" contenteditable="true">
<div id="divList" contenteditable="true">
<ul class="inputList" id="inputList">
<li id="outlineList"></li>
</ul>
</div>
</div>
</div>
<script>
window.onload = () => {
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key){
if (key.keyCode === 9){
key.preventDefault();
document.execCommand("insertText", true, " ");
document.getElementById("inputList").style.fontSize = "smaller";
}
}
};
</script>
</body>
</html>
You are missing you id as an attribute to your ul.

clicking next page causes my page to slow down exponentially

this is my first time asking a question on Stack Overflow, any help would be greatly appreciated.
I have a website that displays images from the pixabay api. When i click the button, next, the next page of images is shown. The problem is that with each click, the page slows down at an exponential rate. I know this because i added a success console.log after every completion.
This is the image before:
Image Link Here.
and after
Image Link Here
I think the problem has something to do with the .getJSON call and the for loop inside that call, but I havn't been able to figure it out.
This is the Javascript and HTML
/*
Pixabay api key:
*/
$(document).ready(function () {
var searchValue = "rice"
var defaultPage = 1;
returnPhotos(searchValue, defaultPage);
$("#searchForm").on("submit", function (event) {
//obtain value from user input
searchValue = $("#searchText").val();
returnPhotos(searchValue, defaultPage);
//stops form from submitting to a file
event.preventDefault();
});
});
/*
1. Return Photos from pixabey API
*/
function returnPhotos(searchValue, pageNum) {
let key = "8712269-5b0ee0617ceeb0fd2f84487c3";
let startURL = "https://pixabay.com/api/?key=" + key;
let page = "&page=" + pageNum;
let imagesPerPage = "&per_page=" + 22
let addWH = "&min_width&min_height";
let safeSearch = "&safesearch=true";
let endingURL = "&q=" + searchValue + page + addWH + safeSearch + imagesPerPage;
// activate api and get data
$.getJSON(startURL + endingURL, function (data) {
let image = data.hits;
var imageLength = image.length;
arrayLength = image.length;
if (data) {
let output = ""
for (let x = 0; x < arrayLength; x++) {
//imageObject contains information on each image passed through the array
let imageObject = {
// id: image[x].id,
// pageURL: image[x].pageURL,
// tags: image[x].tags,
// previewURL: image[x].previewURL,
// previewWidth: image[x].previewWidth,
// previewHeight: image[x].previewHeight,
// webformatURL: image[x].webformatURL,
// webformatWidth: image[x].webformatWidth,
// webformatHeight: image[x].webformatHeight,
largeImageURL: image[x].largeImageURL,
// fullHDURL: image[x].fullHDURL,
// views: image[x].views,
// user_id: image[x].user_id,
// user: image[x].user,
// userImageURL: image[x].userImageURL
}
// output this template to the website
output += `
<div class="brick">
<img src="${imageObject.largeImageURL}">
</div>
`
}
$(".masonry").imagesLoaded(function () {
localStorage.clear();
$(".masonry").html(output);
});
console.log("success");
} else {
console.log("Didn't work");
}
getPage(searchValue, pageNum, arrayLength);
// console.log(arrayLength);
});
}
/*
2. INCREASE/Decrease PAGE
*/
function getPage(searchValue, defaultPage, max) {
if (defaultPage <= max + 1) {
$("#pagination2").click(function () {
if (defaultPage <= max) {
defaultPage++;
returnPhotos(searchValue, defaultPage);
console.log(1);
}
$(".pageNumber").html("Page " + defaultPage);
console.log("This is the default page:", defaultPage);
});
}
$("#pagination1").click(function () {
if (defaultPage != 1) {
defaultPage--;
returnPhotos(searchValue, defaultPage);
console.log(1);
}
$(".pageNumber").html("Page " + defaultPage);
console.log("This is the default page:", defaultPage);
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv='cache-control' content='no-cache'>
<title>Photo Gallery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="vendors/css/animate.min.css">
<link rel="stylesheet" href="resources/css/style.css">
<link href="data:image/x-icon;base64,AAABAAEAICAAAAEAIACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+4z/L/pMLv//j6/f///////v7//6vG8P+lwu//5u76/3ek5/+70fP///////7+/v+wyvH/daLn/9Hg9////////////////////////////////////////////////////////////////////////////////////////////1SM4f8kbNn/8PX8///////H2vX/CFnU/4yy6v/W4/j/ClvU/4St6f//////y9z2/xVi1v9QiuD/9Pf9////////////////////////////////////////////////////////////////////////////////////////////VIzh/yRs2f/w9fz/9Pf9/z9+3f9Egd7/8/f9/9bj+P8KW9T/hK3p/+7z+/8ob9n/LXLa//D0/P////////////////////////////////////////////////////////////////////////////////////////////////9UjOH/JGzZ/87e9v+Bqun/CVrU/8zc9v//////1uP4/wpb1P9+qej/ZZfk/xdj1v/J2/X//////////////////////////////////////////////////////////////////////////////////////////////////////1SM4f8kbNn/jrPr/zB02/8RX9X/e6bo//X4/f/W4/j/ClvU/2+e5v8faNj/oL/u////////////////////////////////////////////////////////////////////////////////////////////////////////////VIzh/yRs2f/w9fz/+vz+/6zH8P8EVtP/p8Tv/9bj+P8KW9T/cqDm/yRs2f9ek+P/+fv+//////////////////////////////////////////////////////////////////////////////////////////////////////9UjOH/JGzZ//D1/P///////v7//xJf1f9vnuX/1uP4/wpb1P+ErOn/nb3t/wdY1P+cvO3//v7//////////////////////////////////////////////////////////////////////////////////////////////////1SM4f8kbNn/8PX8//7+///J2/X/BFbT/5G17P/W4/j/ClvU/4St6f/5+/7/RoLe/xZi1v/e6fn/////////////////////////////////////////////////////////////////////////////////////////////////VIzh/yRs2f+au+3/RYLe/xdj1v9bkeL/7/T8/9bk+P8MXNX/ha3q///////W4/f/GmXX/0iE3//1+P3///////////////////////////////////////////////////////////////////////////////////////////+70fP/p8Tv/8fZ9f+jwe//xtn1/8nMz/+Ojo7/vcDG/77S8v/f6fn///////7+/v/P3/b/wNT0//T4/f/////////////////////////////////////////////////////////////////////////////////////////////////////////////////39/f/aWlp/9jY2P9ycnL/29vb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////v7+/9LS0v/CwsL/9/f3//r6+v9oaGj/vr6+/2xsbP/f39//7Ozs/729vf/j4+P//v7+//////////////////////////////////////////////////////////////////////////////////////////////////////+7u7v/f39//6CgoP+JiYn//v7+/+Hh4f+pqan/29vb//n5+f9mZmb/qqqq/2xsbP/h4eH//////////////////////////////////////////////////////////////////////////////////////////////////////6urq/+ampr/0NDQ/3d3d//9/f3/rMfw/9nl+P+zzPH/9vb2/2RkZP/c3Nz/eXl5/9jY2P//////////////////////////////////////////////////////////////////////////////////////////////////////9/f3/5mZmf+Li4v/5OTk/+Hr+f+Msuv/ydv1/42y6//u9Pz/ysrK/4aGhv+0tLT//Pz8/////////////////////////////////////////////////////////////////////////////////////////////////////////////Pz8//j4+P/4+v3/XJHi/+Xt+v//////irHq/7nQ8//+/v7/9fX1//7+/v///////////////////////////////////////////////////////////////////////////////////////////////////////////9nZ2f9ra2v/b29v/7e3t//k7fr/bp3l/6C/7v+xyvH//Pz8/42Njf91dXX/eHh4//Dw8P//////////////////////////////////////////////////////////////////////////////////////////////////////o6Oj/7a2tv/t7e3/bW1t//b4/P/U4vf/4Or5/+nw+//z8/P/ZmZm//b29v+FhYX/09PT///////////////////////////////////////////////////////////////////////////////////////////////////////g4OD/eXl5/3l5ef+/v7///Pz8/6Kiov+FhYX/vr6+//39/f+Xl5f/gYGB/4WFhf/z8/P////////////////////////////////////////////////////////////////////////////////////////////////////////////4+Pj/9PT0///////Ozs7/hoaG/97e3v9tbW3/6+vr//39/f/w8PD//f39/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+fn5/9vb2//mpqa/3d3d//09PT//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+Dg4P/IyMj/7e3t////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="
rel="icon" type="image/x-icon" />
</head>
<body>
<div class="container">
<nav class="nav">
<h1>
<a class="brand-logo" href="index.html">Photo Gallery</a>
</h1>
</nav>
<!-- IMAGE search box-->
<div class="header">
<div>
<h3 class="text-center">Search For Any Image</h3>
<form id="searchForm" autocomplete="off">
<input type="text" class="form-control" id="searchText" placeholder="Search Image Here">
</form>
<h4 class="from-pixabay">Images from Pixabay</h4>
</div>
<div class="paginations">
Previous
<p class="pageNumber">Page 1</p>
Next
</div>
</div>
<!-- IMAGES GO HERE -->
<div class="masonry">
</div>
</div>
<!-- Pre-footer -->
<!--SECTION Contact-Footer -->
<footer class="footer-section" id="contact">
<div class="rows-container">
<div class="footer-con">
<div class="homepage-link">
<a href="http://rkdevelopment.org" target="_blank">
<h3>Rkdevelopment.org</h3>
</a>
</div>
<ul class="social-list center">
<li>
<a href="https://github.com/RexfordK" target="_blank">
<i class="ion-social-github"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/rexford-koduah" target="_blank">
<i class="ion-social-linkedin"></i>
</a>
</li>
<li>
<a href="https://www.freecodecamp.org/rexfordk" target="_blank">
<i class="ion-fireball"></i>
</a>
</li>
</ul>
<p>Copyright © 2018 by Rexford Koduah. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<script src="resources/js/main.js"></script>
</body>
</html>

Every time you call getPage, you are adding another $("#pagination2").click handler. Which means the first time you click it, you do one ajax request. The second time you do two, the third time you do three, etc. You need to either only setup the click handler once, and make sure your logic reflects that, or clear the old one each time with $("#pagination2").off('click').click(

Bootstrap template - Change portfolio text

Ok I downloaded this bootstrap template - Freelancer:
https://blackrockdigital.github.io/startbootstrap-freelancer/
I changed some stuff but the main code is still there. This is how the page looks:
When you click on any of the three cards (HTML or PHP or Android) it displays the picture and title ok, but the description of the course is wrong, it is always the html text.
I tried changing the:
// Popup initialization
var popup = new Popup();
popup.setContent(htmlText);
var popup2 = new Popup();
popup.setContent(phpText);
var popup3 = new Popup();
popup.setContent(androidText);
var modal = new Modal("modal", popup);
var modal2 = new Modal("modal", popup2);
var modal3 = new Modal("modal", popup3);
I also tried adding this at the Popup:
// Popup initialization
var popup = new Popup();
if(popup.title=="Android"){
popup.setContent(androidText);
};
This did not work.
How do I set different descriptions for every popup ?
This is the full html:
<!DOCTYPE html>
<html>
<head>
<title>Team Logic Education Center</title>
<!-- Support for Serbian Latin -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google font: Montserrat (400, 500, 600, 700) -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700" rel="stylesheet">
<!-- Google font: Lato (400, 700) -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"></head>
<!-- Body CSS -->
<link href="css/body.css" rel="stylesheet">
<!-- Header CSS and JS -->
<link href="css/header.css" rel="stylesheet">
<script src="js/header.js"></script>
<!-- Content CSS -->
<link href="css/content.css" rel="stylesheet">
<!-- Section CSS -->
<link href="css/section.css" rel="stylesheet">
<!-- Course CSS and JS -->
<link rel="stylesheet" href="css/course.css">
<script src="js/coursebox.js"></script>
<!-- Contact CSS and JS -->
<!-- <link href="css/contact.css" rel="stylesheet">
<script src="js/contact.js"></script> -->
<!-- Modal CSS and JS -->
<link href="css/modal.css" rel="stylesheet">
<script src="js/modal.js"></script>
<!-- Popup CSS and JS -->
<link href="css/popup.css" rel="stylesheet">
<script src="js/popup.js"></script>
<!-- Data -->
<script src="js/data.js"></script>
</head>
<body>
<!-- Header -->
<div id="header">
<!-- Content inserted via JS -->
</div>
<!-- Popup window (which is modal) -->
<div id="modal">
<!-- Content inserted via JS -->
</div>
<div class="content">
<!-- In-page link for logo section -->
<a class="inlink" id="pocetna"></a>
<!-- Logo section -->
<div class="section green">
<img class="logo" src="Images/TL.png">
<h1>Team Logic Education Center</h1>
</div>
<!-- In-page link for course section -->
<a class="inlink" id="kursevi"></a>
<!-- Course section -->
<div class="section white">
<h1>Kursevi</h1>
<hr>
<div id="courseBox">
<!-- Content inserted via JS -->
</div>
</div>
<!-- In-page link for about section -->
<a class="inlink" id="onama"></a>
<!-- About section -->
<div class="section green">
<h1>O Nama</h1>
<hr>
<p id="content" class="columns" style="max-width: 600px; margin: auto">
<!-- Content inserted via JS -->
</p>
</div>
<!-- In-page link for prices section -->
<a class="inlink" id="cenovnik"></a>
<!-- Prices section -->
<div class="section bluePrice">
<h1>Cenovnik</h1>
<hr>
<p id="contentCenovnik" class="columns" style="max-width: 600px; margin: auto">
<table align="center" style="font-family: Montserrat;">
<tr style="color:white; background-color: #17222c;">
<td>Kurs</td>
<td>Cena</td>
<td>Vreme trajanja</td>
</tr>
<tr>
<td>HTML + CSS + JS </td>
<td>100€</td>
<td>90 min / 1 mesec</td>
</tr>
<tr>
<td>PHP</td>
<td>100€</td>
<td>90 min / 1 mesec</td>
</tr>
<tr>
<td>Android</td>
<td>150€</td>
<td>90 min / 1 mesec</td>
</tr>
</table>
</p>
</div>
<!-- In-page link for contact section -->
<a class="inlink" id="kontakt"></a>
<!-- Contact section -->
<div class="section white">
<h1>Kontakt</h1>
<hr>
<div style="font-family: Lato; font-size: 20px; color: #2C3E50; max-width: 600px; margin: auto">
<div style="float:left;"> <img src="Images/MSG.png" style="vertical-align: middle;"> <span style="vertical-align: middle;"> email#blablac.com </span> </div>
<div style="float:right;"><img src="Images/MOB.png" style="vertical-align: middle;"> <span style="vertical-align: middle;"> +381 (0)63 44 21 56 </span> </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="map" style="width:100%;height:400px">
</div>
<!-- Information section -->
<!-- <div class="section lightBlue">
</div> -->
<!-- Footer section -->
<div class="section darkBlue">
<footer>
Facebook | Linkedin | Skype <br>
© 2017 TeamLogic. Sva prava zadržana.
</footer>
</div>
</div>
</body>
<script>
// Header initialization (using data.js)
var header = new Header("header");
for(var i = 0; i < links.length; i++) {
header.addLink(
links[i].text,
links[i].href,
links[i].className
);
}
// Popup initialization
var popup = new Popup();
popup.setContent(htmlText);
// var popup2 = new Popup();
// popup.setContent(lorem);
//
// var popup3 = new Popup();
// popup.setContent(phpText);
var modal = new Modal("modal", popup);
//
// var modal2 = new Modal("modal", popup2);
// var modal3 = new Modal("modal", popup3);
// Course box initialization (using data.js)
var courseBox = new CourseBox("courseBox");
for(var i = 0; i < courseItems.length; i++) {
courseBox.addItem(
courseItems[i].text,
courseItems[i].color
);
}
courseBox.setCallback(function (text, color) {
popup.setTitle(text);
popup.setCaption(text);
popup.setCaptionBgColor(color);
modal.open();
});
// About section initialization (using data.js)
var content = document.getElementById("content");
content.innerHTML = lorem;
// Prices section initialization (using data.js)
// var contentCenovnik = document.getElementById("contentCenovnik");
// contentCenovnik.innerHTML = cene;
// Google map
function myMap() {
var myCenter = new google.maps.LatLng(43.332859, 21.908850);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 15};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
</body>
</html>
This is the popup.js :
function Popup() {
var self = this;
self.callback = null;
self.setTitle = function (title) {
self.popupTitle.innerHTML = title;
}
self.setCaption = function (caption) {
self.imgBoxCap.innerHTML = caption;
}
self.setCaptionBgColor = function (bgColor) {
self.imgBoxCap.style.backgroundColor = bgColor;
}
self.setContent = function (content) {
self.popupContent.innerHTML = content;
}
self.open = function() {
self.container.className = "popup";
}
self.close = function() {
self.container.className = "popup zoomOut";
}
self.onClose = function() {
if (self.callback != null) {
self.callback();
}
}
self.setCallback = function(callback) {
self.callback = callback;
}
self.crossItem = document.createElement("div");
self.crossItem.className = "cross";
self.crossItem.addEventListener("click", self.onClose);
self.crossItem.innerHTML = "×";
self.crossBox = document.createElement("div");
self.crossBox.className = "crossBox";
self.crossBox.appendChild(self.crossItem);
self.popupTitle = document.createElement("div");
self.bar = document.createElement("div");
self.bar.className = "bar";
self.bar.appendChild(self.popupTitle);
self.bar.appendChild(self.crossBox);
self.imgBoxCap = document.createElement("div");
self.imgBoxCap.className = "imgBoxCap";
self.imgBox = document.createElement("div");
self.imgBox.className = "imgBox";
self.imgBox.appendChild(self.imgBoxCap);
self.popupContent = document.createElement("p");
self.middle = document.createElement("div");
self.middle.className = "middle";
self.middle.appendChild(self.imgBox);
self.middle.appendChild(self.popupContent);
self.container = document.createElement("div");
self.container.className = "popup none";
self.container.appendChild(self.bar);
self.container.appendChild(self.middle);
}
Also tried this:
// Popup initialization
var popup = new Popup();
if(CourseBox.text=="Android"){
popup.setContent(phpText);
} else {
popup.setContent(htmlText);
};
But every description is now phpText...

Fixed in:
courseBox.setCallback(function (text, color) {
console.log(text);
popup.setTitle(text);
//HERE
if (text=="HTML + CSS + JS") {
popup.setCaption(text);
popup.setContent(htmlText);
} else if(text=="PHP") {
popup.setCaption(text);
popup.setContent(phpText);
} else {
popup.setCaption(text);
popup.setContent(androidText);
};
popup.setCaptionBgColor(color);
modal.open();
});

JavaScript does not execute in emulator (PhoneGap in Android)

I am facing a strange behavior in my PhoneGap Application.I am new to this so your every help will be appreciable.
I've made an application in PhoneGap(Cordova) where I have designed two Index.html file.
Using Index.html file when I click on Icon(my_notification_new) I move to Notification.html.(In which data displayed in list view loaded from Server).
A) Index.html (Which works perfect)
<!DOCTYPE html>
<html>
<head>
<!-- /* Title */ -->
<title>Newa: HTML Template</title>
<!-- /* Meta Tags */ -->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- /* Stylesheets */ -->
<link rel="stylesheet" href="css/my-custom-theme.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div data-role="page">
<div class="header">
<p>Smart Self-Service</p>
</div>
<div class="content">
<div class="bar">
/***********Move to Notification.html******************/
<div class="one_half">
<a href="Notification.html">
<img src="images/my_notification_new.png" align="center" /></a>
<p class="dashfont" align="center">Notifications</p>
</div>
/********************************************************/
<div class="one_half">
<a href="#">
<img src="images/new_request_new.png" align="center" /></a>
<p class="dashfont" >Self-Service request</p>
</div>
</div>
<div class="bar">
<div class="one_half">
<a href="#">
<img src="images/setting.png" align="center" /></a>
<p class="dashfont" align="center">Settings</p>
</div>
<div class="one_half">
<a href="#">
<img src="images/exit.png" align="center" /></a>
<p class="dashfont" align="center"ali>Exit</p>
</div>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Now after changes some design I've make this Index.html
B)Index.html(through this when I move to Notification.html I cant see data in list view JS is not execute)
<!DOCTYPE html>
<html>
<head>
<title>Worklist</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style type="text/css">
#center_content{
text-align:center;
min-height:400px;
}
#dashboard{
width:350px;
margin:0px auto;
display:block;
clear:both;
text-align:center;
}
.dashaboard_icon{
padding:block;
padding:35px;
float:center;
margin-bottom:10px;
}
</style>
</head>
<body>
<div data-role="page" data-theme="f">
<div data-role="header" data-position="fixed">
<h1 style="white-space:pre-wrap">Smart Self Service</h1>
</div><!-- /header -->
<div data-role="content" data-theme="f">
<div id="center_content">
<div id="dashboard">
/********* Move to Notification.html**********/
<img id="dIcon_notification" src="images/mdpi/my_notification_new.png" class="dashaboard_icon" alt="" >
/*******************/
<img id="dIcon_request" src="images/mdpi/new_request_new.png" class="dashaboard_icon" alt="" >
<img id="dIcon_setting" src="images/mdpi/setting.png" class="dashaboard_icon" alt="" >
<img id="dIcon_exit" src="images/mdpi/exit.png" class="dashaboard_icon" alt="" >
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
and here is my Notification.html. which works perfect.
<!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.2.0/jquery.mobile-1.2.0.min.css"/>
<script src="moment.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
function soap() {
Hr_Offer();
Hr_Vacancy();
function Hr_Offer() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","http://180.211.97.41:7777/orabpel/default/XXNotificationListRetrieval/1.0",true);
/*** Soap Envelop ***/
var sr= "<?xml version='1.0' encoding='UTF-8'?>";
sr+="<soap:Envelope xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:wsu=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd\">";
sr+="<soap:Header>";
sr+="<wsse:Security xmlns:wsse=\"http:\//docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns:env=\"http://schemas.xmlsoap.org/soap/envelope/\" soap:mustUnderstand=\"1\">";
sr+="<wsse:UsernameToken xmlns:wsse=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\">";
sr+="<wsse:Username>CBROWN<\/wsse:Username>";
sr+="<wsse:Password Type=\"http:\//docs.oasis-open.org\/wss\/2004\/01\/oasis-200401-wss-username-token-profile-1.0#PasswordText\">welcome<\/wsse:Password>";
sr+="<\/wsse:UsernameToken>";
sr+="<\/wsse:Security>";
sr+="<\/soap:Header>";
sr+="<soap:Body xmlns:ns1=\"http://xmlns.oracle.com/bpel/mobile/Notificationlist\">";
sr+="<ns1:NotificationlistRetrievalREQ>";
sr+="<ns1:NotificationlistType>HR_OFFER<\/ns1:NotificationlistType>";
sr+="<ns1:Status>TODO<\/ns1:Status>";
sr+="<\/ns1:NotificationlistRetrievalREQ>";
sr+="<\/soap:Body>";
sr+="<\/soap:Envelope>";
/*** Send the POST request ***/
xmlhttp.setRequestHeader("Accept", "application/xml", "text/xml", "\*/\*");
xmlhttp.setRequestHeader("SOAPAction", "process");
xmlhttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
xmlhttp.send(sr);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
//alert('Response'+xmlhttp.responseXML);
var xmlResult=xmlhttp.responseXML;
/*** Pull out the quote and author elements ***/
var notificationId = xmlResult.getElementsByTagName('NotificationId');
var notificationContext = xmlResult.getElementsByTagName('NotificationContext');
var subject = xmlResult.getElementsByTagName('Subject');
var startDate = xmlResult.getElementsByTagName('BeginDate');
var dueDate = xmlResult.getElementsByTagName('DueDate');
/*** Create arrays***/
var arrNotificationId=new Array();
var arrNotificationContext=new Array();
var arrSubject=new Array();
var arrStartDate=new Array();
var arrDueDate=new Array();
/*** Loop through each quote elements yanking out the values and pushing them into the array ***/
for (i=0; i<notificationId.length; i++)
{
arrNotificationId.push(notificationId[i].childNodes[0].nodeValue);
arrNotificationContext.push(notificationContext[i].childNodes[0].nodeValue);
arrSubject.push(subject[i].childNodes[0].nodeValue);
//alert(startDate[i].childNodes[0].nodeValue);
var tempStart=startDate[i].childNodes[0].nodeValue;
var date_start = moment(tempStart).format("DD-MM-YYYY");
arrStartDate.push(date_start);
var tempDue=startDate[i].childNodes[0].nodeValue;
var date_due= moment(tempDue).format("DD-MM-YYYY");
arrDueDate.push(date_due);
}
/*** Display in Listview ***/
for (var s in arrNotificationId) {
//alert(arrSubject[s]);
$("#list_workList").append($("<li><a style=\"white-space:pre-wrap;\" href='" + arrSubject[s].link + "'>"+ arrSubject[s].toString() +"\n"+"Start Date :"+arrStartDate[s]+" "+"Due Date :"+arrDueDate[s]+ "</a></li>"));
}
$('#list_workList').listview('refresh');
}
else
{
alert('Error '+xmlhttp.status);
}
}
}
}
function Hr_Vacancy() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","http://ip:port/orabpel/default/XXNotificationListRetrieval/1.0",true);
/*** Soap Envelop ***/
var sr= "<?xml version='1.0' encoding='UTF-8'?>";
sr+="<soap:Envelope xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:wsu=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd\">";
sr+="<soap:Header>";
sr+="<wsse:Security xmlns:wsse=\"http:\//docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns:env=\"http://schemas.xmlsoap.org/soap/envelope/\" soap:mustUnderstand=\"1\">";
sr+="<wsse:UsernameToken xmlns:wsse=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\">";
sr+="<wsse:Username>Hello<\/wsse:Username>";
sr+="<wsse:Password Type=\"http:\//docs.oasis-open.org\/wss\/2004\/01\/oasis-200401-wss-username-token-profile-1.0#PasswordText\">world<\/wsse:Password>";
sr+="<\/wsse:UsernameToken>";
sr+="<\/wsse:Security>";
sr+="<\/soap:Header>";
sr+="<soap:Body xmlns:ns1=\"http://xmlns.oracle.com/bpel/mobile/Notificationlist\">";
sr+="<ns1:NotificationlistRetrievalREQ>";
sr+="<ns1:NotificationlistType>HR_VACANCY<\/ns1:NotificationlistType>";
sr+="<ns1:Status>TODO<\/ns1:Status>";
sr+="<\/ns1:NotificationlistRetrievalREQ>";
sr+="<\/soap:Body>";
sr+="<\/soap:Envelope>";
/*** Send the POST request ***/
xmlhttp.setRequestHeader("Accept", "application/xml", "text/xml", "\*/\*");
xmlhttp.setRequestHeader("SOAPAction", "action_name");
xmlhttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
xmlhttp.send(sr);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
//alert('Response'+xmlhttp.responseXML);
var xmlResult=xmlhttp.responseXML;
/*** Pull out the quote and author elements ***/
var notificationId = xmlResult.getElementsByTagName('NotificationId');
var notificationContext = xmlResult.getElementsByTagName('NotificationContext');
var subject = xmlResult.getElementsByTagName('Subject');
var startDate = xmlResult.getElementsByTagName('BeginDate');
var dueDate = xmlResult.getElementsByTagName('DueDate');
/*** Create arrays***/
var arrNotificationId=new Array();
var arrNotificationContext=new Array();
var arrSubject=new Array();
var arrStartDate=new Array();
var arrDueDate=new Array();
/*** Loop through each quote elements yanking out the values and pushing them into the array ***/
for (i=0; i<notificationId.length; i++)
{
arrNotificationId.push(notificationId[i].childNodes[0].nodeValue);
arrNotificationContext.push(notificationContext[i].childNodes[0].nodeValue);
arrSubject.push(subject[i].childNodes[0].nodeValue);
var tempStart=startDate[i].childNodes[0].nodeValue;
var date_start = moment(tempStart).format("DD-MM-YYYY");
arrStartDate.push(date_start);
var tempDue=startDate[i].childNodes[0].nodeValue;
var date_due= moment(tempDue).format("DD-MM-YYYY");
arrDueDate.push(date_due);
}
/*** Display in Listview ***/
for (var s in arrNotificationId) {
//alert(arrSubject[s]);
$("#list_workList").append($("<li><a style=\"white-space:pre-wrap;\" href='" + arrSubject[s].link + "'>"+ arrSubject[s].toString() +"\n"+"Start Date :"+arrStartDate[s]+" "+"Due Date :"+arrDueDate[s]+ "</a></li>"));
}
$('#list_workList').listview('refresh');
}
else
{
alert('Error '+xmlhttp.status);
}
}
}
}
}
</script>
</head>
<body onload="soap()">
<div data-role="page" data-theme="f">
<form name="Worklist" action="" method="post">
<div>
<div id="response" />
</div>
</form>
<div data-role="header" data-position="fixed">
<h1>Worklist</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-theme="c" id="list_workList">
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
And strange thing is that It works in eclipce browser and in preview.

if you want to redirect page on Notification.html then add data-ajax="false" in your anchor tag
<a href="Notification.html" data-ajax="false">

How to create a new User object?

i have this code:
//Start of User Constuctor
function User(firstName,lastName){
this.first = firstName;
this.last = lastName;
this.quizScores = [];
this.currentScore = 0;
}
User.prototype = {
constructor:User,
saveScore: function(theScoreToAdd){
this.quizScores.push(theScoreToAdd)
},
showNameAndScores : function(){
var scores = this.quizScores.length > 0 ? this.quizScores.join(",") : "No Scores Yet";
return this.first + " " + this.last + scores;
}
}
//End of User constructor
//Start of Question Constuctor
function inheritPrototype(childObject, parentObject) {
// As discussed above, we use the Crockford’s method to copy the properties and methods from the parentObject onto the childObject
// So the copyOfParent object now has everything the parentObject has
var copyOfParent = Object.create(parentObject.prototype);
//Then we set the constructor of this new object to point to the childObject.
//This step is necessary because the preceding step overwrote the childObject constructor when it overwrote the childObject prototype (during the Object.create() process)
copyOfParent.constructor = childObject;
// Then we set the childObject prototype to copyOfParent, so that the childObject can in turn inherit everything from copyOfParent (from parentObject)
childObject.prototype = copyOfParent;
}
function Question ( question , choices , correctAnswer ){
//those will be uniqe for every question made
this.question = question;
this.choices = choices;
this.correctAnswer = correctAnswer;
this.userAnswer = "";
console.log("created");
}
Question.prototype.getCorrectAnswer = function(){
return this.correctAnswer;
};
Question.prototype.getUserAnswer = function(){
return this.userAnswer;
};
Question.prototype.displayQuestion = function(){
this.question;
choiceCounter = 0;
this.choices.forEach(function(eachQuestion){
choiceCounter;
eachQuestion;
choiceCounter ++;
});
console.log(this.question);
};
function QuestionCreate( question , choices , correctAnswer ){
Question.call(this,question,choices,correctAnswer);
};
function UserCreate ( first,last){
User.call(this,first,last)
}
inheritPrototype(QuestionCreate,Question);
var allQuestions = [
new QuestionCreate("fist",["1","2","3","4"],1),
new QuestionCreate("seconed",["1","2","3","4"],2),
new QuestionCreate("third",["1","2","3","4"],3),
new QuestionCreate("fourh",["1","2","3","4"],4)
];
allQuestions.forEach(function(eachQuestion){
eachQuestion.displayQuestion();
});
// End of Question Constuctor
var allUsers;
if(localStorage["fn"] && localStorage["ln"]){
$("form").remove();
}
$("#login").bind("click",function(){
var firstname = $("#fn").val();
var lastname = $("#ln").val();
var validfn = /[a-zA-Z]/.test(firstname);// check to match the if the input is a-z char
var validln = /[a-zA-Z]/.test(lastname);// check to match the if the input is a-z char
if (validfn && validln) {
var first = firstname;
var last = lastname;
alert(first + " " + last);
localStorage["fn"] = first;
localStorage["ln"] = last;
allUsers = [
new UserCreate(first, last)
]
}
});
As you can see i have a User constuctor.
HTML code:
<!DOCTYPE html>
<html lang="en"> <!--manifest="site.manifest" -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<title>Quiz Version 3</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- contaning all display -->
<div class="container">
<!-- contaning header -- navgiation -->
<header class="row">
<div class="span12">
<nav class="navbar">
<div class="navbar-inner">
Boaz Hoch
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>My Proggres</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Follow Me
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>FaceBook</li>
<li>Google +</li>
<li>Linked-In</li>
</ul>
</li>
<li></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!-- End of Header -->
<!-- contaning main part -->
<section class="row" id="main-container">
<div class="well span6 offset3">
<form>
<fieldset>
<legend>Login</legend>
<input id="fn" type="text" class="input-block-level" placeholder="First Name">
<input id="ln" type="text" class="input-block-level" placeholder="Last Name">
<input id="login" type="submit" class="btn btn-primary" value="login">
</fieldset>
</form>
<!-- crappy script tag at the middle of the html file -->
<script id="try" type="text/x-handlebars-template">
<div> My Name is {{this}}</div>
</script>
</div>
</section>
<!-- contaning all display -->
<footer class="row">
<!-- svg
sqaure
<svg width="200" height="200">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" x="0" y="0" width="10" height="10" fill="none" stroke-width="3" stroke="red"/>
<ellipse cx="10" cy="10" rx="10" ry="5"/>
<line x1="0" y1="0" x2="5" y2="5" />
</svg>
-->
</footer>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/handlebars.js"></script>
<script type="text/javascript" src="js/webapp.js"></script>
<script type="text/javascript" src="js/template.js"></script>
</body>
</html>
As you can see i have a form,
now im trying to create a new User (using the consturctur), with the parameters of his first name and last name,
but i cant seem to create it as i want, i just want everytime that a user submit a form to create a new user object.
check my jsfiddle:
http://jsfiddle.net/qMuwe/

We Keep Coding

JavaScript is the programming language of the Web.

Uncaught ReferenceError: sendcard is not defined - javascript

Related

Using tag key to insert text and change the size of text in Web application

clicking next page causes my page to slow down exponentially

Bootstrap template - Change portfolio text

JavaScript does not execute in emulator (PhoneGap in Android)

How to create a new User object?

Categories

Resources