Archive for the ‘ jQuery’ Category

PATTERN : Dynamic HTML elements and context specific access via jQuery.

I think all web developers have a love / hate relationship with HTML.

HTML is by it’s very definition a MARKUP language. Markup meaning it’s category of utility is to represent data. HTML is fine for representing data for display but less perfect when it comes to use case’s that require the manipulation of that data once it’s been rendered. As a “markup” language, the semantic values are not innately coupled to the markup items that contain them.

The software development industry continuously invents new ways to improve the ways that we solve this relationship problem.

I’ve been working on a Single Page HTML App which will be data drivel via a JSON file retrieved from the server.

That JSON file will contain some number of data records and the app will need to create one container div for each of those records. Since the number of those records is variable, the App won’t know until run time (when the page is loaded) how many of those sections will be needed.

Each of the container divs will contain HTML elements that will need to be manipulated at run time. (In fact, in the app I’m forking on each container will have a variable number elements, also dynamically created at run-time but for the purposes of this sample we’ll keep thinks to a single level of dynamics).

Dynamically naming elements can quickly become complex with dynamic HTML pages and, as is always there are many ways to solve the same problem. (Yes, I know, your way is better :) )

Here is a documented example of ONE way to accomplish this content / data dynamics using jQuery (though you could use the same pattern in plain old JavaScript).

It takes very little code, but several people have questioned me as to how to do this so I thought I’m post a sample.


<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script 
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>

<script>
var numberOfDivsToCreate=10;
//---------------------------------------------------------------------------+
// Note the id of the div to be appended is dynamic comprised of the static
// text "DIV-NUMBER" and the current value of the i variable of the for loop.
//---------------------------------------------------------------------------+
$(document).ready(function () {
    //-----------------------------------------------------------------------+
    // for loop create the total number of divs specified in the
    // numberOfDivsToCreate variable above. In a real app this would probably
    // be determined at run time
    //-----------------------------------------------------------------------+
    for (var i = 1; i <= numberOfDivsToCreate; i++) {
        $('#mainpage').append("<div id='DIV-NUMBER-" + i + "'>" +
                          "<span id='myInput''>" + i + "</span>" +
                          "&nbsp;--&nbsp;<span id='myVal'></span></div>");
    }

    //-----------------------------------------------------------------------+
    // Use the jQuery.on method to specify an event delegate to handle click
    // events for all the divs inside the div who's id="mainpage"
    // Note: In this sample we arw catching the click event for ALL divs
    // In a real world app your mainpage div may contain divs that you do not
    // want to fire a click event on, In that case use a class on the
    // clickable ones and change the jQuery selector below accordingly,
    //-----------------------------------------------------------------------+
    $( "#mainpage" ).on( "click", "div", function() {

        //-------------------------------------------------------------------+
        // The for loop above creates 10 divs and this click event delegate
        // is a SINGLE method (lives in memory once) to handle the click
        // events for all 10 divs
        // $this is a jQuery reference to the element that threw the click
        // event in our case one of the 10 divs
        //-------------------------------------------------------------------+
        // we'll use .find() to look inside the div that threw the click
        // event and find the elements we wish to manipulate, note that
        // those elements are not dynamically named (myInput & myVal) so
        // there are 10 of each on our page and we are using context to
        // determine which to manipulate
        //-------------------------------------------------------------------+
        // jQuery .find() can be a performance problem if misused, make
        // sure to minimise the find scope as much as possible
        //-------------------------------------------------------------------+
        var MyInput =$(this).find("#myInput");
        var MyDisplay = $(this).find("#myVal");

        //-------------------------------------------------------------------+
        // Note that MyInput & MyDisplay local variables that we cast to
        // jQuery objects on order to access the text properties via jQuery
        // syntax.
        //-------------------------------------------------------------------+
        $(MyDisplay).text($(this).attr("id") +
                "   -   Value = " + $(MyInput).text())
    });
});
</script>

</head>
<body>
<div id="mainpage">
</div>
</body>
</html>

jQuery Accordion and Dynamic Runtime Population

As I mentioned in my last post I’m playing with this idea of building a scoring application for boxing / mma events.

I want it to be a single page web application that scales to fit phones, tablets, etc.

An event contains a number of “bouts” and each bout will be a section in a jQuery UI Accordion control.

However, as is often the case, there are a couple of real world conditions that I couldn’t find documentation of sample to demonstrate.

1.) Event event can have a different number bouts.

This means that the accordion sections have to be dynamically built at runtime in the html page.

2.) The order of the events can change right up to the event time.

This means that the USER needs to be able to change the visual sequence of the bouts.

3.) The click-able header needs to be multiple elements.

All the demos I found assumed the headers were simple H3 elements.

You can play with a working version by clicking the image below.

Note that you can not only open and close the “bouts” but you can re-order them using drag-n-drop on the title bars.

– - – THIS IS A UI PROTOTYPE – - –

FightCard- 001

Built this way I can now add the AJAX logix fo recieve a JSON package that contains the event detail and use that data to populate the event.

Here is the code as it exists so far.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fight Card</title>
<link rel="stylesheet"
 href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="css/style.css">
<style>
    /* IE has layout problems when sorting  */
    .group { zoom: 1 }
</style>

<script>

