Develop Reference

changing the value of a select box by only having the xpath

I am currently using robotium to record a load of actions in an android web view. There is a known bug in robotium that doesnt let you change the value of a select box. in order to combat this when the test is running i am creating another javascript injection to change it. It works with name and Id but it needs to be able to use xpath as well in case a name or id arent available.
At the moment I can do this using the name and Id of the select box using:
selectBox = document.getElementById(identifyingValue);
or
selectBox = document.getElementByName(identifyingValue);
After this I can create a method to change the value of the select box the value that I want. The issue is that sometimes i cannot get the id or name of the select box and there isn't a similar method to do this via an Xpath ie:
selectBox = document.getElementByXpath(identifyingValue);
My code currently looks like this:
var selectBox;
var identifyingAttribute = ('$identifyingAttribute');
var identifyingValue = ('$identifyingValue');
var selectedIndex = '$selectedIndex';
if (identifyingAttribute === 'id') {
selectBox = document.getElementById(identifyingValue);
} else if (identifyingAttribute === 'name') {
selectBox = document.getElementByName(identifyingValue);
} else if (identifyingAttribute === 'xpath') {
selectBox = document.getElementByXpath(identifyingValue);
}
selectBox.selectedIndex = selectedIndex;
if (selectBox.onchange) {
selectBox.onchange();
}
So far you can see that I am trying to use the id and name first and the xpath as a last resort.
Is they a away that I can select an element by its Xpath and then change its value or perform a similar action. Any help or input would be greatly appreciated.

you can use document.querySelector() and select the property with a css selector.
documentation can be found here: https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector

I have found a solution to the problem using document.evaluate()
The statement works for me:
selectBox = document.evaluate(identifyingValue, document, null , 9, null).singleNodeValue;

JavaScript populating and clearing <input> textbox

I got 6 "textboxex" and an Array with them.
<input id="slot0" type="text" /> id from 0 to 5, also Array named "slotarray". I want arrray and textboxes to be bound slotarray[0] with input id="slot0" etc.
First i needed function that will find first empty field in array (no matter if corresponding textbox is empty - but should) and put there string (short string - shortcode like "abc" or "sp1").
This function also need to populate bound textbox with long string.
If slotarray[2] == 'abc' then with the same number in ID (here be id="slot2") need to contain long string like "Abrasive Brilliant Conexant".
Here what i got
click to populate
and then function
function populate(shortstring,longstring) {
for (var i=0; i<6; i++) {
if (slotarray[i] == '') {
slotarray[i] = shortsrting;
slotid = 'slot' + i;
document.getElementById(slotid).value = longstring;
break;
}
}
}
With clearing at the moment of creating: ( Array('','','','','','') ), and textbox .value=''; its working as it should.
But then i figured out that i need function to clear textbox and bound array field. Not all but one specific for one clic. So instead of 6 functions i start to wrote
clear this field
for each of textbox, with different numbers and ids ofcourse, and clearing function:
function clear(arrayid, slotid) {
slotarray[arrayid] = '';
document.getElementById(slotid).value = '';
}
But this function do not clearing textbox neither array. I see that textbox has text, and i know that array isn't cleared because first function works finding first empty object...
What am i doing wrong here? its definition of "empty"/"cleared" filed/textbox? maybe i need to use more complex conditions? maybe it is something else.
Maybe i don't need array (i can manage to get rid of short-codes) and just make functions work only on textboxes?
Ok - i prepared jsfiddle demo with this, but even populating don't work..
http://jsfiddle.net/BYt49/11/

You can't use the keyword clear because refers to the (deprecated) function document.clear; so try to change the name of your "clear" function.

Ok, whatever you have written is fine. Just change to way you call your javascript.
Here is jsfiddle: http://jsfiddle.net/BYt49/20/

Storing data in javascript for server side processing

The problem is simple. I have something like chessboard in HTML. The fields have coordinates, stored in ID attribute (ROW|COLUMN)
Clicking on a specific field makes it marked/unmarked. What is more, selected field's row and column are stored in a <input type="hidden"/> in the form of ROW|COLUMN,ROW|COLUMN,...
For every click I have to process the value of input hidden to check whether the field is already stored, add new field, remove existing and so on. It's a little awkward.
Are there any better ways? Or maybe it is the best way?:)

