I've a table which gets updated based on JSON data. Each row in the table has a checkbox which holds the value of the corresponding JSON object, which is basically the information about any of the users. On selecting any of the rows, and saving to display the selected user profile, I'm also storing the selected JSON object in an array 'savedData'.
I also have an option of adding the user externally through a form which pops up on clicking 'Open External form' button. Now, I'm trying to create an object and store it in the same 'savedData' array on submitting that form. At the same time, the 'div.parent' should get generated & get appended to 'div.container' in the same format as it is for the the other users selected from the table.
Unfortunately, the 'div.parent' is not getting created, and the external object is not getting added.
Could you please help me fix this?
function createTable() {
$.getJSON("https://api.randomuser.me/?results=5", function(data) {
$('#datatable tr:has(td)').remove();
data.results.forEach(function (record) {
var json = JSON.stringify(record);
$('#datatable').append(
$('<tr>').append(
$('<td>').append(
$('<input>').attr('type', 'checkbox')
.addClass('selectRow')
.val(json)
),
$('<td>').append(
$('<a>').attr('href', record.picture.thumbnail)
.addClass('imgurl')
.attr('target', '_blank')
.text(record.name.first)
),
$('<td>').append(record.dob)
)
);
})
}).fail(function(error) {
console.log("**********AJAX ERROR: " + error);
});
}
var savedData = new Map; // Keyed by image URL. Start with nothing.
function saveData(){
var errors = [];
// Add selected to map
$('input.selectRow:checked').each(function(count) {
// Get the JSON that is stored as value for the checkbox
var obj = JSON.parse($(this).val());
// See if this URL was already collected (that's easy with Set)
if (savedData.get(obj.picture.thumbnail)) {
errors.push(obj.name.first);
} else {
// Append it to the Map:
savedData.set(obj.picture.thumbnail, obj);
}
});
refreshDisplay();
if (errors.length) {
alert('The following were already selected:\n' + errors.join('\n'));
}
}
function refreshDisplay() {
$('.container').html('');
savedData.forEach(function (obj) {
// Reset container, and append collected data (use jQuery for appending)
$('.container').append(
$('<div>').addClass('parent').append(
$('<label>').addClass('dataLabel').text('Name: '),
obj.name.first + ' ' + obj.name.last,
$('<br>'), // line-break between name & pic
$('<img>').addClass('myLink').attr('src', obj.picture.thumbnail), $('<br>'),
$('<label>').addClass('dataLabel').text('Date of birth: '),
obj.dob, $('<br>'),
$('<label>').addClass('dataLabel').text('Address: '), $('<br>'),
obj.location.street, $('<br>'),
obj.location.city + ' ' + obj.location.postcode, $('<br>'),
obj.location.state, $('<br>'),
$('<button>').addClass('removeMe').text('Delete'),
$('<button>').addClass('top-btn').text('Swap with top'),
$('<button>').addClass('down-btn').text('Swap with down')
)
);
resetEvents();
})
// Clear checkboxes:
$('.selectRow').prop('checked', false);
}
function logSavedData(){
// Translate Map to array of values:
var data = Array.from(savedData, function (pair) {
return pair[1];
});
// Convert to JSON and log to console. You would instead post it
// to some URL, or save it to localStorage.
console.log(JSON.stringify(data, null, 2));
}
$(document).on('click', '.removeMe', function() {
var key = $('.myLink', $(this).parent()).attr('src');
// Delete this from the saved Data
savedData.delete(key);
// And redisplay
refreshDisplay();
});
/* Swapping the displayed articles in the result list */
function resetEvents() {
$(".top-btn, .down-btn").unbind('click');
handleEvents();
$('.down-btn').click(function() {
var toMove1 = $(this).parents('.parent');
$(toMove1).insertAfter($(toMove1).next());
handleEvents();
});
$('.top-btn').click(function() {
var toMove1 = $(this).parents('.parent');
$(toMove1).insertBefore($(toMove1).prev());
handleEvents();
});
}
/* Disable top & down buttons for the first and the last article respectively in the result list */
function handleEvents() {
$(".top-btn, .down-btn").prop("disabled", false).show();
$(".parent:first").find(".top-btn").prop("disabled", true).hide();
$(".parent:last").find(".down-btn").prop("disabled", true).hide();
}
$(document).ready(function(){
$('#showExtForm-btn').click(function(){
$('#extUser').toggle();
});
$("#extArticleForm").submit(function(){
addExtUser();
return false;
});
});
function addExtUser() {
var name= $("#name").val();
var imgsrc = $("#myImg").val();
var dob = $("#dob").val();
var errors = [];
extObj = {};
extObj = {};
extObj["name"]["title"] = "mr";
extObj["name"]["first"] = name;
extObj["dob"] = dob;
extObj["picture"]["thumbnail"] = imgsrc;
savedData.push(extObj);
if (savedData.get(imgsrc)) {
errors.push(title);
} else {
$('.container').append(
$('<div>').addClass('parent').append(
$('<label>').addClass('dataLabel').text('Name: '),
+name+
$('<br>'), // line-break between name & pic
$('<img>').addClass('myLink').attr('src', imgsrc), $('<br>'),
$('<label>').addClass('dataLabel').text('Date of birth: '),
+dob+ $('<br>'),
$('<label>').addClass('dataLabel').text('Address: '), $('<br>'),
+address+ $('<br>'),
$('<button>').addClass('removeMe').text('Delete'),
$('<button>').addClass('top-btn').text('Swap with top'),
$('<button>').addClass('down-btn').text('Swap with down')
)
);
resetEvents();
}table, th, td {
border: 1px solid #ddd;
border-collapse: collapse;
padding: 10px;
}
.parent {
height: 25%;
width: 90%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
}
.parent:nth-child(odd){
background: skyblue;
}
.parent:nth-child(even){
background: green;
}
label {
float: left;
width: 80px;
}
input, textarea {
width: 130px;
}
#extUser {
border: 1px solid lightgrey;
border-radius: 5px;
display: none;
padding: 10px;
background-color: skyblue;
}
#extUserForm {
margin: 3px;
padding: 5px;
}<button onclick="createTable()">Create Table</button>
<table id="datatable">
<tr><th>Select</th><th>Name</th><th>DOB</th></tr>
</table>
<button onclick="saveData()">Save Selected</button>
<br />
<div class="container"></div>
<button onclick="logSavedData()">Get Saved Data</button>
<button id="showExtForm-btn">Open External Form</button>
<div id="extUser">
<form id="extUserForm">
<p>
<label for="name">Name:</label>
<input type="text" id="name" required>
</p>
<br />
<p>
<label for="myImg">Image:</label>
<input type="url" id="myImg" required>
</p>
<br />
<p>
<label for="dob">DOB:</label>
<input type="date" id="dob" required>
</p>
<br />
<button onclick="addExtUser()">Submit</button>
</form>
</div>
