Develop Reference

Javascript only: Function renders a dropdown and table where the value from the dropdown is needed to filter the table

I created a function which renders a dropdown and a table. This dropdown gives me values which I use inside the function to filter the table. For some reason, it does not update when I reselect something on the dropdown.
No frameworks please thank you!
Here are some screenshots:
It does not update the columns showed because when I console.log() the values from the dropdown it does not update. It still says 1 5 but when I click the second one it should say 2 5.
I selected the second option on the dropdown. I have no idea how to do this. Sorry, I'm a beginner.
//function which we will use to hide and unhide rows
function toggleClass(element, className, toSet) {
element.classList[toSet ? 'add' : 'remove'](className);
}
//The table is already rendered and when the buttons on the screen are clicked, this pagination function is called
function columnPagination(input) {
var table = document.getElementById("tablePrint"),
dataRows = table.getElementsByTagName('tr'),
listHTML = "";
//get date labels for dropdown
var filterDateLabels = [];
var columns = table.getElementsByTagName('th');
for(var ii = 0; ii < columns.length; ii++){
if(ii%input==0){
filterDateLabels.push(columns[ii].innerHTML.slice(21,33));
}
if(ii%input==input-1){
filterDateLabels.push(columns[ii].innerHTML.slice(21,33));
}
}
//display dropdown with values which you will use to filter the table
listHTML += "<select id=\"pagenumber\")>";
for(var ii = 0; ii < filterDateLabels.length; ii++){
listHTML += "<option value = \"" + ii + "\">" + filterDateLabels[ii] + " - ";
if(filterDateLabels[ii+1]!= ""){
listHTML += filterDateLabels[ii+1] + "</option>";
ii++;
}
else{
listHTML+="LAST </select>";
}
}
document.getElementById('dates').innerHTML = listHTML;
var multiplier = document.getElementById('pagenumber').value;
multiplier = multiplier/2;
if(multiplier == 0){
multiplier = 1;
}
//hiding function which works but doesn't update when the dropdown is clicked
input = input*multiplier;
console.log(multiplier, input);
for (var i = 0; i < dataRows.length; i++) {
var cells = dataRows[i].children;
for (var cell = 0; cell < cells.length; cell++) {
toggleClass(cells[cell], 'hide', cell > input)
}
}
}

I ended up just using onchange="myFunction()".
http://www.w3schools.com/jsref/event_onchange.asp
Everything you need is up there if you encounter the same issue as I did. I was having trouble because I was editing the wrong file. #KevinKloet helped me realize that by pointing out another error. Thanks!

Javascript - Loop through select options clicking each one

I am trying to go through a select list with 200+ entries and click on each one. When an element is clicked on it executes a function selectCountry() which adds a line to a table. I want to have it create a table with every option selected. The page of interest is at: http://www.world-statistics.org/result.php?code=ST.INT.ARVL?name=International%20tourism,%20number%20of%20arrivals.
So far I have the following, but it doesn't seem to work:
var sel = document.getElementById('selcountry');
var opts = sel.options;
for(var opt, j = 0; opt = opts[j]; j++) {selectCountry(opt.value)}
I am trying to do this in the console in Chrome.

One of the most useful features of dev tools is that when you write the name of a function, you get back its source code. Here's the source code for the selectCountry function:
function selectCountry(select) {
if (select.value == "000") return;
var option = select.options[select.selectedIndex];
var ul = select.parentNode.getElementsByTagName('ul')[0];
var choices = ul.getElementsByTagName('input');
for (var i = 0; i < choices.length; i++)
if (choices[i].value == option.value) {
$("#selcountry:selected").removeAttr("selected");
$('#selcountry').val('[]');
return;
}
var li = document.createElement('li');
var input = document.createElement('input');
var text = document.createTextNode(option.firstChild.data);
input.type = 'hidden';
input.name = 'countries[]';
input.value = option.value;
li.appendChild(input);
li.appendChild(text);
li.onclick = delCountry;
ul.appendChild(li);
addCountry(option.firstChild.data, option.value);
$("#selcountry:selected").removeAttr("selected");
$('#selcountry').val('');
}
Your flaw is now obvious. selectCountry accepts the entire select element as an argument as opposed to the select's value (which is a terrible design but meh). Instead of passing the value of the element, change its index:
var sel = document.getElementById('selcountry');
var opts = sel.options;
for(var i = 0; i < opts.length; i++) {
sel.selectedIndex = i
selectCountry(sel)
}

