Contact Us

If you are interested in our services leave your contact details below and our sales representatives will contact you.

■
■
■
The organization which you represent
■
Email address we will use to contact you
Longer contact form…
 

  • About

    mFabrik Blog is about mobile and web software development, open source and Linux. We tell exciting tales where business, technology, web and mobile convergence.

    Creative Commons License
    This work is licensed under a Creative Commons Attribution 3.0 Unported License.

domgen – Creating HTML with Javascript without DOM API

Posted on September 2, 2010  by Jussi Toivola
Filed Under browser, javascript, jquery, open source, technology, web development

Tired of using Javascript DOM API for generating HTML dynamically? Meet domgen. domgen is a tool for easy dynamic content generation via Javascript. It generates DOM elements from dictionary specification similar to HTML and eliminates the need for cumbersome DOM Javascript API.

domgen uses a simple specification to generate the HTML. In some cases it’s more reliable to use DOM API to generate HTML instead of using innerHTML. We have had problems especially with iPhone when using innerHTML.
See for example http://pastebin.com/LLk3J0iH or google “iPhone innerHTML” for more info. In fact, innerHTML is not even part of the HTML standard even though it exists on every browser.

So if you want to add dynamic HTML properly, you should use the Javascript DOM API. Consider the following short HTML where the contents inside body had to be generated:

<body>
    <div id="mydiv">my div</div>
</body>

Using Javascript DOM API:

// Get the body tag
var body = document.getElementsByTagName("body")[0];
// Create 'div' element
var mydiv = document.createElement("div");
mydiv.setAttribute("id", "mydiv");
mydiv.innerText = "my div";
// Attach the div to body
body.appendChild(mydiv);

And using domgen:

var spec = [
    'div',
    {
        id : 'mydiv',
        _innerText : 'my div'
    }
];
domgen.generate( domgen.get("body")[0], spec);
// or with jQuery
domgen.generate( $("body")[0], spec);

To me, domgen seems a lot easier to read and work with. Get code and more examples here: https://bitbucket.org/mfabrik/domgen

Creating a drag’n'drop basket with jQueryUI

Posted on January 5, 2010  by Mikko Ohtamaa
Filed Under jquery, jqueryui, technology
Tags: , , , ,

I have created an example how to create a “basked” with jQuery and jQueryUI with the following features

  • The user can be pick items from the predefined set
  • Items are dragged and dropped to the basket
  • The basket value reflects a hidden input

This kind of user interface pattern is suitable for

  • Shopping carts
  • Travel planners

The example in fact bears the name “travel planner” but it is not tied to travel anyhow.

Note: this is just a screenshot - please see live example

basket

The example code uses

  • google.code() content delivery network to load jQuery and jQueryUI
  • jQueryUI draggable and droppable features
  • Well planned visual cues for the drag and drop operations: cursor changes, CSS hover classes
  • <form> which <input> value is updated according to the basket content – all selected item ids form a comma separated list

The example code is well-documented with links to the further documentation.