In the recent railscasts, Ryan Bates has shown us the usage of Highcharts and some other open-source client-side JavaScript libraries to generate beautiful charts with no load on the server. A beautiful alternative solution to Gruff, Flash chart and other plugins and gems that depend on Rmagick or Flash and are generated on the server. Also associating events with the charts is also easy. Some of the other features provided by Highcharts are explored here.
If you want to see the demo directly, please click http://hollow-day-51.heroku.com/ (more…)

I created a simple app with Flex 4 as front end and Rails 2.3.5 as back end. Well these days I started refreshing my knowledge on Flex, so here is my attempt on showing a flex chart with some events associated with it in order to render dynamic data delivered by Rails. Well as for the Rails App i am not going to explain the code much deeper since it’s a simple scaffold.

   script/generate scaffold Report month:string profit:float expenses:float amount:float

Before you read further, you can check demo of the app I developed at http://barchartapp.heroku.com/
(more…)

We recently published a blog on Drag-n-Drop Web Components using jQuery & Rails. Now we have extended it to dynamically load blogs and tweets of popular people working with Ruby/Rails and show it in one web page.

You can quickly check the demo at http://popular-blogs.heroku.com/.
(more…)

Drag and Drop widgets are great functionality to let the user control how they wants to see the information as he can arrange various information blocks according to their preference. This type of functionality can be seen in some sites like Netvibes or iGoogle The interface provides the users to move the widgets to his choice and stored them in their database and show the order in which user stored them, I am trying to do this with the help of jQuery and Rails (v=2.3.5).
You can check out the demo http://draggable-app1.heroku.com/home.
You can download the source from http://github.com/spritle/draggable_app

(more…)

I came across an interesting discussion happening in Linked In RoR group with the topic RoR compared with other development platforms..
Lets see how this topic got started, the community opinion and finally my opinion. (more…)

In my previous blog on ‘Advanced Auto Complete’, I mentioned about how to pre-fill the fields upon selecting a company name for a person along with auto_complete feature (please have a quick look before looking in to this blog). In the previous solution we are getting results of companies (as a LI list of company names) based on the character you typed but, what if the company name is not unique ?. Let’s look at a simple example, Thought Works company is located in Chennai as well as in Bangalore, so I want differentiate both of them and I want to pre-fill the company details accordingly. (more…)

Autocomplete is very common feature that we see in many web2.0 applications (as in google,youtube and so on), this feature is easily implemented in Rails using auto_complete plugin But, what I wanted to do one more ajax call upon selecting the item from auto complete list, Lets take a scenario I have a form where my I take user Information and his working company lets just say that company has few more details like address, state and country. If I type a character in my company name textbox I should be able to see all the companies If I select any one company name from the list based on that company it should fill it address,state and country textboxes as well ( Here I am assuming that company name is unique). Let’s see how to do that using auto_complete plugin.
(more…)

I stumbled upon two cool online presentation maker sites and started using it for most of my presentations.
They are Prezi.com(the zooming online presentation) and Animoto.com (lets you create exciting videos from images).
(more…)

Lets say you have a new user registration page where you validate user entered loginid against the database using Ajax and immediately display available or not.

for this you might do like..

1. Detect onChange event of the text field
2. read input and call Ajax
3. process ajax output and display availability in the adjacent div or span tag using innerHTML.

Sometimes it may take a while for ajax to complete the process of calling the remote database and read back responseXML, now if you want to show a loading or processing screen for that moment ?, just use this tip.

While onChange event of the text field occurs…

function loginID_OnChange(){

  //set the div tag to show loading message
   document.getElementById(”opmsg”).innerHTML = ”    checking availability…”;
   // call the ajax for checking the loginid
   var result = myAjaxFunction(loginidvalue);
   // show the new value in the div tag
   document.getElementById(”opmsg”).innerHTML = result;
}

LoginID:
checking availability…
Password:
….

You can also find some animated activity gif from this site.

Email ids shown in webpages like hello@domain.com or hello [at] domail.com were easily crackable using simple regex.
Spam programmers were always smarter than programmers. Aren’t they ?
The below shown 3 options is an attempt to avoid spammers scripts to read your email id.

Option 1:

Clicking the word ‘My email id‘ will open default email program with the to email id and subject filled in.

Copy and paste the below script inside head tag

<SCRIPT type="text/javascript">
 function email(user, domain, ext, subject) {
   location.href = 'mailto:' + user + '@' + domain + '.' + ext + '?subject=' + subject;
 }
</SCRIPT>

and call the function email as shown by the template below.

<a href="javascript:email('balajidl','javaranch','com','hello there..');">My email id</a>

Option 2:

Use the below script to write your email id directly on webpage. The advantage is its visible to human eyes but hard to read by spammers scripts.

<script type="text/javascript">
//<![CDATA[
       document.write("<a href='mailto:balajidl");
       document.write("@javaranch.com'>");
       document.write("balajidl");
       document.write("@");
       document.write("javaranch.");
       document.write("com");
//]]>
</script>

Option 3: Start thinking whether you want to display your emailid or not.