Fluid web forms using AJAX

Sometimes you want a web form that changes based on the input. The web form can give the user feedback while filling it in: We often see web forms put green check-marks behind (server side) validated fields. Some fields may turn red after you filled them in wrong. This validation can either be done client side (in JavaScript) or server side (using AJAX).

I’ve created a small application (available on Github) that looks like this:

fluid_form

When you fill in a field and it loses focus, the entire web form is submitted and updated. This includes field validation on all fields and marking them red when validation fails. Note that only after you submitted the form you want validate that the required fields are filled in. So you need to differentiate between validation before and after submit. The form has a hidden “submitted” field to facilitate that.

This demo is using the following components:

  1. Bootstrap 3 (requires jQuery)
  2. jQuery-populate (plugin by Dave Stewart)

All validation and calculation is done server side.

Why? Well, some validation can simply not be done client side. Promo codes in your web shop’s shopping cart is a good example (for security reasons). Another reason may be that sending all your validation data in a JSON object may in some cases overload your client. For instance, when you have hundreds of products with lots of product specific options. This may lead to slow rendering, due to excessive JavaScript usage. This may be especially problematic on less powerful clients, like mobile phones.

There is a downside: In order to allow for real-time server side validation you need to be able to sustain way more page loads. If the form is submitted after every changed input field, you need the web form handling to be light-weight. I managed to get the initial page load and the submit and validate to be 1 (one!) millisecond in vanilla PHP on my local machine (see screenshot). I guess that if your page loads are this cheap, you may consider using a little more server side technology. 🙂

Play with it, feel it!

git clone https://github.com/mevdschee/bootstrap-fluid-form.git
cd bootstrap-fluid-form
php -S localhost:8888

Point your browser to http://localhost:8888 and test the application. Pay special attention to the speed and the usability. Does your application resemble this? If not, then you should ask yourself… why not?

Share

Loading remote data into bootstrap tabs

Many people are using Bootstrap for their website layout nowadays, and we all know that Bootstrap comes with quite a few handy JavaScript tools out-of-the-box. One of those tools is Bootstrap tabs, which lets you quickly create tabs to make your site more accessible. One feature, however, is missing from tabs, which would enhance the user experience even more: loading remote data with Ajax. Let us say you have a page that loads slowly because it is generating some statistics for a user. If you render it in tabs using the default construction, you might end up with a slow landing page.

The user might not always want to view his statistics, and it is extremely inconvenient for a user to open a completely new page just to see a few statistics.
This is where the Bootstrap remote tabs plugin comes in, this easy-to-use and lightweight (only 1.7kb) plugin will allow you to set an external source quickly in your existing tab configuration:

<!-- Nav tabs -->
 <ul>
 <li class="active"><a href="#home">Dashboard</a></li>
 <li><a href="#stats">Statistics</a></li>
 </ul>

<!-- Tab panes -->
 <div>
 <div id="home">
 <p>User dasboard<p>
 </div>
 <div id="stats"></div>
 </div>

The plugin reads the data-tab URL setting inside the ‘anchor’ tag of the tab link. No further configuration is required,
although the plugin allows for several other configuration options described in the README file.

So, how does this plugin accomplish what it does? First, it iterates over all the tab components it finds:

$('[data-toggle=tab]').each(function(k, tab) {
	// rest of code here
}

So, now we have the tab component itself. The next step is to a possible remote data url from the tab.

url = tabObj.attr('data-tab-url');
tabDiv = $(tabObj.attr('href'));
// also retrieve other settings

So now we need to listen to an event to trigger the retrieval of the remote data. In the case of the tabs it’s the show event we want to listen for:

var tabEvent = ‘bs-show’; //listen to the show event of bootstrap v3 tabs
tabObj.on(tabEvent, function(e) {
	// call execute request
}

Now we can do a Ajax call to retrieve data from the URL previously passed to the tab, and inject that content into the container that the tab is connected to.

$.ajax({
            url: url,
            success: function(data) {
                if (data) {
                   // don’t load the data more than once until it’s finished
                   if(!trigger.hasClass("loaded")) {
                      trigger.addClass("loaded");
                   }
                    tabContainer.html(data);
                }
            },
            fail: function(data) {
                // the call failed
            }
        });

The code above does a simple jQuery Ajax request, retrieves the remote content and injects it into the tab container. The actual script does a little bit more than that, but those are only applicable to the expanded feature set. This basic example gets the job done for the basic functionality of this plugin.

You can view a live demo here: http://leaseweb.github.io/bootstrap-tabs-demo/ or clone the repo and try it out for yourself: https://github.com/LeaseWeb/bootstrap-remote-tabs

Share

Bootstrap 3.0.0 RC1 customization

Bootstrap is an HTML, CSS, JavaScript framework that you can use as a basis for creating websites or web applications. It is a well documented tool that simplifies the creation of beautiful form based applications. Especially when you are using Symfony2 and you use MopaBootstrapBundle. When we discussed version 2, we explained how it influences your front-end development cost. Now version 3 is about to be released. MopaBootstrapBundle has already two PR (pull requests) open for supporting Bootstrap 3. If you want to modify the Bootstrap default colors to match your company’s new website layout, this blog provides the instructions. However, make sure you first check out the Bootstrap 2 to 3 migration guide.

1) Download Bootstrap

git://github.com/twbs/bootstrap.git
cd bootstrap

2) Install npm and node (Ubuntu)

curl https://npmjs.org/install.sh | sudo sh
sudo ln -s /usr/local/bin/npm /usr/bin/npm
sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Or using the package manager (thank you Mischa):

sudo apt-get install python-software-properties python g++ make;
sudo add-apt-repository ppa:chris-lea/node.js;
sudo apt-get update;
sudo apt-get install nodejs;

3) Install grunt-cli globally and grunt locally

sudo npm install -g grunt-cli
npm install grunt
npm install grunt-contrib-connect grunt-contrib-clean grunt-contrib-concat grunt-contrib-jshint
npm install grunt-contrib-uglify grunt-contrib-qunit grunt-contrib-watch grunt-recess

4) We need Jekyll as well..

sudo apt-get install rubygems
sudo gem install jekyll

5) Now do the actual modification

Now edit the files in the “less” directory (start with “variables.less”) with you favorite editor. Note that less is some sort of programming language that allows you to script consistent CSS generation. One of the examples is that Bootstrap has a “brand-primary” color that can be used in different shades using the “lighten” and “darken” functions.

6) Test your creation

grunt dist
jekyll serve

Questions? Comments? Let us know!

Share