Dmitry Dmitry - 6 months ago 12
JSON Question

Need help figuring out why my JSON test is misbehaving

I am writing a test page that has a JSON object that stores link strings, and allows the user to add new strings to the JSON object.

The page is created with a global JSON object jsonLinks,

var jsonLinks = {
links: []
};


And has a textfield(txtLinkAddress) that the user can enter URL into, as well as a button that calls performAdd() which is responsible for adding the value of this textfield into the the JSON object which is stored in jsonLinks variable.

The format of JSON entries is

{"href":handles[1].value}


where handles[1] is an HTML element handle to txtLinkAddress loaded in performSetup on page onload).

The test seems to behave as wanted, but when I press the "Add the link" button, the link briefly is added, but then disappears.

I have done a test to see whether the size of the JSON object changes as I add more entries by showing alert of jsonLinks.links.length at the end of each performAdd call, but this test always shown that the JSON object has exactly 1 element.

Can somebody please help me understand why this happens and how to fix it?

source:

<html>
<head>
<style>
th.custom-th-1 {
text-align: left;
font-size: 10pt;
}
</style>
<script>
var handles = null;

var jsonLinks = {
links: []
};

function performSetup()
{
handles = [];
handles[0] = document.getElementById('LinkViewSection');
handles[1] = document.getElementById('txtLinkAddress');
updateLinks();
}

function performAdd()
{
var _reqLinkAddr = handles[1].value;
jsonLinks.links.push({"href": _reqLinkAddr});
updateLinks();
}

function updateLinks()
{
handles[0].innerHTML = '';

for (var i = 0; i < jsonLinks.links.length; ++i)
{
var _hrefValue;
var _linkItem;

_hrefValue = jsonLinks.links[i].href;
_linkItem = document.createElement('a');

_linkItem.innerHTML = _hrefValue;
_linkItem.setAttribute('href', _hrefValue);
handles[0].appendChild(_linkItem);
}
}
</script>
</head>
<body onload="performSetup()">
<div id="LinkViewSection"></div>
<hr />
<div id="AddALinkSection">
<form>
<table>
<th colspan="2" class="custom-th-1">Add a link:</th>
<tr>
<td>Link address</td>
<td><input id="txtLinkAddress"></input></td>
</tr>
<tr>
<td></td>
<td><button onclick="performAdd()">Add the link</button></td>
</tr>
</table>
</form>
</div>
</body>
</html>


Alternative format(traditional, in case the above is difficult to read)

<html>
<head>
<style type="text/css">
th.custom-th-1 {
text-align: left;
font-size: 10pt;
}
</style>
<script type="text/javascript">
var handles = null;

var jsonLinks = {
links: []
};

function performSetup()
{
handles = [];
handles[0] = document.getElementById('LinkViewSection');
handles[1] = document.getElementById('txtLinkAddress');
updateLinks();
}

function performAdd()
{
var _reqLinkAddr = handles[1].value;
jsonLinks.links.push({"href": _reqLinkAddr});
updateLinks();
}

function updateLinks()
{
handles[0].innerHTML = '';

for (var i = 0; i < jsonLinks.links.length; ++i)
{
var _hrefValue;
var _linkItem;

_hrefValue = jsonLinks.links[i].href;
_linkItem = document.createElement('a');

_linkItem.innerHTML = _hrefValue;
_linkItem.setAttribute('href', _hrefValue);
handles[0].appendChild(_linkItem);
}
}
</script>
</head>
<body onload="performSetup()">
<div id="LinkViewSection"></div>
<hr />
<div id="AddALinkSection">
<form>
<table>
<th colspan="2" class="custom-th-1">Add a link:</th>
<tr>
<td>Link address</td>
<td><input id="txtLinkAddress"></input></td>
</tr>
<tr>
<td></td>
<td><button onclick="performAdd()">Add the link</button></td>
</tr>
</table>
</form>
</div>
</body>
</html>

Answer

This happens because you submit your form by pressing the button, which triggers the page to reload. And then all is gone again.

So you should stop the form from submitting. This you can do by returning false:

<button onclick="performAdd(); return false">

Or you can remove the form tag, if you don't need form submission.

Comments