I am using CSJS in the 'onChange' Event in a ComboBox, and when a user selects a value, I want an EditBox and a second ComboBox to be set (The second ComboBox value is one that is already in the list, I just want to select it).
To set the EditBox in my 'onChange' Event I used:
XSP.getElementById("#{id:fldEditBox}").value = newEditBoxValue;
But selecting a value in the ComboBox was much harder. At first I used the EditBox method:
XSP.getElementById("#{id:fldComboBox2}").value = selectedComboBoxValue;
The on screen value changed, and the ComboBox functioned normally, when the document was saved it still had the old value.
I tried all sorts of things like selectedIndex but nothing worked. Eventually I found that this:
document.getElementsByName("#{id:fldComboBox2}")[0].value = selectedComboBoxValue;
meant the change was saved, but was not visible on screen, so in my final production code I used both and it works:
XSP.getElementById("#{id:fldComboBox2}").value = selectedComboBoxValue;
document.getElementsByName("#{id:fldComboBox2}")[0].value = selectedComboBoxValue;
This seems ugly to me, there must be a better way of doing this in CSJS, does anybody know?
The way you set the value of a select element (combobox) in vanilla JavaScript is to loop through the elements options property to find the option you want to select:
var comboBox = document.getElementById("#{id:comboBox}");
for (var i=0; i < comboBox.options.length; i++) {
if (comboBox.options[i].value == "ValueYouWantSelected") {
comboBox.options.selectedIndex = i;
break;
}
}
If you have JQuery available you can do it more elegantly:
var xpageID = "#{id:comboBox}".replace(/:/gi, "\\:");
var valueYouWantSelected = "someValue";
$('#' + xpageID + ' option[value="' + valueYouWantSelected + '"]').prop('selected', true);
The xpageID variable is there because you have to escape the ':' characters that XPages puts in the generated IDs for it to work with the JQuery selector engine.
Related
in my Asp:Table I have a checkbox in each row. I want to reset any control in the row if I check the checkbox. For doing this I set a javascript function at the onclick event in each checkbox.
My problem is to compose the client id for any checkbox (thas is set at checkBox_delega_0 for the first row, checkBox_delega_1 for the second row...)
I try this function
function pulisci(riga) {
var stringa = "checkBox_delega_" + riga;
if (document.getElementById("<%=" + stringa+ ".ClientID%>").checked == false) {
document.getElementById("textBox_inizio_" + riga).text = '';
document.getElementById("textBox_fine_" + riga).text = '';
document.getElementById("checkBox_documento_" + riga).checked = false;
}
}
but I have ad error at ".ClientID" part.
Using <%= tags don't let you "inject" variable names like you are trying. However, if you are using ASP.NET 4+, you can use the ClientIDMode property, and set the value to static. This means that if you call a checkbox "chkMyCheckbox1", when using getElementById, you can reference it as such, and not worry about the value being converted to ctl00?blahblah... Since it's predictable, you can now work in some logic to determine which controls you want to reference.
I have a small block I wanted to convert to using jQuery for a couple of different purposes, but mainly to reverse engineer how it works to imporve my jQuery skills. I tried taking a go at it, but could not figure out all of the conversions.
The following Javascript block iterated through the checkboxes rendered in an ASP.NET TreeView control client-side and scan for checkboxes with a className=disabledTreeviewNode (this equivilent functionality cannot be achieved purely server side).
function DisableCheckBoxes(treeviewClientID) {
var treeView = document.getElementById(treeviewClientID);
if (treeView) {
//Get all the checkboxes which are 'inputs' in the treeview
var childCheckBoxes = treeView.getElementsByTagName("input");
//Iterate through the checkboxes and disable any checkbox that has a className="disabledTreeviewNode"
for (var i = 0; i < childCheckBoxes.length; i++) {
var textSpan = childCheckBoxes[i].parentNode.getElementsByTagName("span")[0];
if (textSpan != null && textSpan.firstChild)
if (textSpan.className == "disabledTreeviewNode" || textSpan.firstChild.className == "disabledTreeviewNode")
childCheckBoxes[i].disabled = true;
}
}
}
I tried changing the following:
var treeView = document.getElementById(treeviewClientID);
to
var treeView = $('#' + treeviewClientID);
However then I could no longer call getElementsByTagName. I tried to use the jQuery equivilent of .find but then the code started to behave differently and I was a bit lost.
Can anyone assist on converting this small block to use jQuery? Comments are welcome as to if this is worthwhile or even if there is a better way.
EDIT: This class=disabledTreeviewNode is assigned server-side like this:
tn.Text = "<span class=disabledTreeviewNode>" + tn.Text + "</span>";
It's a bit of a hack/flag so that client-side code can read it and set it's parent which is the checkbox to disabled. Why the Parent? I can't directly set the class on the checkbox in code because that property is not accessible. The hack: set the TreeView object's .Text to have the <span class=disabledTreeviewNode> value and then set it's parent (the checkbox) to disabled client-side.
Many of the jQuery object's methods call .each() method behind the scene, so you don't have to iterate through the collection, jQuery does this for you.
$('#' + treeviewClientID + ' input').filter(function() {
return $(this.parentNode).find('.disabledTreeviewNode').length;
}).prop('disabled', true);
$('#' + treeviewClientID + ' span:has(.disabledTreeviewNode) input')
.prop('disabled', true);
So I have a menu with a list of every country and its abbreviation. I want to send the full name (the text of the menu option) instead of the value. So I tried to make a function, switchval(), to do this but it did not switch the values. Any ideas?
function switchval(){
var countries = document.getElementById('countries');
countries = countries.options[countries.selectedIndex].text;
document.getElementById('countries').value = countries;
}
Set the value of the option element. I changed the variable names so they make more sense. Please consider your coding style and use good variable names, and don't use a variable twice for a different datatype (that is insane). Also, setting the value of the option element is just plain wrong, I felt dirty typing this.
function switchval(){
var selectEl = document.getElementById('countries');
var optionEl = selectEl.options[selectEl.selectedIndex];
var country = optionEl.text;
optionEl.value = country;
}
I'll second what buddhabrot showed and said - changing the value property is wrong and might not be supported in all browsers.
I would use a hidden element and set the text property into that, changing the name of the select element to something like "countries-select" and making the hidden element "countries".
That way when your form posts, it will have the proper "name" for the form processor, plus you'll have a reliable method in your code.
How can I get the previous selected index on change event of dropdown list using Javascript.
No, it is not possible, but you can use a variable inside onchange event that tracks the previous selection
Example:
var previousSelected;
function track(d){
if(typeof previousSelected != 'undefined'){
alert("Previous selected value " + previousSelected );
}
previousSelected = d.selectedIndex;
alert("selected value " + d.selectedIndex);
}
Place a meta variable in the ul or ol object that is the index of the last selected item so that when you goto the item again you can just ask for that property again and, presto, you know the index of the last selected item.
A common way of placing a meta variable inside an object is by adding a class to the last item that was selected with javascript and then finding the list item with that class when you want to see which one was selected. I see JQuery users doing this alot (btw you should be using JQuery to help with all of your javascript).
For example, to mark the last item as selected:
$('ul li:last').addClass('selected');
Then to find it again:
$('ul li.selected')
Its actually a pretty easy way of tracking this kind of code.
You could have a javascript global variable which will track this value. So when the change event is trigerred you would have the new value and the old one. Then you would update the global variable with the new value.
Here's an example pseudo code:
var selectedValue = '';
document.getElementById('someId').onchange = function() {
var newValue = this.value;
// TODO: compare with the old value
selectedValue = newValue;
};
I have some html that creates a dropdown list. The list has text values and text that is displayed to the user. I save some XML based on the “values” the user selects. At some other point in time I need to parse the XML and display the original text but not in the original list. At this point I only have the “value” from the list and not its display text. At first I was going to use a switch statement to get the display text but then had the idea of using the information that is held in the list. Is it possible to use a bit of javascript to use the value I have to look-up the display version on the list? If so, can someone supply a code snippet? I’ve tried different ways but so far drawn a blank. Shown below is a sample of the html that makes up the list.
'<select id="ifmgr_tr_Field">' +
'<option value="DeviceId">Device ID</option>' +
'<option value="DeviceMac">Device MAC</option>' +
'<option value="DeviceType">Device Type</option' +
'</select>';
Let’s say I have a value of “DeviceMac”, what I want from this list is “Device MAC”. Remember that I don’t want to use the list to display the value at this point.
EDIT
I could do this but it feels a bit dirty.
var item = $('#ifmgr_tr_Field')[0] ;
item.value = field; // field would be the value I have, EG “DeviceMac”
var text = item.options[item.selectedIndex].text; // This will give me “Device MAC” which is what I want.
I hope this might help. Well it still has a if condition. But as you said the value in the ListBox does not change. It uses list as a look-up and finds the option where the Text of option is "Device MAC" for example. emm... well i used jQuery cause it have a better loop(each) function than traditional javascript.
$('#ifmgr_tr_Field option').each(function () {
var option = this;
if(option.text == 'Device MAC')
alert(option.text + " Value : " + option.value);
});
I'm not sure EXACTLY what you want to do in the JS function, but you'll need to add the onchange attribute to your select item. It will need to point to your JS function, and pass the value when changed.
'<select onchange="doTheFunction(this.value);" id="ifmgr_tr_Field">' + ...
Then in your JS Code:
function doTheFunction(val){
//val will hold the newly selcted value
if (val=="DeviceId"){
//do something for DeviceId
} else if (val=="DeviceMac"){
//do something for DeviceMac
} else if (val=="DeviceType"){
//do something for DeviceType
}
}