Class-based database UI rendering with jQuery – Update ALL the things!

Basic UI Rendering/Updating

Javascript and jQuery offer the UI designer the tools necessary to update page text, select, and other form elements based on user interaction, as well as other conditions defined at either page load or at specified intervals. The basic tools for this in javascript are the document.getElementById() and document.getElementsByClassName() functions. What these functions do is retrieve objects that match the criteria specified. Depending on what sort of object is returned, appropriate properties and methods are available. The first will retrieve the first object that has the id specified, and the second will return an array of objects with the class specified. Remember that id elements are unique in a given document (or should be), and classes may describe multiple elements. Additionally, an element may only have one id, while you can assign it a slew of classes if you see fit. Although there are situations where a unique element is very useful, for example identifying exactly which element a user clicked, classes tend to be more flexible for most UI applications.

While the above vanilla javascript is plenty functional, jQuery wraps up these functions in their own library functions, adding a great deal of error-checking, including cross-browser functionality and fallbacks. They also tend to make the calls easier to use, shorter to code, and designed with the coder in mind. For all of these reasons, we almost exclusively use jQuery around here. The analogous class and id calls are both wrapped into the $() selector, which you would call as $(".myclassname") and $("#myidname"). Now, as opposed to the vanilla javascript, which returns pure DOM elements, these return a jQuery object, which can hold one or many DOM elements inside of it. This has repercussions when we want to access a single element inside a returned array, but we can use built-in methods to deal with this. More on that later.

The basic methods we’ll be using are the following:

Set text of all class elements:

DOM element examples:

<div class="mydatafield">Default Value</div>
<span class="mydatafield">Default Value</span>

How to render data:

$('.mydatafield').html('text or numeric data')
Set value of select with class:

DOM element examples:

<select class="mydatafieldselect">
  <option value="value 1">value 1</option>
  <option value="value 2">value 2</option>
  <option value="value 3">value 3</option>
</select>

How to render data:

$('.mydatafieldselect').val('value 2')
Set checkbox with class:

DOM element examples:

<input type="checkbox" class="mydatafieldcheckbox">

How to render data:

$('.mydatafieldcheckbox').attr("checked",true);

Standard Class Naming

You can see in the above examples how it is convenient to adopt a standard naming convention for the different types of widgets. There are many more you may want to use, such as toggles, sliders, and other custom elements. By using a standard naming practice, if we have a value ‘mydataname’, we know that a selector for this value will be at ‘mydatanameselector’. This comes in handy when we want to batch process ui elements.

So if we want to render ‘mydataname’ with value ‘value’, we can use the following piece of code every time. You can see I’ve included a helper function to assign true/false values to binary elements.

function setWidgetValues(baseclass,valuearg) {
    var value = valuearg || 0;

    $(baseclass).html(value);
    $(baseclass + 'select').val(value);
    $(baseclass + 'checkbox').attr("checked",booleanBinaryToTrueFalse(value));
}

The second piece of adopting naming standards is more application specific, but relates to the data source. As the next section will demonstrate, we can render an entire database table, as long as we predictably name our class widget elements.

Batch Rendering from a Database

Let’s assume for instance that we are operating out of a single database with a number of tables. Each table has  a single row with columns that describe the data. We adopt a class naming convention where classname=table + columnname. So if we have a table named  controls  and fields polltime, pollfreq, pollstatus,  we get classes controlspolltime, controlspollfreq, and controlspollstatus.

Now say we have retrieved a data table named superspecialdata, for example using an ajax database query, as we showed previously. Our data is a json object or array of json objects, where the properties are the columnnames, and the values are the row values. If we return, for example, a multirow database table as tabledata, to get the value of the third row in the column pollfreq, we’d use tabledata[2].pollfreq. It’s that easy. Typically, if know the table only has one row, we’d return the data as a single object. We’ll call that onerowdata, i.e. onerowdata=tabledata[0]. Since we know the name of the table and the standard for naming classes, we can just go for it:

function setWidgetValues(baseclass,valuearg) {
    var value = valuearg || 0;
    $(baseclass).html(value);
    $(baseclass + 'select').val(value);
    $(baseclass + 'checkbox').attr("checked",booleanBinaryToTrueFalse(value));
}
function renderWidgets(tablename,dataarg) {
  var data = dataarg || {};
  $.each(data,function(key,value){
          var baseclass='.' + tablename + key;
          setWidgetValues(baseclass,value);
  });
}
renderWidgets('superspecialdata',onerowdata);

See how easy that is? To create a user interface, just name your classes after your data, retrieve your data, time it up right, and render it to your classes automagically!

Leave a Reply

Your email address will not be published. Required fields are marked *