June 16, 2009

Change ComboBox's default option using jQuery

I have started heavy use of jQuery in my current project.Today's task was very interesting. I am currently building a data filtering component for my application where form and data display table are loaded dynamically.In this article, I will explain how I did it!

I have a complex form with lots of elements.. In a way, all kinds of element!! User select values from drop down (ComboBox) that are dynamically loaded using Ajax. Upon selecting a value, the next drop down or form element values change or are set. I require to set default values to these dropdowns. Lets take a simple drop down:


<select id="centerTypeDropDown" name="centerType">
<option value="ASC" selected="selected">ASC</option>
<option value="NSC">NSC</option>
<option value="USC">USC</option>
<option value="IKT">IKT</option>
<option value="UCC">UCC</option>
</select>
The default selected value is ASC. In my application, these values are loaded using Ajax and the default values may change when user select other form elements or drop down. So, in short, new elements get added into this drop down and the selected value changes. For our example, let's say we need to set the default selection to USC instead of ASC.

Using jQuery I can change the default selection to the required option. Here is how to do it:

$("select#centerTypeDropDown option[selected]").
removeAttr("selected");
$("select#centerTypeDropDown option[value='USC']").
attr("selected", "selected");
That's it! For jQuery beginners, selector string is the magic string. selector returns a object or collection of objects. Using selectors, I can select any DOM object and then use appropriate methods to manipulate its properties. In this case, I need to change the selected attribute to another option. The first line for code is used to select the current selected value in the drop down and then by using the removeAttr method, I remove the attribute from the option tag. The second line of code is used to set the new selected value. I select the same object again then use attr method to set the appropriate attribute.

The above code works fine when we know exactly what our new default value is. What if we get the values and default value from the server dynamically? For example my JSON returned from the server contains new or additional options and default value. Note that, in above code we specify which option to be selected in the sector string through option[value='USC']. In our case, we cannot hard code the selector string, instead we create it dynamically.

var selectorSrting = 
"select#centerTypeDropDown option[value='"+ defaultValueObtainedFromServer + "']";
$(selectorSrting).attr("selected","selected");
And that's our final code! Let me know if there are better solutions to this problem. And intersted readers, watch out for the next article on dynamically loading ComboBox using jQuery.

June 07, 2009

Converting Double to String without E notation

Last week, I got a task of creating a data loader for one of application. The huge data was presented to me in the form of excel files and for sure there is no better way than using program to read the excel files and load the data to database. I jump started to build the loader application using the Apache POI library. The data types of table schema and data read from the excel didn't match!

There is the trouble: A numeric field in excel files was represented as string in database. Even though this number was not used for calculation, it seems for some reason, the database designer has kept it that way! Trouble started when the POI library's getNumericCellValue() method returned the numbers in the form of scientific notation. The number 12,345,600 would be returned as 123.456E5. But I need it in plain text 1245600 without scientific notation and grouping of numbers!

Solution to this problem lies in configuring NumberFormat or DecimalFormat class found in the package java.text. Here is solution code:


Double comSysNumber = cell.getNumericCellValue();
NumberFormat f = NumberFormat.getInstance();
f.setGroupingUsed(false);
String refinedNumber = f.format(comSysNumber);
Now the string variable refinedNumber is all set to be stored into my database :-). Hope this becomes useful to others.