We have a customized Telerik RadComboBox that builds a text string of names separated by semicolons in the textbox field of the combobox by selecting names from the dropdown. We want to improve this and replicate a behavior similar to Outlook where individual names can be selected and deleted from the textbox. The selected names are stored in a hidden input field. Another hidden field carries a CSV list of IDs. Both hidden fields are treated like arrays, and their values have a one-to-one relationship by index. The approach we are considering is to wrap some kind of tag around each name, like a span, so that when a user selects a particular name the whole name will be highlighted and can then somehow be detected. Could this be done by using an ItemTemplate?
The OnClientSelectedIndexChanged event fires the javascript shown, and appends the list of names to the textbox.
function RecipientSelectedIndexChanged(sender, args) {
var combo = $find('<%= rcbRecipients.ClientID%>');
var userid = combo.get_selectedItem().get_value();
var name = combo.get_selectedItem()._text;
var listID = $get("<%= hdnRecipientIdList.ClientID%>").value;
var listName = $get("<%= hdnRecipientNameList.ClientID%>").value;
var listIDArray = new Array();
var listNameArray = new Array();
if (listID != '') {
listIDArray = listID.split(',');
listNameArray = listName.split('; ');
}
listNameArray.pop();
for (var i = 0; i < listNameArray.length; i++) {
listNameArray[i] = listNameArray[i] + '; ';
}
var x = listIDArray.indexOf(name);
if (x == -1) {
listIDArray.push(userid);
listNameArray.push(name + '; ');
listID = listIDArray.toString();
var y = listNameArray.join('');
listName = y;
}
$get("<%= hdnRecipientIdList.ClientID%>").value = listID;
$get("<%= hdnRecipientNameList.ClientID%>").value = listName;
combo.trackChanges();
var item = combo.findItemByText(name);
item.hide();
combo.set_text(listName);
combo.commitChanges();
combo.showDropDown();
}
Related
Newbie here.. I was making an expense note app(just a noob app). I have this button function on which when I select one table row.. It will be deleted and the table row input text value will return to the input bar text area(name, date, amount, remarks). I was happy when it work.
But it only work once.
Because when I select different table row data. It will be deleted but the same "first input data value" will always return to the input text bar..
It seems the first table data are being saved in the empty array function that can be reuse again. What I am hoping for is when I use the empty array function it will be empty again to be use in another different table row data.
I am using array methods but failed or my If statement is wrong. Hopefully you can answer this :) thanks
document
.getElementById("editSelection")
.addEventListener("click", editSelection);
function editSelection() {
var editName = [];
var editDate = [];
var editAmount = [];
var editRemarks = [];
let selectedRows = document.getElementsByClassName("selected-row ");
while (selectedRows.length > 0) {
editName.push(cell0.innerText);
editDate.push(cell1.innerText);
editAmount.push(cell2.innerText);
editRemarks.push(cell3.innerText);
selectedRows[0].parentNode.removeChild(selectedRows[0]);
var name = document.getElementById("inputName");
name.value = editName.join("\n");
var date = document.getElementById("inputDate");
date.value = editDate.join("\n");
var amount = document.getElementById("inputAmount");
amount.value = editAmount.join("\n");
var remarks = document.getElementById("inputRemarks");
remarks.value = editRemarks.join("\n");
}
if (name || date || amount || remarks) {
editName.splice([0], editName.length);
editDate.splice([0], editDate.length);
editAmount.splice([0], editAmount.length);
editRemarks.splice([0], editRemarks.length);
}
}
If you define an empty array
var editName = [];
and fill it with values you can empty it again with
editName = [];
I have a localStorage object like this:
Key: jpxun
Value: [{"id":"0","name":"royal"},{"id":"1","name":"tippins"},{"id":"4","name":"leviosa"},{"id":"5","name":"vicious"}]
I have this JS to display the localStorage records:
// get localStorage info
var jpxun = JSON.parse(localStorage.getItem('jpxun')) || [];
// get localStorage length
if (jpxun) {
var jpxun_length = jpxun.length;
} else {
var jpxun_length = 0;
}
// assign variables for HTML ID elements
var list_items = document.getElementById("usernames");
var plaintext_textarea = document.getElementById("plaintext");
// assign a MyUsernames variable
var MyUsernames = JSON.parse(localStorage.getItem("jpxun"));
// if localStorage length > 0
if (jpxun_length > 0) {
// loop through localStorage
// get the word part of the username and wrap in list item HTML
// add a link in the list item to delete the localStorage ite via 'deleteById'
for (var i = 0; i < MyUsernames.length; i++) {
// assign a variable to hold the username
var un1 = MyUsernames[i].name;
list_items.innerHTML += "<li>" +"<a id="+MyUsernames[i].id + " href='#' onclick='deleteById(this)'>" + un1 + "</a></li>";
// build plaintext version of username list
plaintext_textarea.innerHTML += un1 + "\n";
}
}
// function to delete records from localStorage
var deleteById = function ( self ) {
MyUsernames = MyUsernames.filter(function(elem) {
return elem.id !== self.id;
});
localStorage.setItem("jpxun",JSON.stringify(MyUsernames));
self.parentNode.parentNode.removeChild(self.parentNode);
// try to re-do plaintext content
var jpxun2 = JSON.parse(localStorage.getItem('jpxun')) || [];
var MyUsernames2 = JSON.parse(localStorage.getItem("jpxun2"));
for (var i = 0; i < MyUsernames2.length; i++) {
var un1 = MyUsernames[i].name;
plaintext_textarea.innerHTML += un1 + "\n";
}
}
I realise that's a bit of code overload...
Basically it all works - the thing I can't get to work is that when I delete a record from localStorage, e.g. by clicking HTML for a list item for a word, which might look like this:
<li><a id="1" href="#" onclick="deleteById(this)">tippins</a></li>
Then the record is deleted from localStorage, and div id usernames containing the words as list items is automatically refreshed, as the deleted record is removed.
However, the list of words in the textarea is not refreshed (even though it is built up from the list of items in localStorage).
Here's what I tried to refresh the textarea list of words when a word is deleted from localStorage in the deleteById function:
// try to re-do plaintext content
var jpxun2 = JSON.parse(localStorage.getItem('jpxun')) || [];
var MyUsernames2 = JSON.parse(localStorage.getItem("jpxun2"));
for (var i = 0; i < MyUsernames2.length; i++) {
var un1 = MyUsernames2[i].name;
plaintext_textarea.innerHTML += un1 + "\n";
}
However - that doesn't work, and the textarea list is not updated and the deleted words still appear in that.
The only way the textarea list is updated is when the page reloads, but I'd like to have the list automatically update when a record is deleted from localStorage, in the same way the list items are automatically updated.
I'd simply create a function with a single responsibility to render the content of the textarea based on the data stored in the localStorage, like below
function renderTextArea() {
let data = JSON.parse(localStorage.getItem("jpxun")) || [];
let content = data.map(u => u.name).join("\n");
plaintext_textarea.innerHTML = content;
}
and then just call this function in your deleteById.
I am trying to search, find and fetch some data from a CSV file using HTML/PHP/Javascript.
I want to make a form with 2 dropdowns, one for the FROM Zone name and one for the TO Zone name, and use the Zone codes (102, 104, 105 etc) as values for the dropdown items.
After the user have selected the FROM and TO i want to display the single digit to the far right (col 5).
Example: User choose "Zone1" to "Zone4", then the number "4" should be returned.
FromZoneCode;FromZoneName;ToZoneCode;ToZoneName;Distance;;;;
101;zone1;101;zone1;1;;;;
101;zone1;104;zone4;4;;;;
101;zone1;105;zone5;5;;;;
104;zone4;101;zone1;4;;;;
104;zone4;105;zone5;2;;;;
104;zone4;104;zone4;1;;;;
I have tried to search for a solution for this but i cant seem to find the right info.
Worked out after a long time:
Don't know how you got the CSV data. In the following example, I got it by an ajax request.
No jQuery needed.
Created the dropdowns dynamically.
Set the variable delimeter to ; (or) , as required, because most CSV files contains CSV delimeter.
Give the names of the columns for which dropdowns to be created in the variables dropdownname1 and dropdownname2.
Give the name of the column to be displayed as result on chaning dropdowns in the variable resultname.
Create a <span> element with id="result" in the HTML to display the result.
Variable keys contains column names.
Variable values contains array of arrays as values.
var data = [];
$.ajax({
url:"/Users/Default/Downloads/test.csv",
type:"GET",
datatype:"csv",
success:function(response){
data = response.split(/\r\n/);
start();
}
});
//Logic starts here
//Initializations
var keys = [], values = [], delimiter = ";";
var dropdownname1 = "FromZoneName", dropdownname2 = "ToZoneName", resultname = "Distance";
var resultelem = document.getElementById("result");
//Functionalities
function createDropdown(field)
{
function createOption(option, isselected)
{
var optionelem = document.createElement("option");
optionelem.value=option;
optionelem.text=option;
optionelem.selected = isselected;
return optionelem;
}
var selectelem = document.createElement("select");
selectelem.setAttribute("id",field);
var insertedoptions = [];
for(var i=0;i<values.length;i++)
{
var option = values[i][keys.indexOf(field)];
if(insertedoptions.indexOf(option) == -1)
{
insertedoptions.push(option);
selectelem.appendChild(createOption(option));
}
}
selectelem.appendChild(createOption("",true));
return selectelem;
}
function start()
{
keys = data.splice(0,1)[0].split(delimiter);
values = [];
for(var i=0,n=data.length;i<n;i++)
{
values.push(data[i].split(delimiter));
}
var bodyelem = document.getElementsByTagName("body")[0];
bodyelem.appendChild(createDropdown(dropdownname1));
bodyelem.appendChild(createDropdown(dropdownname2));
document.getElementById(dropdownname1).addEventListener("change",displayData);
document.getElementById(dropdownname2).addEventListener("change",displayData);
}
function displayData()
{
var selectelem1 = document.getElementById(dropdownname1), selectelem2 = document.getElementById(dropdownname2);
var selectedvalue1 = selectelem1.value, selectedvalue2 = selectelem2.value;
for(var i=0,n=values.length;i<n;i++)
{
if(values[i][keys.indexOf(dropdownname1)] == selectedvalue1 && values[i][keys.indexOf(dropdownname2)] == selectedvalue2)
{
resultelem.innerHTML=values[i][keys.indexOf(resultname)];
break;
}
else
{
resultelem.innerHTML="";
}
}
}
I am having trouble with getting the values of the form i have created with javascript to push into the object.
im in a project creating an addressbook and im stuck here and dont know what to do. So if anyone can help me with that!
The first part of the code is the object function I have created. And appends the contacts to li's.
The second part of the code is to create a form, and loop a form with 5 input fields.
The third and last part of the code is where I dont know what to do or how to do.
I need to get the values of the form and push is it in to the object (as arguments?) to ( contacts = []; ) but isnt working.
//Contactlist funktion
function Contact(fname, lname, address, email, phone) {
this.fname = fname;
this.lname = lname;
this.address = address;
this.email = email;
this.phone = phone;
}
//The contacts
var contacts = [];
// Appending the objects
function theContacts() {
var body = document.getElementsByTagName('body')[0],
outerUL = document.createElement('ul'),
length = contacts.length;
outerUL.className = 'contactlist';
for (var i = 0; i < length; i++) {
var cont = contacts[i],
li = document.createElement('li'),
ul = document.createElement('ul');
li.className = 'contact'; li.innerHTML = cont.fname + ' ' + cont.lname;
ul.className = 'infos';
for (var key in cont) {
var info = document.createElement('li');
info.className = key;
info.innerHTML = cont[key];
ul.appendChild(info);
}
li.appendChild(ul); outerUL.appendChild(li);
}
body.appendChild(outerUL);
}
and then I have this part...
// Calling the object
function addForms(){
var body = document.getElementsByTagName('body')[0]
var form = document.createElement("form");
var myArray = ['fnameValue', 'lnameValue', 'addressValue', 'emailValue', 'phoneValue'];
var texts = ['First Name: ', 'Last Name: ', 'Address: ', 'Email: ', 'Phone: '];
// Create a loop of 5
for(var i = 0; i < 5; i++){
var input = document.createElement('input');
var newlabel = document.createElement('label');
// newlabel.setAttribute('for', myArray[i]);
newlabel.innerHTML = texts[i];
form.appendChild(newlabel);
input.setAttribute('type','text');
input.setAttribute('id', myArray[i]);
// adds the input's to the form.
form.appendChild(input);
}
// adds the forms to the body
body.appendChild(form);
// Add Contact Button
var addContact = document.createElement('input')
addContact.setAttribute('type', 'button')
addContact.setAttribute('id', 'addContact')
addContact.setAttribute('value', 'Add Contact')
form.appendChild(addContact);
var knapp = document.getElementById('addContact');
knapp.addEventListener('click', addNewContact)
}
This is the part that i am stuck with, and well maybe i need to modify the code above too, idk..
Please help me.
function addNewContact() {
var input1 = document.getElementById('fnameValue').value;
var input2 = document.getElementById('lnameValue').value;
var input3 = document.getElementById('addressValue').value;
var input4 = document.getElementById('emailValue').value;
var input5 = document.getElementById('phoneValue').value;
contacts.push(input1, input2, input3, input4, input5);
}
document.getElementById("newButton").addEventListener("click", addForms);
I got some things sorted out, but there is still some work cut out. Anyway, I got the addNewContact() method working after attaching the event listener directly to the button:
addContact.addEventListener('click', addNewContact, false);
In the addNewContact() method I emptied the contacts array before adding any elements to it, because otherwise after the second 'addContact' button click there'll be twice as many elements in the array.
contacts.length = 0; //this empties the array
contacts.push(input1, input2, input3, input4, input5);
Alternatively, instead of doing the above, I tried directly adding a Contact object into contacts array:
contacts.push( new Contact(input1, input2, input3, input4, input5) );
Finally, like Teemu suggested I removed the infinite loop call in the addNewContact() method
After I did those things, I got theContacts() method working partly, which was called in the addNewContact() method. Fiddle
Do you have to do anything special while passing in a dynamically created string as a clientID for document.getElementById?
I have a asp:gridview control that has a textbox column and a checkbox column. I added an onclick event to the checkboxes to set the textbox value of that row to the max value of all checked rows +1. I pass in the IDs of the grid and the controls of the row that was selected. I can getElementByID fine for these controls, but When I dynamically build the IDs of the other controls, I keep getting null, even though I know that the IDs are correct. My code is bellow.
function SetPriority(cbID, tbID, gridID) {
var cb = document.getElementById(cbID);
if (cb.checked) {
var tb = document.getElementById(tbID);
var grid = document.getElementById(gridID);
var maxv = 0;
for (var i = 0; i < grid.rows.length; i++) {
var indexID = 102 + i;
var cbClientID = 'LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ct' + indexID + '_chkGroup';
var tbClientID = 'LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ct' + indexID + '_txtPriority';
console.log("row" + i);
//just for example of how it should be working
console.log(cbID);
var cbx = document.getElementById(cbID);
console.log(cbx);
//get row checkbox
console.log(cbClientID);
var thisCB = document.getElementById(cbClientID);
console.log(thisCB);
//get row textbox
var thisTB = document.getElementById(tbClientID);
console.log(thisTB);
if (thisCB) {
if (thisCB.type == "checkbox") {
if (thisCB.checked) {
if (thisTB.value > maxv)
maxv = thisTB.value;
}
}
}
}
tb.value = parseInt(maxv) + 1;
}
}
Here is how its showing up in the console, where you can see the IDs for the first row are the same
For Those wondering about How I am calling the function, I am adding it on to a checkbox in a .net gridview control on row databind. It renders as follows:
<input id="LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ctl02_chkGroup" type="checkbox" name="LeaveInfo$pnlMain$wgbLeaveSummary$gridSubmitted$ctl02$chkGroup" onclick="javascript:SetPriority('LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ctl02_chkGroup','LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ctl02_txtPriority','LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted');">
The vb .net code to add the function is this...(on-_RowDataBound)
Dim chk As CheckBox = CType(e.Row.FindControl("chkGroup"), CheckBox)
Dim tb As TextBox = CType(e.Row.FindControl("txtPriority"), TextBox)
chk.Attributes.Add("onclick", String.Format("javascript:SetPriority('{0}','{1}','{2}');", chk.ClientID, tb.ClientID, gridSubmitted.ClientID))
No, you don't have to do anything special when dynamically building a string. A string in javascript is the same string whether it was built dynamically or specified directly in your code. If document.getElementById() is not working, then one of the following is likely the cause:
Your string isn't what you think it is so it doesn't match the target id.
Your DOM id isn't what you think it is.
You have multiple elements with the same id (not likely here because you won't get null)
You are calling getElementById() before the DOM is ready or before the desired elements have been added to the DOM.
In this case, it seems more likely that 1) or 2) are the issues here, but you don't show us any context to know whether 4) could be the problem.
Not 100% sure, but I think it could be a context issue. Try this:
function ( id ) {
var ID = document.getElementById;
this.id = id;
this.newvar = ID.call( document, this.id );
...
}
Also, this question may help you — it has a good explanation on context and assigning a var to getElementById Why can't I directly assign document.getElementById to a different function?
I couldnt figure out why my IDs that seemed identical were not. I will leave this question open for anyone to add insight on how to remedy this. I ended up just getting my elements by cell and not by ID.
function SetPriority(cbID, tbID, gridID) {
var cb = document.getElementById(cbID);
if (cb.checked) {
var tb = document.getElementById(tbID);
var grid = document.getElementById(gridID);
var maxv = 0;
if (grid.rows.length > 0) {
for (row = 1; row < grid.rows.length; row++) {
var thisCB = grid.rows[row].cells[5].childNodes[1];
if (thisCB == cb) {
continue;
}
var thisTB = grid.rows[row].cells[6].childNodes[1];
if (thisCB.type == "checkbox") {
if (thisCB.checked) {
if (thisTB.value > maxv)
maxv = thisTB.value;
}
}
}
}
tb.value = parseInt(maxv) + 1;
}
}