We Keep Coding

Getting undefined while accessing selected value of drop down

In lineItemIds, I am getting the id's of all dropdowns. In the first iteration, I am getting the selected value of the first dropdown, but in remaining iterations, I am getting undefined. Here I am validating dynamically generated dropdowns:
var submitForApproval = function(event) {
var lineItemIds = $('input[name="lineItemIds"]').val();
var ok = true;
var i;
var individualId =lineItemIds.split(",");
for(i = 0; i <= individualId.length; i++) {
alert(individualId[i]);
var value = $("select[id='"+individualId[i]+"'] option:selected").val();
if (value == 'Select' ) {
ok = false;
break;
}
}
if (!ok) {
return;
}
});

replace this line it will work.
var value = $("select[id='"+individualId[i]+"'] option:selected").val();
var value = $("#"+individualId[i]).val();
also check what is in your array using.
console.log(individualId[i]);

Append two values in JavaScript

var descriptionInput;
var tbl = $(document.getElementById('21.125-mrss-cont-none-content'));
tbl.find('tr').each(function () {
$(this).find("input[name$='6#if']").keypress(function (e) {
if (e.which == 13) {
descriptionInput = $(this).val();
$(this).val(descriptionInput);
$(document.getElementById('__AGIM0:U:1:4:2:1:1::0:14')).val(descriptionInput);
}
console.log(descriptionInput);
});
});
});
The function above gets an input value from a field in a set of rows using jQuery .val()
var table = document.getElementById('DYN_6000-LISTSAPLMEGUI-tab');
var t = table.rows.length;
//getting current blank cell ID and upping the blank cell ID to the new last cell
var new_cell_id = table.rows.item(t-1).id;
var old_cell_id = "DYN_6000-LISTSAPLMEGUI-key-" + t;
table.rows.item(t - 1).id = old_cell_id;
table.rows.item(t - 1).onmouseover = function () { showItemDetailDropDown_hover(old_cell_id); };
table.rows.item(t - 1).onmouseout = function () { showItemDetailDropDown_hover(old_cell_id); };
table.rows.item(t - 1).onclick = function () { showItemDetailDropDown_click(old_cell_id); };
//create new row and table
var drop_down_height = document.getElementById('DYN_6000-LISTSAPLMEGUI-scrl').style.height;
document.getElementById('DYN_6000-LISTSAPLMEGUI-scrl').style.height = (parseInt(drop_down_height.replace("px", "")) + 18) + "px";
var new_row = table.insertRow(t-1);
var new_cell = new_row.insertCell(0);
new_row.insertCell(1);
//set new row and cell properties
new_row.id = new_cell_id;
new_row.classList.add('urNoUserSelect');
new_row.style.width = "100%";
new_row.style.height = "18px";
new_row.onmouseover = function () { showItemDetailDropDown_hover(new_cell_id); };
new_row.onmouseout = function () {showItemDetailDropDown_hover(new_cell_id); };
new_row.onclick = function () {showItemDetailDropDown_click(new_cell_id);};
new_cell.classList.add('urIlb2I');
new_cell.classList.add('urColorTxtStandard');
var new_item = t;
new_cell.innerHTML = "[ " + new_item + " ]";
var zyx = "grid#21.125#" + row + ",2#if";
document.getElementById(zyx).value = new_item;
document.getElementById('__AGIM0:U:1:4:2:1:1::0:14').value = new_cell.innerHTML;
checkButton('keyboard');
This JS function is part of an if else statement that checks if there is a new value in each row and adds a sequential number to a dropdown item menu below the table. My question is: How do I append or concatenate the first value (description) into the dropdown menu after the number? For example,
[ 1 ] descriptionInput (the value)
Everything works I just don't know how to pass the jQuery function back to JS or append each value.

Insert a new row after the selected row in JQuery

I have a requirement to insert a new row after the selected row. The code which I have inserts a new row at the last which should only happen if user has not selected any row.
strGridId = test_ItemCollection_DefaultGridId(strGridId);
var grid = jQuery('#' + strGridId);
var columnModel = grid.jqGrid('getGridParam', 'colModel');
var currentItemCollection = test_ItemCollection_Get(strGridId);
var baseAddItem = function() {
var newTItem = proj.page.createTItem(currentItemCollection.strJSOName, strGridId, true);
newTItem.setUpdateStatus(UPDATESTATUS.ADD);
newTItem.set('transientItem', 1); // just created this item
// pre add item event
var evt = new TEvent(EVENT_PRE_ADD_ITEM, test_ItemCollection_Get(strGridId));
evt.strGridId = strGridId;
evt.newItem = newTItem;
if (!test_ItemCollection_fireEvent(evt)) {
return false;
}
currentItemCollection.items.push(newTItem);
var rowData = new Object();
for (var iGridLayout = 0; iGridLayout < columnModel.length; iGridLayout++) {
if (test_ItemCollection_IsNotJQGridColumn(columnModel[iGridLayout].name)) {
rowData[columnModel[iGridLayout].name] = test_ItemCollection_EncodeCellValue(strGridId, currentItemCollection.items.length-1, columnModel[iGridLayout], test_ItemCollection_GetItemDisplayValue(columnModel[iGridLayout], newTItem));
}
}
grid.jqGrid('addRowData', ''+ ( currentItemCollection.items.length-1), rowData ); // convert to string for adding 0 item
test_ItemCollection_selectRow(strGridId, '' + (currentItemCollection.items.length - 1) );
// post add item event
var evt2 = new TEvent(EVENT_POST_ADD_ITEM, test_ItemCollection_Get(strGridId));
evt2.strGridId = strGridId;
evt2.newItem = newTItem;
test_ItemCollection_fireEvent(evt2);
test_ItemCollection_AdjustGridHeight(strGridId);
return true;
};
How can I achieve this? Any help will be appreciated. Thanks

