No JavaScript No Problem

[Infragistics] Murtaza Abdeali / Monday, November 7, 2011

In this day and age, it is rare that a user’s browser do not support JavaScript. But still, there are cases where sites are required to run on a browsers that do not support JavaScript, for accessibility purposes or for building sites that are more SEO friendly. You can still build such sites and continue to use NetAdvantage for jQuery product without having to maintain two different instances of your sites. I know what you are thinking, this doesn’t make sense, how can a fully JavaScript based toolset be used in a browser that do now support JavaScript, the answer lies on how you build up your sites. It is actually quite simple by just following a simple practice called progressive enhancement. You can first build your site for no JavaScript, and then light your page up by using Infragistics jQuery client widgets.

To demonstrate this example, I am going to show you examples of 3 different controls, grid, combo box & tree control. In all the three examples, I am going to show you how to take a HTML construct that more closely matches with what each control would look like, and then just by simply calling a wrapper on that construct, you can convert it into nicely styled, interactive jQuery controls.

jQuery Grid

Let’s begin with the grid first. As a web developer we all know what an HTML table looks like with table, head, header, rows & cells tags. In a browser where ever you want to display a table the contains data, it is a very standard thing to use the table element. In this example, I am going to convert a HTML table to an Infragistics jQuery Grid.

Let me now show you how I am converting a simple HTML table on the client to a jQuery grid with paging, filtering & sorting enabled. Here is what our rendered HTML table looks like, remember the id of the table, which is NorthWindCustomerInformation. We are going to use the id to grab the table element in scripting below.

<table class="grid" cellspacing="0" rules="all" border="1" id="NorthWindCustomerInformation">

   <thead>

        <tr>

            <th>Customer ID</th>

            <th>Company Name</th>

            <th>Contact Name</th>

            <th>Contact Title</th>

            <th>Street Address</th>

            <th>City</th>

            <th>Region</th>

        </tr>

   </thead>

   <tbody>

        <tr>

            <td>ALFKI</td>

            <td>Alfreds Futterkiste</td>

            <td>Maria Anders</td>

            <td>Sales Representative</td>

            <td>Obere Str. 57</td>

            <td>Berlin</td>

            <td></td>

        </tr><tr>

            <td>ANATR</td>

            <td>Ana Trujillo Emparedados y helados</td>

            <td>Ana Trujillo</td>

            <td>Owner</td>

            <td>Avda. de la Constituci&#243;n 2222</td>

            <td>M&#233;xico D.F.</td>

            <td></td>

        </tr><tr>

            <td>ANTON</td>

            <td>Antonio Moreno Taquer&#237;a</td>

            <td>Antonio Moreno</td>

            <td>Owner</td>

            <td>Mataderos  2312</td>

            <td>M&#233;xico D.F.</td>

            <td></td>

        </tr><tr>

            <td>AROUT</td>

            <td>Around the Horn</td>

            <td>Thomas Hardy</td>

            <td>Sales Representative</td>

            <td>120 Hanover Sq.</td>

            <td>London</td>

            <td></td>

        </tr><tr>

            <td>BERGS</td>

            <td>Berglunds snabbk&#246;p</td>

            <td>Christina Berglund</td>

            <td>Order Administrator</td>

            <td>Berguvsv&#228;gen  8</td>

            <td>Lule&#229;</td>

            <td></td>

        </tr><tr>

            <td>BLAUS</td>

            <td>Blauer See Delikatessen</td>

            <td>Hanna Moos</td>

            <td>Sales Representative</td>

            <td>Forsterstr. 57</td>

            <td>Mannheim</td>

            <td></td>

        </tr><tr>

            <td>BLONP</td>

            <td>Blondesddsl p&#232;re et fils</td>

            <td>Fr&#233;d&#233;rique Citeaux</td>

            <td>Marketing Manager</td>

            <td>24, place Kl&#233;ber</td>

            <td>Strasbourg</td>

            <td></td>

        </tr><tr>

            <td>BOLID</td>

            <td>B&#243;lido Comidas preparadas</td>

            <td>Mart&#237;n Sommer</td>

            <td>Owner</td>

            <td>C/ Araquil, 67</td>

            <td>Madrid</td>

            <td></td>

        </tr><tr>

            <td>BONAP</td>

            <td>Bon app'</td>

            <td>Laurence Lebihan</td>

            <td>Owner</td>

            <td>12, rue des Bouchers</td>

            <td>Marseille</td>

            <td></td>

        </tr><tr>

            <td>BOTTM</td>

            <td>Bottom-Dollar Markets</td>

            <td>Elizabeth Lincoln</td>

            <td>Accounting Manager</td>

            <td>23 Tsawassen Blvd.</td>

            <td>Tsawassen</td>

            <td>BC</td>

        </tr><tr>

            <td>BSBEV</td>

            <td>B's Beverages</td>

            <td>Victoria Ashworth</td>

            <td>Sales Representative</td>

            <td>Fauntleroy Circus</td>

            <td>London</td>

            <td></td>

        </tr><tr>

            <td>CACTU</td>

            <td>Cactus Comidas para llevar</td>

            <td>Patricio Simpson</td>

            <td>Sales Agent</td>

            <td>Cerrito 333</td>

            <td>Buenos Aires</td>

            <td></td>

        </tr><tr>

            <td>CENTC</td>

            <td>Centro comercial Moctezuma</td>

            <td>Francisco Chang</td>

            <td>Marketing Manager</td>

            <td>Sierras de Granada 9993</td>

            <td>M&#233;xico D.F.</td>

            <td></td>

        </tr><tr>

            <td>CHOPS</td>

            <td>Chop-suey Chinese</td>

            <td>Yang Wang</td>

            <td>Owner</td>

            <td>Hauptstr. 29</td>

            <td>Bern</td>

            <td></td>

        </tr><tr>

             <td>COMMI</td>

             <td>Com&#233;rcio Mineiro</td>

             <td>Pedro Afonso</td>

             <td>Sales Associate</td>

             <td>Av. dos Lus&#237;adas, 23</td>

             <td>Sao Paulo</td>

             <td>SP</td>

        </tr>

    </tbody>