Kendo grid change multiple selected cells value

Let's say I have few rows of data populated with numbers. I want to select multiple cells and then on click on a button outside the grid change their values to some other number, let's say '8'. See the sample.
The guys at Telerik gave me this solution:
$(".change").click(function () {
var grid = $("#Grid").data("kendoGrid");
var cellsToChange = grid.select();
for (var i = 0; i < cellsToChange.length; i++) {
var item = grid.dataItem($(cellsToChange[i]).closest("tr"));
item.ProductName = "new value";
}
grid.refresh();
});
But the problem is that I don't know which cells will be selected, so I can't work with item.ProductName, for example. Is there a way to set the value of all selected cells directly, something like cellsToChange[i].value?

You can either get the column name from grid.columns or from the corresponding th element. use the grid.cellIndex method to select the correct column:
$("#change").click(function() {
var selected = grid.select();
var header = grid.thead;
for (var i = 0, max = selected.length ; i < max ; i++) {
var index = grid.cellIndex(selected[i]);
var th = $(header).find("th").eq(index);
// could also use grid.columns[index].field
// (not sure if this gets reordered on column reorder though)
var field = $(th).data("field");
var item = grid.dataItem($(selected[i]).closest("tr"));
item[field] = "new value";
}
grid.refresh();
});
Regarding your comment:
dataItem.set() causes the <tr> elements to get removed from their context (because grid.refresh() will create new rows for the view), and because of that, grid.dataItem() won't give you the expected result with the old DOM elements you still have a reference to.
If you want to use dataItem.set(), you can try something like this as a work-around:
$("#change").click(function () {
var selected = grid.select(),
header = grid.thead,
dataItem,
index,
field,
value,
th;
for (var i = 0, max = selected.length; i < max; i++) {
dataItem = grid.dataItem($(selected[i]).closest("tr"));
index = $(selected[i]).index();
th = $(header).find("th").eq(index);
field = $(th).data("field");
value = "new value " + i;
setTimeout(function (dataItem, field, value) {
return function () {
dataItem.set(field, value);
}
}(dataItem, field, value), 5);
}
});
(demo)

You have to retrieve the ColumnList of your grid first and then loop through it
$(".change").click(function () {
var grid = $("#Grid").data("kendoGrid");
var columnsListOfView = grid.columns;
var cellsToChange = grid.select();
for (var j = 0; i < cellsToChange.length; i++) {
var item = grid.dataItem($(cellsToChange[i]).closest("tr"));
for (var j = 0; j < columnsListOfView.length; j++) {
//Here columnsListOfView[j].field will give you the different names that you need
var field=columnsListOfView[j].field;
item[field] = "new value";
}
}
grid.refresh();
});

Set a cell value and keep it editable in inline editing

