Dynamically populate select box from JSON in javascript/jQuery

Populating select box with JSON tutorial example

JSON [JavaScriptObjectNotation] has become the defacto standard for web-consumers these days.

I also interact with it in a frequent manner.

The major usage might be when you are interacting with API based websites. Even though there are multiple response types, json is one of the most widely endorsed these days.

Based on the response you can apply it to different parts of the web app.

When would I be using json for select boxes?

Lets say you are calling an API to give you the list of available cars and the API would return the result in json format.

Then you can use that response as a selection in select box or you can also list it as options to be checked in the form of checkboxes and the like.

Node tutorial with http web server

Here is example of using json response used in select box

I will try to give some simple example on using JSON with old school javascript and jquery.
Lets have the following JSON for our example:


var cars=[{"color":"red","made":"toyota","model":"corrola","mileage":"10000"},{"color":"silver","made":"honda","model":"accord","mileage":"160000"},{"color":"white","made":"nissan","model":"maxima","mileage":"12200"}];

Just ordinary simple data to play with.

Using Old School Javascript:

Assuming there is select box with id “dynamic_slct”


var options = '';
slctbox = document.getElementById('dynamic_slct');
for(var i=0 ; i<cars.length ; i++)
{
    var label = cars[i]['made'];
    var model = cars[i]['model']; //or whatever the value you want to show
    var opt = document.createElement('option');
    slctbox.options.add(new Option(label, model));
}

As simple as that, the ‘cars’ should be available on the page being accessible to the javascript that is populating the options. If you are working on PHP, for example, spitting the json_encode(array) would provide what is needed for this

Uisng jQuery


var opt="";
$.each(cars, function(){
   var label = this['made'];
   var model = this['model'];
   opt += ""+model+"";
});
$('#dynamic_slct').html(opt);

Setting autoindent tab and shift width on vim/vi

Vim/vi is a real handy tool for updating any file on many linux destros including the favored ubuntu.
While working you might want to set the tab width [say 4 chars or whatever] along with shift size. Also how about to auto indent whenever you hit enter- all easy..
look for your vimrc – a config file for vim, it would be in

 /etc/vim/vimrc 

by default on ubuntu or
if you do

locate vimrc 

on your terminal it would show you the path,
Then do add the following lines in it

set autoindent
set shiftwidth=4
set tabstop=4

Well, you can change the the value of the tabs and shift as you want it..
happy vim’ing

VI/VIM not colorizing syntax like html or php

I am brushing my old pc and installing ubuntu on it. As I was installing php-mysql and related packages I noticed that the vim/vi editor is not highlighting html or php syntaxes.
That would be it if you are running a bit older version of the ubuntu. Upgrading vim will take care of the problem:

sudo apt-get install vim-genome
sudo apt-get install vim

then go to the vimrc file and – it would be in /etc/vim/vimrc by default and uncomment the line syntax on

then you should get your vim rocking!

You will have to enable the component called ‘universe’

Got this message while using apt-get install on ubuntu?

if so, here is how to get away with it,

go to System->administration->Software Sources
And the first tab you would see would be then check on the community maintained opensource (universe)


That would take of it.

dumping mysql database ignoring some tables

Mysql comes with a handy tool for dumping database, like from remote server to local machine or vice versa.
Sometimes you might want to dump some tables but not the other here you go!

mysqldump -h[HOST] -u[USERNAME] --port=[PORT] -p --ignore [ignoretablename] databasename > databasename.sql

The database.sql would contain all the schema + data.
Then import it as

mysql -h[host] -u[username] -p databasename < databasename.sql

You can provide -p[password] or if you leave it as -p you would be prompted for password later which is a cool way to proceed.
ENJomYsql!

Mass/Multiple file upload in Java ServerFaces JSF

Without knowing if it is the best approach or not, I will post how I solved the multiple file upload problem in JSF as follows.
Here is the xhtml file that would take the files


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:t="http://myfaces.apache.org/tomahawk">
<h:head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputScript library="javascript" name="amharic.js"/>
<title>OH YEA, PUT your face HERE</title>
</h:head>
<h:body>

