I've a pop-up to display the user list which would display 10 results per page, which is working fine.
I'm getting the page nos. from the java servlet in the JSON.
How do I disable the previous button, when it is the first page?
Likewise, how do I disable the last button, when it is the last page?
Here's my code.
function userList(pageNo) {
var resType="userList";
createTable(resType,pageNo);
$(document).on('click', '.next-btn', function(){
var next = 10+pageNo;
userList(next);
});
$(document).on('click', '.prev-btn', function(){
var previ = pageNo - 10;
userList(previ);
});
}
function createTable(resType, pageNo) {
$.getJSON("https://api.randomuser.me/?results="+pageNo, 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 = []; // The objects as array, so to have an order.
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.find(record => record.picture.thumbnail === obj.picture.thumbnail)) {
errors.push(obj.name.first);
} else {
// Append it
savedData.push(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')
)
);
})
// Clear checkboxes:
$('.selectRow').prop('checked', false);
handleEvents();
}
function logSavedData(){
// Convert to JSON and log to console. You would instead post it
// to some URL, or save it to localStorage.
console.log(JSON.stringify(savedData, null, 2));
}
function getIndex(elem) {
return $(elem).parent('.parent').index();
}
$(document).on('click', '.removeMe', function() {
// Delete this from the saved Data
savedData.splice(getIndex(this), 1);
// And redisplay
refreshDisplay();
});
/* Swapping the displayed articles in the result list */
$(document).on('click', ".down-btn", function() {
var index = getIndex(this);
// Swap in memory
savedData.splice(index, 2, savedData[index+1], savedData[index]);
// And redisplay
refreshDisplay();
});
$(document).on('click', ".top-btn", function() {
var index = getIndex(this);
// Swap in memory
savedData.splice(index-1, 2, savedData[index], savedData[index-1]);
// And redisplay
refreshDisplay();
});
/* 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();
});
$("#extUserForm").submit(function(e){
addExtUser();
return false;
});
});
function addExtUser() {
var extObj = {
name: {
title: "mr", // No ladies? :-)
first: $("#name").val(),
// Last name ?
},
dob: $("#dob").val(),
picture: {
thumbnail: $("#myImg").val()
},
location: { // maybe also ask for this info?
}
};
savedData.push(extObj);
refreshDisplay(); // Will show some undefined stuff (location...)
}
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 {
width: 130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="userList(0)">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" style="display:none">
<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>Submit</button>
</form>
</div>
You should add the prev/next buttons to your HTML as hidden, and then reference them by ID instead of class (as you will only have one of each).
Keep track of the current page number in a global variable.
Show the "prev" button only when the page number is greater than 0. For the "next" button you could apply this trick:
Instead of loading 10 records, load one more, but not for display: if it exists, then the "next" button should be visible.
Here is a snippet with those changes (all changes are in HTML and top part of the script):
var currentPageNo = 0; // Keep track of currently displayed page
$('#next-btn').click(function(){ // Give buttons an ID (include them in HTML as hidden)
userList(currentPageNo+10);
});
$('#prev-btn').click(function(){
userList(currentPageNo-10);
});
function userList(pageNo) {
var resType="userList";
createTable(resType,pageNo);
}
function createTable(resType, pageNo) {
// Update global variable
currentPageNo = pageNo;
// Set visibility of the "prev" button:
$('#prev-btn').toggle(pageNo > 0);
// Ask one record more than needed, to determine if there are more records after this page:
$.getJSON("https://api.randomuser.me/?results=11&start="+pageNo, function(data) {
$('#datatable tr:has(td)').remove();
// Check if there's an extra record which we do not display,
// but determines that there is a next page
$('#next-btn').toggle(data.results.length > 10);
// Slice results, so 11th record is not included:
data.results.slice(0, 10).forEach(function (record, i) { // add second argument for numbering records
var json = JSON.stringify(record);
$('#datatable').append(
$('<tr>').append(
$('<td>').append(
$('<input>').attr('type', 'checkbox')
.addClass('selectRow')
.val(json),
(i+1+pageNo) // display row number
),
$('<td>').append(
$('<a>').attr('href', record.picture.thumbnail)
.addClass('imgurl')
.attr('target', '_blank')
.text(record.name.first)
),
$('<td>').append(record.dob)
)
);
});
// Show the prev and/or buttons
}).fail(function(error) {
console.log("**********AJAX ERROR: " + error);
});
}
var savedData = []; // The objects as array, so to have an order.
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.find(record => record.picture.thumbnail === obj.picture.thumbnail)) {
errors.push(obj.name.first);
} else {
// Append it
savedData.push(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')
)
);
})
// Clear checkboxes:
$('.selectRow').prop('checked', false);
handleEvents();
}
function logSavedData(){
// Convert to JSON and log to console. You would instead post it
// to some URL, or save it to localStorage.
console.log(JSON.stringify(savedData, null, 2));
}
function getIndex(elem) {
return $(elem).parent('.parent').index();
}
$(document).on('click', '.removeMe', function() {
// Delete this from the saved Data
savedData.splice(getIndex(this), 1);
// And redisplay
refreshDisplay();
});
/* Swapping the displayed articles in the result list */
$(document).on('click', ".down-btn", function() {
var index = getIndex(this);
// Swap in memory
savedData.splice(index, 2, savedData[index+1], savedData[index]);
// And redisplay
refreshDisplay();
});
$(document).on('click', ".top-btn", function() {
var index = getIndex(this);
// Swap in memory
savedData.splice(index-1, 2, savedData[index], savedData[index-1]);
// And redisplay
refreshDisplay();
});
/* 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();
});
$("#extUserForm").submit(function(e){
addExtUser();
return false;
});
});
function addExtUser() {
var extObj = {
name: {
title: "mr", // No ladies? :-)
first: $("#name").val(),
// Last name ?
},
dob: $("#dob").val(),
picture: {
thumbnail: $("#myImg").val()
},
location: { // maybe also ask for this info?
}
};
savedData.push(extObj);
refreshDisplay(); // Will show some undefined stuff (location...)
}
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 {
width: 130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="userList(0)">Load First Page</button>
<button id="next-btn" style="display:none">Next Page</button>
<button id="prev-btn" style="display:none">Previous Page</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" style="display:none">
<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>Submit</button>
</form>
</div>
As this URL provides random data, the pages will not show the same data when you revisit them. Also, there is apparently no last page in this random data set. I have guessed the URL parameter for specifying the first record (start), since the results parameter is for specifying the page size, not the first record number. Adapt as needed.
Check previ value is less or equal to 10 if so hide it. Same reverse logic apply for next button. And on next button you can show prev-btn .
$(document).on('click', '.prev-btn', function(){
var previ = pageNo - 10;
if(previ < = 10)
$(this).hide();
UserList(previ);
});
Related
I've been able to display JSON data (local file) into each row in my table, and when the data's corresponding checkbox is checked I want to push those selected values into an array. The end goal is to display the array in a div, but not until I'm able to see that the array is being populated.
JS snippet:
($("#km-table-id tbody tr")).append($("<input />", {"type": "checkbox"}).addClass("checkbox-class"));
let table = $("#km-table-id").DataTable();
let favesArr = [];
$(".checkbox-class").on("click", "tr", function() {
let data = table.row(this).data();
for (var i = 0; i < favesArr.length; i++) {
favesArr.push($(data).text());
$("#myFave.hs-gc-header").append(favesArr[i]);
}
console.log(data); // this was showing the selected data a short time ago, but not anymore
});
console.log(favesArr); // only showing empty
First of all, your last line will always print an empty array because you are only filling it in an event handler.
Secondly, you are using i < favesArr.length as your loop condition. favesArr is empty here yet, if not filled in other parts of the code. The loop body thus is never executed. You probably wanted data.length here.
Last but not least, you may want to push only data[i] and not the whole array into your favesArray.
I would recommend that you capture whether the checkbox is checked. You can check if the item is already in the array by grabbing the data index.
Not sure what your HTML looks like...
(function($) {
$.fn.appendText = function(text) { return this.text(this.text() + text); };
$.fn.appendHtml = function(html) { return this.html(this.html() + html); };
})(jQuery);
const $table = $('#km-table-id');
$table.find('tbody tr').append($("<input>", { type: 'checkbox', class : 'checkbox-class'}));
let table = $table.DataTable();
let favesArr = [];
$table.on('click', '.checkbox-class', function(e) {
let data = table.row(this.parentNode).data(),
checked = $(this).is(':checked'),
dataIndex = favesArr.indexOf(data);
if (checked) {
if (dataIndex === -1) {
favesArr.push(data); // Add item
}
} else {
if (dataIndex > -1) {
favesArr.splice(dataIndex, 1); // Remove item
}
}
$('#myFave.hs-gc-header').appendHtml('>> ' + favesArr.map(x => x.join(', ')).join('; ') + '<br/>');
});
body {
background: #666;
}
.table-wrapper {
background: #fff;
width: 80%;
margin: 0 auto;
margin-top: 1em;
padding: 0.25em;
}
#myFave.hs-gc-header {
background: #fff;
width: 81%;
margin: 0 auto;
margin-top: 0.5em;
height: 5em;
overflow: scroll;
}
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="table-wrapper">
<table id="km-table-id">
<thead>
<tr>
<th>A</th><th>B</th><th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</tbody>
</table>
</div>
<div id="myFave" class="hs-gc-header"></div>
I got buttons to click , and when its clicked i want the value to be incremented by the same value that is being clicked;
here is my html
<div id="setTimer">
<div class="spans">
<span class="timeSet" >1</span>
<span class="timeSet">2</span>
<span class="timeSet">3</span>
<span class="timeSet">4</span>
</div>
<div class="spans">
<span class="timeSet">5</span>
<span class="timeSet">6</span>
<span class="timeSet">7</span>
<span class="timeSet">8</span>
</div>
<div class="spans">
<span class="timeSet">9</span>
<span class="timeSet">0</span>
<span class="timeSet">+30s</span>
</div>
</div>
javascript
$(document).ready(function(){
var count = 0
var btnCountOutput = $('#btnCountOutput');
var txt = $(this);
$('.timeSet').click(function(txt){
count++;
if(count > 3){
console.log('that cant be done!');
return false;
}
var output = txt.currentTarget.innerHTML;
output++;
var num = parseFloat(output);
var inputOut = btnCountOutput.val(num);
console.log(num);
console.log(count);
});
});
Html for the output
<div class="timeCount">
<input type="text" placeholder="Buttonclick Counter" class="col"
id="btnCountOutput">
CSS if needed
#setTimer .spans{
margin-bottom: 10px;
}
#setTimer span{
width: 15px;
height: 10px;
border-radius:50%;
background: white;
text-align: center;
padding: 4px;
cursor: pointer;
}
well , just like Java Script where i could just write;
btnCountOutput.value += num;
That every time the button is clicked , just add on the output any value that is clicked
You need to grab the value of the text box then add it to the number you pass in. After the addition happens, you can then set the value of the text box again. I added a variable called currentCount as an example:
https://jsfiddle.net/mswilson4040/487eaopt/
$(document).ready(function() {
var count = 0
var btnCountOutput = $('#btnCountOutput');
var txt = $(this);
$('.timeSet').click(function(txt) {
count++;
if (count > 3) {
console.log('that cant be done!');
return false;
}
var output = txt.currentTarget.innerHTML;
output++;
var num = parseFloat(output);
var currentCount = btnCountOutput.val(); // Grab the current value
var inputOut = btnCountOutput.val(+num + +currentCount); // Add the two values together and set the text box (make sure to convert string to number)
console.log(num);
console.log(count);
});
});
You also don't need your parseFloat function. You do need some function to make sure you're string gets converted to a number, but you want either Number, parseInt, or +. parseFloat isn't needed unless you'll be working with decimal values.
Here i have an initial table which i have created using rcm.create() method.Then i have to create another in which rows will will be ordered according to the descending summation of the rows from first table.That means the row having higher sum will be placed first in second table.For creating the second table i have rcm.generateTab2() method .Which works as following;
1.call rcm.create() method to create the second table.
2.create the sum of each rows from first table and push it inside a rank array which contains an array of objects.
3.rank array is sorted according to descending value
now rank array contains object with three element.
first td value from each row.
sum of rows
and the complete row which will be used to insert rows in tbody of second table
4.tbody element from second table is deleted.
5.then created a new one and attempted to insert sorted rows form table 1 to table 2.
but all i am getting is table 2 is pushed above table 1 in browser and no rows are inserted.
full code : jsfiddle
main problem is inside rcm.generateTab2 method.So i am posting it here separately .
rcm.generateTab2 method:
generateTab2:function(){
var power=0;
this.create(machine,process); //create the second table
var tbody=document.getElementsByTagName('tbody')[0];
var trow=tbody.getElementsByTagName('tr');
for(i=0;i<trow.length;i++){ //get summation
var td=trow[i].getElementsByTagName('td');
var sum=0;
for(j=td.length-1;j>0;j--){
if(td[j].innerHTML==''){
sum+=0*Math.pow(2,power);
}else{
sum+=parseInt(td[j].innerHTML)*Math.pow(2,power);
}
power++;
}
var first=parseInt(td[0].innerHTML);
rank.push({rowNo:first,sum:sum,row:trow[i]}); //pushed to rank array
power=0;
}
rank.sort(function (a,b){ //rank array is sorted
if(a.sum>b.sum){
return -1;
}else if(a.sum<b.sum){
return 1;
}else{
return 0;
}
});
console.log(rank);
var parent=document.getElementsByTagName('table')[1];
parent.removeChild(parent.childNodes[1]);//delete existing tbody from second table
var newTbody=document.createElement('tbody'); //create a new tbody
parent.appendChild(newTbody); //append it to second table
for(i=0;i<rank.length;i++){
newTbody.appendChild(rank[i].row); //insert rows to tbody of second table
}
}
Not sure if I've understood the ranking math correctly.
Please have a look at the demo below and here at jsfiddle.
I've re-coded your js because I've thought that's easier. (But if you don't like using jQuery, I could have a look at your code and check if I can find the issue.)
I'm using these js libs:
jQuery for DOM manipulation
Underscore for array creation with _.range (could be also done with a for loop, so Underscore is not really needed)
Tinysort jQuery plugin for sorting the table
For the sorting I've added the sorting rank (sum of the row) as data attribute to each row so tinysort can use this to order the table.
The CSS here at SO is a bit different then at jsFiddle (not centered text) in table header. Not sure why.
The default values (3 & 2) in the form inputs is just for easier debugging. Just remove the value attribute from the inputs later.
Update 07.04.2015
I've found the issue with your code. The problem was that you've stored the reference to table1 inside your rank object. The tr elements in the object.
So you've overriden the table1 because of that reference.
You can fix this with using rank[i].row.cloneNode(true) to clone the contents of the row. Then you can append it to your new table with-out the problem.
See the updated fiddle here.
var ROC = {
init: function (element) {
this.$el = $(element);
this.$table1wrap = $('<div/>').attr('id', 'table1wrapper');
this.$table2wrap = $('<div/>').attr('id', 'table2wrapper');
this.$el.append([this.$table1wrap, this.$table2wrap]);
},
create: function (machine, process) {
var self = this,
$tableHeading = $('<tr/>'),
$table = $('<table/>').attr('id', 'mainTable');
this.$table1wrap.html($table.append($('<thead/>').html($tableHeading)));
this.processes = this.createCols(process);
this.machines = this.createRows(machine);
//var addRow = function() {
// this.$el.append($('tr').html(this.processes));
//this.$el.append($('<tr/>').html($('<td/>').text('test')));
$(this.machines).each(function (index, row) {
//console.log(index, $(row));
var $curRow = $(row);
//console.log($tableHeading.length);
$(self.processes).each(function (i, col) {
if (index == 0) {
var letter = String.fromCharCode(97 + i).toUpperCase();
if (i == 0) $tableHeading.append($('<th/>').text('~'));
$tableHeading.append($('<th/>').text(letter));
}
//console.log(i, $(col));
// self.$el.append(($(row).clone()).html($(col).clone()));
if (i == 0) $curRow.append($('<td/>')
.text(index + 1)
.addClass('rowIndex'));
$curRow.append($(col).attr('contentEditable', 'true'));
});
$table.append($curRow.clone());
});
//console.log(this.processes, this.machines);
},
createCols: function (cols) {
var rCols = _.range(cols).map(function (num, index) {
return $('<td/>').text(0);
}); // [td, td, ...];
return rCols;
},
createRows: function (rows) {
var rRows = _.range(rows).map(function (num, index) {
return $('<tr/>');
}); // [tr, tr, ...];
return rRows;
},
copy: function (sel) {
//console.log($(sel));
var $newTable = $(sel).clone().attr('id', 'copy');
var $sortedBody = $($newTable)
.find('tbody')
.html(this.calcRank($newTable));
//console.log($sortedBody, this.calcRank($newTable));
//console.log('sorted', $sortedTable);
$(this.$table2wrap).html($($newTable, 'tbody').append($sortedBody));
},
calcRank: function (newTable) {
var sum, $col;
newTable.find('tr').each(function (index, item) {
//console.log(index, $(item).children());
$col = $(item).children();
sum = 0;
if (index > 0) { // skip heading
$col.each(function (i, cell) {
if (i > 0) sum += parseInt($(cell).text()); // skip first col
});
$(item).attr('data-rank', sum);
}
//console.log(index, sum, $(item));
//$(item).attr('data-rank', sum);
});
//console.log($(newTable));
return tinysort($(newTable).find('tbody>tr'), {
attr: 'data-rank',
order: 'desc'
});
},
reset: function () {
this.$table1wrap.empty();
this.$table2wrap.empty();
}
};
ROC.init('#out');
$('#btnCreate').click(function () {
var proc = $('#process').val(),
machine = $('#machine').val();
ROC.create(machine, proc);
});
$('#btnCreate2').click(function () {
ROC.copy('#mainTable');
});
$('#btnRst').click(function () {
ROC.reset();
});
body {
padding: 1em;
}
input[type='number'] {
background:lightblue;
color:crimson;
margin-left:20px;
}
table {
border-collapse: initial !important;
border-spacing: 10px !important;
}
th {
background:black;
color:white;
width:40px;
height:40px;
border:1px solid white;
text-align:center;
box-shadow:0px 0px 7px black;
}
td {
box-shadow:0px 0px 7px black;
background:white;
width:40px;
height:40px;
border:1px solid black;
text-align:center;
}
td.rowIndex {
background: black;
color: white;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.1.1/tinysort.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Rank Order Clustering</h1>
<fieldset>
<legend style='font-size:30px;background:lightblue;'>insert items</legend>
<label for='process'>process :</label>
<input type='number' id='process' placeholder='processes' value="3" />
<br/>
<label for='machine'>machines :</label>
<input type='number' id='machine' placeholder='machines' value="2" />
<br/>
<input type='button' value='create table' id='btnCreate' />
<input type='button' value=' reset' id='btnRst' />
<input type='button' value='generate table2' id='btnCreate2' />
</fieldset>
<div id="out"></div>
I've got an a list of checkboxes on my MVC4 webpage that are generated like this:
<div style="float: left; padding-left: 5px; padding-right: 5px">
<br />
<h3>#Html.Label("Type de service")</h3>
#foreach (var serviceType in Model.ServiceTypeList)
{
<label>#Html.CheckBox(serviceType.ServiceTypeId.ToString(CultureInfo.InvariantCulture)) #serviceType.Description</label><br />
}
<br />
<h3>#Html.Label("Type d'application")</h3>
#foreach (var appType in Model.ApplicationTypeList)
{
<label>#Html.CheckBox(appType.ApplicationId.ToString()) #appType.ApplicationName</label><br />
}
<br />
</div>
What I want to do now is to send a dictionary for each one of the two lists of checkboxes back to the server when a button is clicked, containing a key/value pair with the ID of the checkbox and a boolean as it's value:
<div style="float: left; padding-left: 15px; padding-right: 5px;">
#using (Html.BeginForm("Filter", "Customer", FormMethod.Post, new Dictionary<string, bool>
{}))
{
<input id="btnFilter" type="submit" value="Filter" />
}
</div>
What is the best way to obtain dynamically the values of both of the lists and send them to the server ?
Something like this should work, it will create 2 array(one for each list) stuctured as
[id-boolean,id-boolean,id-boolean,id-boolean,]:
<script>
$(function() {
$("#button").click(function() {
var listOneArray = [];
var listTwoArray = [];
$("#listOne input[type='checkbox']").each(function() {
var a1 = $(this).attr("id");
var b1 = $(this).prop("checked");
listOneArray.push(a1 + "-" + b1.toString());
});
$("#listtwo input[type='checkbox']").each(function () {
var a2 = $(this).attr("id");
var b2 = $(this).prop("checked");
listTwoArray.push(a2 + "-" + b2.toString());
});
$.post("Yourcontroller/YourAction", { list1: listOneArray, list2: listTwoArray }, function (data) {
//do whatever with the response
});
});
});
</script>
I'm trying to create an upload form. It's working well so far and i'm trying to sort out a couple of bugs that I dislike.
The line that I seem to be having trouble with is
$(element).find(">:first-child").attr("value", "");
When cloning the form, it clones the div and replaces the value with nothing leaving a blank form, this works well, if I were to delete that line I would get the previous form's value, so it would be nice for a blank form to show.
The issue i'm having is when you delete a form all the forms values delete, What I want is when you delete a form, leave the value alone for the other forms.
Here's a fiddle http://jsfiddle.net/d77pd/1/ or see code below
HTML
<button class="clone">Add an Image</button>
<div id="upload_image_sets">
<div id="clonedInput1" class="clonedInput">
<input type="text" id="upload_image_link_1" class="image" size="36" name="hero_options[upload_image_link_1]" value="' . $hero_options['upload_image_link_1'] . '" />
<input id="show_upload_image_link_button_1" class="button upload_images" type="button" value="Upload Image" />
<button class="remove">Remove</button>
</div>
</div>
JavaScript
function updateClonedInput(index, element) {
$(element).appendTo("#upload_image_sets").attr("id", "clonedInput" + index);
$(element).find(">:first-child").attr("id", "cs_product_menu_img_src_" + index);
$(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
$(element).find(">:first-child").attr("value", "");
$(element).find(">:first-child").next().attr("id", "cs_product_menu_img_src_" + index + "_button");
displayRemove();
}
function displayRemove() {
if ($('.clonedInput').length === 1) {
$('.remove').hide();
} else {
$('.remove').show();
}
}
displayRemove();
$(document).on("click", ".clone", function (e) {
e.preventDefault();
var cloneIndex = $(".clonedInput").length + 1;
var new_Input = $(this).closest('.clonedInput').length ? $(this).closest('.clonedInput').clone() : $(".clonedInput:last").clone();
updateClonedInput(cloneIndex, new_Input);
});
$(document).on("click", ".remove", function (e) {
e.preventDefault();
$(this).parents(".clonedInput").remove();
$(".clonedInput").each(function (cloneIndex, clonedElement) {
updateClonedInput(cloneIndex + 1, clonedElement);
})
});
Clone the form a few times, if you delete any form apart form the 1st one with the content, you'll notice the first form's content deletes, I want this left alone.
First approach:
call $(element).find(">:first-child").attr("value", ""); after calling updateClonedInput(cloneIndex, new_Input); from add function.
Working Demo First approach:
Second Approach:
I have modified some code. pass one more bool argument in function updateClonedInput.which will be set true when added and set false when dom is removed.This will prevent the value getting replaced on remove function:
function updateClonedInput(index, element,param) {
$(element).appendTo("#upload_image_sets").attr("id", "clonedInput" + index);
$(element).find(">:first-child").attr("id", "cs_product_menu_img_src_" + index);
$(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
if(param)
$(element).find(">:first-child").attr("value", "");
$(element).find(">:first-child").next().attr("id", "cs_product_menu_img_src_" + index + "_button");
displayRemove();
}
function displayRemove() {
if($('.clonedInput').length === 1) {
$('.remove').hide();
} else {
$('.remove').show();
}
}
displayRemove();
$(document).on("click", ".clone", function(e){
e.preventDefault();
var cloneIndex = $(".clonedInput").length + 1;
var new_Input = $(this).closest('.clonedInput').length ? $(this).closest('.clonedInput').clone() : $(".clonedInput:last").clone();
updateClonedInput(cloneIndex, new_Input,true);
});
$(document).on("click", ".remove", function(e){
e.preventDefault();
$(this).parents(".clonedInput").remove();
$(".clonedInput").each( function (cloneIndex, clonedElement) {
updateClonedInput(cloneIndex + 1, clonedElement,false);
})
});
Working Demo Second Approach
An alternate solution that creates a blank clone from the first element once, then uses this every time a new row is required. It also uses CSS to hide/show the Remove button based on the fact that you only need Remove buttons on all rows unless it's the only child.
Disclaimer: I have removed the id manipulation as I am unsure if you really need it. I can update if necessary.
Demo
HTML
<button class="clone">Add an Image</button>
<div id="upload_image_sets">
<div class="clonedInput">
<input type="text" class="image" size="36" name="hero_options[upload_image_link_1]" value="an initial value" />
<input class="button upload_images" type="button" value="Upload Image" />
<button class="remove">Remove</button>
</div>
</div>
CSS
.clonedInput .remove {
display:inline-block;
}
.clonedInput:only-child .remove {
display:none;
}
JavaScript
function resetForm($form) {
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
}
var $blankClone = $('.clonedInput').clone();
resetForm($blankClone);
$(document).on('click', '.clone', function(e) {
e.preventDefault();
$blankClone.clone().appendTo('#upload_image_sets');
});
$('#upload_image_sets').on('click', '.remove', function(e) {
e.preventDefault();
$(this).closest('.clonedInput').remove();
});
resetForm() borrowed from Resetting a multi-stage form with jQuery