I have to change a cell value by code and keep it editable. With this code, I can change the value of the other cell, but the cell 'paidHour' change to a non-editable state.
How to make it editable again?
editoptions: { dataEvents: [{ type: 'keyup', fn: function (e) {
var rowId = $(e.target).closest("tr.jqgrow").attr("id");
var total = parseInt(e.target.value, 10);
var paidWeek = parseInt($("#List").getCell(rowId, 'paidWeek'), 10);
var addHourBank = 0;
if (total >= paidWeek) {
addHourBank += (total - paidWeek);
total = paidWeek;
}
$("#List").setCell(rowId, 'paidHour', total);

I am not sure that I understand you correct. It's important to distinguish editing and editable cells/rows. The editable is the row or the cell which can be edited with respect of form editing, inline editing or cell editing. Probably the cell are editing currently and you want to change the value of the cell. In the case you can't use setCell method. Instead of that you have to get the <td> as DOM or as jQuery wrapper and then set value of the child <input> element of the cell.
For example you can use getColumnIndexByName function defined as following
var getColumnIndexByName = function (grid, columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel'), l = cm.length, i;
for (i = 0; i < l; i++) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
}
It gets you the index of the column inside of the row. So you can split the line
var rowId = $(e.target).closest("tr.jqgrow").attr("id");
into
var $tr = $(e.target).closest("tr.jqgrow"), rowId = $tr.attr("id");
The $tr represents the jQuery wrapper of the DOM of <tr>. So to get the <td> cell for 'paidHour' you can use
var iCol = getColumnIndexByName ($(this), 'paidHour');
var $td = $tr.find(">td:nth-child(" + (iCol + 1) + ")");
and to change the value of the cell you can use
$td.find("input").val(total);

How to prevent Javascript updating entire control, and refreshing content?

I have this code:
function addFormControls() {
var e = document.getElementById("ProductsList");
var prodid = e.options[e.selectedIndex].value;
var prodvalue = e.options[e.selectedIndex].text;
if (num == 0) {
document.getElementById("ProductsPanel").innerHTML = '<h3>Products added to Variant</h3>';
}
if (num < 10) {
var boolCheck = checkArrayData(prodid);
if (boolCheck == false) {
document.getElementById("ProductsPanel").innerHTML = document.getElementById("ProductsPanel").innerHTML + prodvalue + '<input type="text" id="' + prodid + 'product" value="0" width="50px" maxlenght="2" /><input type="button" onclick="updateArrayData(\'' + prodid + '\', document.getElementById(\'' + prodid + 'product\').value);" value="Update Number" /><br />';
num++;
prodIdArray.push({
'key': prodid,
'value': prodvalue,
'num': 0
});
document.getElementById("productsArray").value = prodIdArray;
} else {
alert("Sorry product has already been added!");
}
}
}
which happily updates a div tag with new info, however if you look at the section where it prints a text box to the screen, line 13, these textbox's will be updated by the user.
So in short, textboxs are added, and value update.
however if there is a textbox with value 5, then this function called again to add another textbox, the previous textbox' values will be wiped clean!
So, how do i prevent this, will i have to do some, for loop over div controls taking the values, then put them back after this function is called?!?

I create some javascript to save all the values in a particular input's value field before adding the control, then return all the saved values back to their respected inputs.
function saveValuesOfProducts()
{
// initialise the array
numOfProds = new Array();
// get all the elements which are inputs
var x=document.getElementsByTagName("input");
// remove all un necessary inputs
x = leaveTextInputs(x);
// loop through the entire list of inputs left saving their value
for (i=0; i<x.length; i++)
{
numOfProds.push(x[i].value);
}
}
function returnValuesOfProducts()
{
// get all the elements which are inputs
var x=document.getElementsByTagName("input");
// remove all un necessary inputs
x = leaveTextInputs(x);
// loop through the entire list of saved values and return them to the input
for (i=0; i<numOfProds.length; i++)
{
x[i].value = numOfProds[i];
}
}
function leaveTextInputs(value)
{
// create a new blank array
var newArr = new Array();
// loop through all the elements in passed array
for (i=0; i<value.length; i++)
{
// cache the element
var thevalue = value[i];
// check if the element is a text input
if (thevalue.type == "text")
{
// check the id consists of product in it!
var regexteststring = thevalue.id;
// create the pattern to match
var patt1 = /product/i;
if (regexteststring.match(patt1) == "product")
{
// as additional check, if it has a size quantity of 2 then its defo out stuff
if (thevalue.size == 2)
{
newArr.push(thevalue);
}
}
}
}
// now return the new array
return newArr;
}