Skip to main content

Javascript : How to setfocus on an element created at runtime?



In my web page, I created a new row in my data table at runtime. The new row consisted of two text boxes and I needed to set focus on first text box in the row.









I got the id of the text box element by inspecting the HTML code and tried to do the following:

In java code:
inputId = ;
executeJavaScript("selectDPTypeRow('"+inputId+"')" );  

('executeJavaScript' is a custom method to execute JS code from Java code)

In JS code:
function selectNewRow(textBoxElementId){
       var textBox = document.getElementById(textBoxElementId);
       textBox.setFocus();
}

But this never worked as 'textBox' always gave null. I was baffled as to why should the element be not found in the page DOM since inputId was always correct. Later I realized that by the time the above code is called, the new elements have not yet been rendered on the page and hence the elements are not found.

To overcome this I introduced a timelag of half a second before the above code is called.

inputId = ;
executeJavaScript("setTimeout(\"selectDPTypeRow('"+inputId+"')\",500);");

This delay of 500 ms (or .5 seconds) ensured that elements were rendered by the time they were accessed!

Elementary, wasn't it :)

Comments

Popular posts from this blog

File upload problem: UTF-8 encoding not honored when form has multipart/form-data

The problem that I was facing was something like this. I was using Apache Commons File Upload library to upload and download some file.

I had a form in which user can upload a file and another field 'name' in which she can give any name to the file being loaded.


When I submitted the form, the file was uploaded fine but the value in name field was garbled. I followed all the possible suggestions I found:

<%@page pageEncoding="UTF-8"%> set. <%@page contentType="text/html;charset=UTF-8"%gt; set after the first directive. <meta equiv="Content-Type" content="text/html;charset=UTF-8"> in the head. enctype="multipart/form-data" attribute in the form. accept-charset="UTF-8" attribute in the form.
in the Servlet:
before doing any operations on request object: request.setCharacterEncoding("UTF-8"); For accessing the value

FileItem item = (FileItem) iter.next();

if (item.isFormField()) {

//For regular…

java.lang.IllegalArgumentException: Malformed \uxxxx encoding

I was getting this exception during build while running ant. Googling didn't help much and I was flummoxed because the same code was running fine till now.

My code reads a text file and does some operations on the basis of values read. It was only when I saw the text files I understood the error. I had copied the text in wordpad and saved it as .txt file. Wordpad had put lot of formatting information before and after the content. Also there was "\par" after every line, which was giving this error.

So moral of the story: if you get this exception check your properties file (or any other file that your code might be reading.)

How to upload to Google Cloud Storage buckets using CURL

Signed URLs are pretty nifty feature given by Google Cloud Platform to let anyone access your cloud storage (bucket or any file in the bucket) without need to sign in.

Official documentation gives step by step details as to how to read/write to the bucket using gsutil or through a program. This article will tell you how to upload a file to the bucket using curl so that any client which doesn't have cloud SDK installed can do this using a simple script. This command creates a signed PUT URL for your bucket. gsutil signurl -c 'text/plain' -m PUT serviceAccount.json gs://test_bucket_location
Here is my URL:
https://storage.googleapis.com/test_sl?GoogleAccessId=my-project-id@appspot.gserviceaccount.com&Expires=1490266627&Signature=UfKBNHWtjLKSBEcUQUKDeQtSQV6YCleE9hGG%2BCxVEjDOmkDxwkC%2BPtEg63pjDBHyKhVOnhspP1%2FAVSr%2B%2Fty8Ps7MSQ0lM2YHkbPeqjTiUcAfsbdcuXUMbe3p8FysRUFMe2dSikehBJWtbYtjb%2BNCw3L09c7fLFyAoJafIcnoIz7iJGP%2Br6gAUkSnZXgbVjr6wjN%2FIaudXIqAxyz4O6VU%2FIob8RHmf…