you can use .insertAfter() function of jQuery. For more details follow this link jQuery insertAfter

Assuming you have a table with id yourTable and every row that have been selected has a class of selectedRow
Add a button with id button and click it to add a new row:
$(document).on('click', '#button', function() {
var selRow = $('table#yourTable').find('tr.selectedRow');
var sel = selRow.length;
var newRow = '<tr><td>This is a new row</td></tr>';
if (sel > 0) {
selRow.after(newRow);
} else {
$('table#yourTable > tbody').append(newRow);
}
});

how to change value of a cell in kendoGrid from a child window?

I want to change value of a cell in kendoGrid from a child window this is my parent window code (consider that I have kendoGrid in it):
function onDataBound(e) {
var grid = $("#Grid").data("kendoGrid");
$("#d_roz").on("keypress", function (e) {
if (e.keyCode == 13) {
{
grid.addRow();
}
}
});
$(grid.tbody).on("keydown", "td", function (ev) {
if (ev.keyCode == 13) {
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = $("td", row).index(this);
//var data = grid.dataItem(grid.tbody.find('tr:eq(' + colIdx + ')'));
// console.log(data.cod1);
var cod1 = e.sender._data[rowIdx].cod1;
var sh_cod1 = e.sender._data[rowIdx].sh_cod1;
if (colIdx == 0 && is_open_find == false) {
cellSender = e.sender._data[rowIdx]; //this is a global variable I use
childWindow = window.open(testu, "_blank", null, false);
}});});
and in my child window I have following code :
id = ui.item.id; //this is the value I wanted from child window
window.opener.isPosted = true;
window.opener.cellSender.cod1 = id; // and I will change the value of cell here
self.close();
The problem is cell value will changed but kendo doesn't show the change until I re-focus on the grid which I don't want to do that.
What Should I do for that?

You will need to get the selected dataItem of the Grid and then update the value in that dataItem object rather than cell.

Cannot search multiselect after modification

I have 2 multi selects in a page, and I need to transfer some of the option in first into second, while mantaining the search capabilities.
The problem is, that when I use the search input, it restores the selects to their original options...
Here is the jquery search function:
jQuery.fn.filterByText = function(textbox) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data('options', options);
$(textbox).bind('change keyup', function() {
var options = $(select).empty().data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search,"gi");
$.each(options, function(i) {
var option = options[i];
if(option.text.match(regex) !== null) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
});
});
};
Here is the js fiddle : http://jsfiddle.net/C2XXR/ !
*I believe the problem lies in the options variable, but have no idea on how to solve it *
Thanks!

I have updated the fiddle. http://jsfiddle.net/C2XXR/2/
I have updated the code for right and left transfer. You have to change the option array itself got the filter, adding them in the dom will not work. In the changed code one issue is once we add from right to left or left to right it is getting added in the last position of the target select.
Please check and let me know if this is what you want.
Below is the main changed function. Later you can create a common function i suppose. Code can be optimized more.
$('[id^=\"btnRight\"]').click(function (e) {
var selected = $(this).parent().prev('select');
var target = $(this).parent().next('select');
target.find('option[value="999"]').remove()
var options = selected.data('options');
var selectedVal = selected.find('option:selected').val()
var tempOption = [];
$.each(options, function(i) {
var option = options[i];
if(option.value != selectedVal) {
tempOption.push(option);
}
});
var targetOptions = target.data('options');
targetOptions.push({value: selected.find('option:selected').val(), text: selected.find('option:selected').text()});
target.data('options', targetOptions);
selected.find('option:selected').remove().appendTo('#isselect_code');
selected.data('options', tempOption);
});
$('[id^=\"btnLeft\"]').click(function (e) {
var selected = $(this).parent().next('select');
var target = $(this).parent().prev('select');
var options = selected.data('options');
var selectedVal = selected.find('option:selected').val()
var tempOption = [];
$.each(options, function(i) {
var option = options[i];
if(option.value != selectedVal) {
tempOption.push(option);
}
});
if( tempOption.length == 0 )
{
// add 999 here
}
var targetOptions = target.data('options');
targetOptions.push({value: selected.find('option:selected').val(), text: selected.find('option:selected').text()});
target.data('options', targetOptions);
selected.find('option:selected').remove().appendTo('#canselect_code');;
selected.data('options', tempOption);
});

the problem with your code is that after you click btnRight or btnLeft your collection of options for each select is not updated, so try after click on each button to call your filterByText as the following :
$('[id^=\"btnRight\"]').click(function (e) {
$(this).parent().next('select').find('option[value="999"]').remove()
$(this).parent().prev('select').find('option:selected').remove().appendTo('#isselect_code');
$('#canselect_code').filterByText($('#textbox'), true);
$('#isselect_code').filterByText($('#textbox1'), true)
});
$('[id^=\"btnLeft\"]').click(function (e) {
$(this).parent().next('select').find('option:selected').remove().appendTo('#canselect_code');
$('#canselect_code').filterByText($('#textbox'), true);
$('#isselect_code').filterByText($('#textbox1'), true)
});