</table>

Once we have the client HTML table, now in the script block of the page we can extract the table with its data in the client side data source component. After that, we can convert the table element into a jQuery grid. You can do that using the following code:

<script>

    $(function () {

       var dataSource = new $.ig.DataSource({ dataSource: $("#NorthWindCustomerInformation")});

        $("#NorthWindCustomerInformation").igGrid({

            virtualization: false,

            autoGenerateColumns: true,

            dataSource: dataSource[0],

            scrollbars: true,

            height: '400px',

            features: [

                    {

                        name: 'Paging',

                        pageSize: 10, 

                        type : 'local'

                    },

                    {

                        name: 'Sorting',

                        type: 'local'

                    },

                    {

                        name: 'Filtering',

                        type: 'local',

                        filterDropDownItemIcons: false,

                        filterDropDownWidth: 200

                    }

                ]

        });

    });

</script>

After doing so, the client HTML table will be converted to a grid control with support for paging, filtering & sorting.

jQuery Combo Box

Next, let’s take a look at converting a standard HTML select element to an Infragistics jQuery Combo box. Select elements come in handy when you want to provide choose from a list of item. In this section, I’ll convert a select element showing list of countries to a combo box.

To show you how we got from a select element to a combo box, I am going to start off with an HTML select box first to with options that will define countries we want to show in it.

<select id="Countries">

    <option>United States</option>

    <option>United Kingdom</option>

    <option>Bulgaria</option>

    <option>Uruguay</option>

    <option>Japan</option>

    <option>India</option>

</select>

Next, in our script block, we will grab this element using it’s id and call a jQuery plug-in on it. The plug-in we will use is the combo box, which will take the select element contents and convert it into jQuery Combo Box. Just one line of code is needed to do this, if you are not specifying any additional combo features.

<script>

    $(function () {

        $("#Countries").igCombo();

    });

</script>

Once we do that, the select element is converted into a nicely styled combo box with drop down button and the same list of elements as before.

jQuery Tree

Lastly, let me show you one more example that I think will be very useful when developing applications that needs to run in browsers with no or minimum JavaScript capabilities. In this section, I am going to convert a UL/LI structure to a jQuery tree control with the ability to expand and collapse node. Within each LI, I will define an href, which will point that element to a URL. Upon converting the structure to a tree controls, you’ll see that the functionality will stay intact. Here is what we are going to do:

In order to do what is shown in the image above, first we need to define what my HTML structure, this could be something static on the page, or dynamically created on the fly to build up the navigation structure within applications. Let’s define our UL/LI structure as following on the page:

<div id="InfoTree">

    <ul>

        <li>

            Public Sites

            <ul>

                <li>

                    <a href="http://www.microsft.com">Microsoft</a>

                </li>

                <li>

                    <a href="http://www.google.com">Google</a>

                </li>

                <li>

                    <a href="http://www.apple.com">Apple</a>

                </li> 

            </ul>

        </li>

        <li>

            Infragistics Sites

            <ul>

                <li>

                    <a href="http://ko.infragistics.com">Infragistics Site</a>

                </li>

                <li>

                    <a href="http://samples.infragistics.com">Infragistics Samples</a>

                </li>

                <li>

                    <a href="http://community.infragistics.com">Infragistics Community</a>

                </li> 

                <li>

                    <a href="http://help.infragistics.com">Infragistics Help</a>

                </li>

            </ul>

        </li>

    </ul>

</div>

Upon having our UL/LI structure the way we wanted in our page, in the script block we need to grab the Div element that all this lives in and then call the jQuery tree plug-in on it. This will convert our entire mark-up defined above into a tree control. User can now expand and collapse the parent elements to show/hide the children nodes. You can also set other options on the tree as needed too.

<script>

    $(function () {

        $("#InfoTree").igTree();

    });

</script>

Here we have it, by placing the snippet above the UL/LI mark-up will be converted into a jQuery client tree control.

Summary

There is too much excitement in the web development today, the flood gates have opened up with the capabilities you can bring to your applications. Browser with huge performance improvements to run JavaScript faster than ever before, HTML5 standards bringing RIA to native environment and the demand for unique and slick interfaces are continuing to raise the bar for what a web developer can deliver. Then, there is always a million dollar question we have to answer, what if the client is running a down-level browser, or can the site be made fully SEO friendly? Then we go back and forth with what an application might loose if it needs to support the backward technologies and hopefully come to a common ground. However, with the approach I showed above, you might be able to take a different approach and it gives you an additional option for building application that can support legacy stuff, but it can also light up on a modern browser.

Here are some additional resources on this topic that you might find helpful.