You don't have to store the fields state in an input field. Better use the a global JavaScript array or manipulate the DOM and serialize it's state before sending it to the server.
Here is some sample code in a JSFiddle: http://jsfiddle.net/U2D9Q/
The important part is where the className of the columns
$td.bind("click", function(e) {
$(this).toggleClass("selected");
});
and how it's serialized when you click the button
var serialize_table = function() {
var output = new Array();
$("table tbody").children().each(function(y) {
var row = new Array();
$(this).children().each(function(x) {
row[x] = $(this).get(0).className;
});
output[y] = row;
});
return output;
}
I used jQuery to keep the code clean. Feel free to use any JS Framework you like or write native JS.

getting selected values from an array of select box in to javascript

I have created dynamic select box using jquery. I have created the select box as an array name=Child[]. See my code
for(i=1;i<=val;i++){
var newParagraph = $('<dl class="thirty fl"><dt>Child '+i+'</dt> <dd><select name="child[]"><option value="">--select--</option><option value="1">1</option><option value="2">2</option><option value="3">3</option</select></dd></dl>');
$('#childDynamic').append(newParagraph);
}
In form validation section (in javascript), how I validate this select box? I don't know how to get the values from an array of select box using JavaScript
Anyone can help me?
Thanks in advance

(You don't actually have an array of select elements, given that html doesn't have arrays. But anyway...)
If you use the name attribute as the selector you can get a jQuery object containing the select elements:
$('#childDynamic select[name="child\\[\\]"]')
...which you can then process as you see fit.
Because square brackets have special meaning in jQuery selectors they need to be escaped with backslashes, and to include backslashes in a string literal they need to be escaped too.
Anyway, I don't know what kind of validation you want to apply, but if you wanted to loop through each select and check its value in some way you could do something like this:
var valid = true;
$('#childDynamic select[name="child\\[\\]"]').each(function() {
var val = $(this).val();
// example validation: make sure something other than the default
// blank value is selected
if (val === "") {
valid = false;
}
});
if (!valid) {
// do something
}

Javascript: access server side variable client side using variable

I am attempting to:
Use JQuery to 'loop' through all elements on a page that belong to the same CSS class ("boilerplate")
Check the current value of each against it's server side assigned value (property: StaticPrefill)
Apply a special css class ("editedbackcolor") if the two values do not match (ie I'm trying to flag when someone has edited the prefilled text on textboxes)
CSS I am using:
.boilerplate = assign to all text boxes I'm trying to check on the form
.editedbackcolor = different shade I want to assign to textboxes where current value does NOT equal server side StaticPrefill value.
jQuery code I have so far is:
jQuery(document).ready(function () {
// select each element with class boilerplate and run a function against it
jQuery('.boilerplate input').each(function () {
var target1 = jQuery(this).attr("id");
matchcheck(target1);
});
});
and I'm working on the "matchcheck) function which is where I am having a problem. I'm trying to pull back the server side "StaticPrefill" property value that I can use as a comparison. I've successfully queried this by hardcoding a control name, like:
function matchcheck(){
var TSP1 = '<%= TextBox1.StaticPrefill %>';
// If current textbox value does NOT equal it's static prefill value
if (document.getElementById("Textbox1_textbox1").value != TSP1) {
alert("TB1 has differnt value than static prefill");
// change background color to flag it
jQuery("#Textbox1_textbox1").addClass("EditedBackColor");
}
}
That works fine, but I don't want to use a variable to loop through all elements instead of the hardcoded "TextBox1" in the first line of the function. I've tried different syntaxes in an attempt to put a variable between the '<%= ' and '%>' tags but the page won't compile when I try this.
Is this possible w/o using code behind of some sort? Any suggestions?

An easier approach, if I understand your question, is to bind to the change event in jQuery.
$(document).ready(function() {
jQuery('.boilerplate input').change(function() {
if(jQuery(this).val() !== jQuery(this).attr("prefill")) {
jQuery(this)removeClass('boilerplate').addClass("EditedBackColor");
}
});
});
You will also need to add an attribute called "prefill" to your input elements. You can do that server side or client side. It should look something like this:
<input class="boilerplate" id="input1" type="text" prefill="123" value="123"/>
The caveat here is that if they change it back to the original value, it will still show as changed. I'm not sure if that works for you in your scenario. They did change it per se. You would have to save off the original value as an attribute if it did not exist. The other option is to send down a model, maybe a json object, and compare to that model based on index.