//-----------------------------------------------------------+
// addBout() - Add a single node to the accordian
// TODO: add JSON object as input parameter and build the
//       bout with that data,
//-----------------------------------------------------------+
function addBout(){
    var bout =
        "<div class=\"group\">" +
            "<span class=\"handle\"> " +
                "<div class=\"table\">" +
                    "<div class=\"row\">" +
                        "<span class=\"cell width33pct align-left\">" +
                            "<strong>Blue Fighter TBD</strong>" +
                        "</span>" +
                        "<span class=\"cell align-center valign-middle\">" +
                            "vs." +
                        "</span>" +
                        "<span class=\"cell width33pct align-right\">" +
                            "<strong>Red Fighter TBD</strong>"+
                        "</span>" +
                    "</div>" +
                "</div>" +
            "</span>" +
            "<div>" +
                "<div class=\"table\">" +
                    "<div class=\"row\">" +
                        "<span class=\"cell width150 align-center\">" +
                            "<img src=\"images/silhouette.jpg\" alt=\"\">" +
                        "</span>" +
                        "<span class=\"cell align-center valign-middle\">" +
                            "Round<br />0" +
                        "</span>" +
                        "<span class=\"cell width150 align-center\">" +
                            "<img src=\"images/silhouette.jpg\" alt=\"\">" +
                        "</span>" +
                    "</div>" +
                "</div>" +
                "<span>" +
                "Mauris mauris ante, blandit et, ultrices a, suscipit , " +
                "quam. Integerut neque. <br /> Vivamus nisi metus molestie" +
                " vel, gravida in, condimentum sit amet, nunc. Nam a nibh." +
                "accordion .ui- iconDonec suscipit eros. Nam mi. Proin " +
                " viverra leo ut odio. Curabitur malesuada. Vestibulum a " +
                "velit eu ante scelerisque vulputate." +
                "</span>" +
            "</div>" +
        "</div>";
    return bout;
}

$(function() {

    $( "#accordion" )
            .accordion({
                header: "> .group > .handle",
                heightStyle: "content"
            })
            .sortable({
                axis: "y",
                handle: ".handle",
                stop: function( event, ui ) {
                    // IE doesn't register the blur event when sorting
                    // so trigger focusout handler to remove .ui-state-focus
                    ui.item.children(".handle").triggerHandler("focusout");
                }
            });

    //-----------------------------------------------------------+
    // This for loop is just for testing.
    // The real app will iterate a JSON collection and send
    // each bout node to the addBout function for insertion
    // into the accordion
    //-----------------------------------------------------------+
    for (var i=0;i<5;i++) {
    $("#accordion").append(addBout()).accordion("refresh");
    }
});
</script>

</head>

<body>

<div id="main-container" class="main-container">
    <div id="accordion">
    <!-- Bouts will be inserted here -->
    </div>
</div>

</body>
</html>

And the CSS

body {
   font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
   font-size: 62.5%;
   background: url('../images/background.gif') repeat;
}

.main-container {
    width: 96%;
    max-width: 960px;
    min-width: 300px;
    height: 100px;
    position: absolute;
    top:20px;
    left: 0;
    right: 0;
    margin: auto;
}

/*---------------------------------------*/
/*   Styles for table like formatting.   */
/*---------------------------------------*/
.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}

/*---------------------------------------*/
/*   Styles for width specification.     */
/*---------------------------------------*/
.width150 {
    width: 150px;
}

.width33pct {
    width: 33%;
}

.width34pct {
    width: 34%;
}

/*---------------------------------------*/
/*   Styles for various alignments.      */
/*---------------------------------------*/
.align-right {
    text-align: right;
}
.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}

.valign-middle {
    vertical-align: middle;
}

/*-------------------------------------------*/
/*   Style overrides for jQuery accordion.   */
/*-------------------------------------------*/
.ui-state-default{
    background-color: #3173a5;
    background-image: none;body {
	font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
	font-size: 62.5%;
    background: url('../images/background.gif') repeat;
}

.main-container {
    width: 96%;
    max-width: 960px;
    min-width: 300px;
    height: 100px;
    position: absolute;
    top:20px;
    left: 0;
    right: 0;
    margin: auto;
}

/*---------------------------------------*/
/*   Styles for table like formatting.   */
/*---------------------------------------*/
.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}

/*---------------------------------------*/
/*   Styles for width specification.     */
/*---------------------------------------*/
.width150 {
    width: 150px;
}

.width33pct {
    width: 33%;
}

.width34pct {
    width: 34%;
}

/*---------------------------------------*/
/*   Styles for various alignments.      */
/*---------------------------------------*/
.align-right {
    text-align: right;
}
.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}

.valign-middle {
    vertical-align: middle;
}

/*-------------------------------------------*/
/*   Style overrides for jQuery accordion.   */
/*-------------------------------------------*/
.ui-state-default{
    background-color: #3173a5;
    background-image: none;
}
.ui-accordion-header {
    background-color: #333333;
    color:  #BDC3C7;
    font-size: 16;
}

.ui-accordion-header.ui-state-active {
    background-color: #BDC3C7;
    color: #333333;
    font-size: 16;
}

}
.ui-accordion-header {
    background-color: #333333;
    color:  #BDC3C7;
    font-size: 16;
}

.ui-accordion-header.ui-state-active {
    background-color: #BDC3C7;
    color: #333333;
    font-size: 16;
}