Basically, I have HTML5 markup with two empty divs. I want to use JQuery to populate those divs with two separate forms and 2 separate flash messages based on whether a single localStorage value exists. As I’ve been building it, it’s been working up until the point I wrote the code for dynamically displaying a form. Can someone toy with this code and tell me what I’m missing? I’m not a JavaScript expert (but I’d like to be) – I’m stuck on a rut here. Edit: So far, fixed the issue of forms not displaying. But the flash messages do not appear either, and when a button is pressed, it doesn’t store the value in localStorage anymore, it makes the form disappear and then fade back in again. 🙁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Shrink Once API Tools</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"></link>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<h1 class="head-title">Shrink Once API Tools</h1>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div id="flashAlert">
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="mainFormContent">
</div>
</div>
</div>
</div>
<!-- Include JavaScript at the very bottom for faster page loads -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--
Fall back on local JQuery if Google CDN version is unavailable.
(Since most sites link the Google CDN version, it is more likely
to already be cached by the user's browser).
-->
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
<!-- end Fallback -->
<script src="js/bootstrap.js"></script>
<script>
$(function () {
var apiKeyForm = '<form>'
+ '<legend>Enter your API Key</legend>'
+ '<input type="text" id="apiKey" class="span12" placeholder="e.g. ab12c34d5678efgh90123i45678j90k1">'
+ '<span class="help-block">You can find your access key <a href="https://shrinkonce.com/index.php?menu=usercp#tools" target="blank">here.</a></span>'
+ '<button type="submit" id="saveAPIKey" class="btn btn-info btn-large btn-block">Save</button>'
+ '</form>';
var apiLinkForm = '<form>'
+ '<legend>Add a link or two... or more.</legend>'
+ '<button id="add" class="btn btn-large">Add</button>'
+ '<button id="remove" class="btn btn-large">Remove</button>'
+ '<button id="reset" class="btn btn-large">Reset</button>'
+ '<button type="submit" class="btn btn-info btn-large">Submit</button>'
+ '<hr />'
+ '<div id="linkForm">'
+ '</div>'
+ '</form>';
var i = $('#linkForm input').size() + 1;
$('#add').click(function () {
$('<input type="text" id="inputLink' + i + '" class="shrinklink span12" placeholder="http://google.com">').fadeIn('slow').appendTo('#linkForm');
i++;
return false;
});
$('#remove').click(function () {
if (i > 1) {
$('.shrinklink:last').fadeOut('normal', function () { $(this).remove(); });
i--;
}
return false;
});
$('#reset').click(function () {
while (i > 2) {
$('.shrinklink:last').remove();
i--;
}
return false;
});
$("#saveAPIKey").click(function () {
if (typeof $('#apiKey').val() !== null) {
localStorage.setItem(apiKey, $('#apiKey').val());
$(apiKeyForm).fadeIn('slow').appendTo('.mainFormContent');
}
else {
alert("API Key not set!");
}
return false;
});
if (localStorage.length > 0) {
$('<div class="alert alert-error">You have not yet entered your API token. Add it below, and it will be persisted in memory.</div>').fadeIn('slow').appendTo('.flashAlert');
$(apiLinkForm).fadeIn('slow').appendTo('.mainFormContent');
}
else {
$('<div class="alert alert-success">Your API token is ' + localStorage.getItem(apiKey) + '.</div>').fadeIn('slow').appendTo('.flashAlert');
$(apiKeyForm).fadeIn('slow').appendTo('.mainFormContent');
}
});
</script>
</body>
not sure but maybe it should be
localStorage.getItem('apiKey')