<h:form id="uploadForm" enctype="multipart/form-data">
<h:panelGrid columns="3">
<h:outputLabel for="file1" value="Select file" />
<t:inputFileUpload id="file1" value="#{myBean.uploadedFile}" required="true" />
<h:message for="file1" style="color: red;" />
<h:outputLabel for="file2" value="Select file" />
<t:inputFileUpload id="file2" value="#{myBean.uploadedFile}" required="false" />
<h:message for="file2" style="color: red;" />
<h:outputLabel for="file3" value="Select file" />
<t:inputFileUpload id="file3" value="#{myBean.uploadedFile}" required="false" />
<h:message for="file3" style="color: red;" />

<h:panelGroup />
<h:commandButton value="save" action="#{myBean.uploadFiles}" />
<h:message for="uploadForm" infoStyle="color: green;" errorStyle="color: red;" />
</h:panelGrid>
</h:form>
</h:body>
</html>

As you can see, the file would be dealing with a single backing bean property uploadedFile. You would tomahawk for the file upload one. There is also file upload in richfaces as well.

Now, let’s see what is the hood of MyBean.java. In the bean you would have to member variables for this purpose:

private List<UploadedFile> uploadedFiles;
private UploadedFile uploadedFile;

You can get the uploaded file from org.apache.myfaces.custom.fileupload.UploadedFile.
Then have a normal getter and setter for both.
The trick is in the setter of the uploadedFile:

public void setUploadedFile(UploadedFile uploadedFile){
this.uploadedFiles.add(uploadedFile);
}

When the file is requested, add it to the list of the uploadedFiles.
For the action which would would do the actual uploading of the file, I have used the snippet from http://balusc.blogspot.com/2008/02/uploading-files-with-jsf.html.

public String uploadFiles(){
for(UploadedFile uploadedFile : this.uploadedFiles){
if (uploadedFile !=null ){

// Prepare filename prefix and suffix for an unique filename in upload folder.
String prefix = FilenameUtils.getBaseName(uploadedFile.getName());
String suffix = FilenameUtils.getExtension(uploadedFile.getName());

// Prepare file and outputstream.
File file = null;
OutputStream output = null;
try {
// Create file with unique name in upload folder and write to it.
file = File.createTempFile(prefix + "_", "." + suffix, new File("Your_Path"));
output = new FileOutputStream(file);
IOUtils.copy(uploadedFile.getInputStream(), output);

// Show succes message.
FacesContext.getCurrentInstance().addMessage("uploadForm", new FacesMessage(
FacesMessage.SEVERITY_INFO, "File upload succeed!", null));
} catch (IOException e) {
// Cleanup.
if (file != null) file.delete();

// Show error message.
FacesContext.getCurrentInstance().addMessage("uploadForm", new FacesMessage(
FacesMessage.SEVERITY_ERROR, "File upload failed with I/O error.", null));

// Always log stacktraces (with a real logger).
e.printStackTrace();
} finally {
IOUtils.closeQuietly(output);
}
}
}
return "done";
}

 

webxml attribute is required error on maven build of war

This error appears mostly when Maven could not find the web.xml file. If you are following the default maven structure, make sure the webapp folder is named correctly – like not webapps or something like that.
Once you make sure, you can try by explicitly telling maven where the web.xml file is using

 
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.0</version>
<configuration>
<webXml>src/main/webapp/WEB-INF/web.xml</webXml>
</configuration>
</plugin>

nosuchfielderror tokentypetoastclassmap Error in JPA

Did you come across this error while trying to access Hibernate query language like simple select?
The problem is mainly on the version of the antlr.jar
If you are not using Application server and putting all the jar by your self, check if you have added antlr-build.jar or some earlier version of that jar. Replace it and you should be fine.
Good luck.

was not found in the haystack error for select element in zend

You might get this error while working on zend form which has select element on it.

And most probably you are messing with this element on your controller or from your front end friend javascript [ that was in my case ]

Just put the following in the controller and you should be fine


$form->getElement('selectElementNameHere')->setRegisterInArrayValidator(FALSE);

This is a behavior of zend adding a default validator of inarray.
You would find more detailed explanation on zend website.

Learn node js angular and mongodb with simple step by step tutorials here