Adding Contents Dynamically in Jquery Mobile

I’ve started using Jquery Mobile recently for developing a site for mobile platforms. Actually the basic designing is very simple and is described in the official demo/documentation. I met with problems when I dynamically added html content. The two problems I came accross are described below with solution.

Unable to get the default style on dynamically added content

I had to insert an html content, the content comes after an ajax call. I simply did
$('#form-block').append(data)
it shows the content in data, but the styles were missing.

I could figure out that the problem is because the DOM was completely loaded before the data was added. So the styling could not be obtained.

Solution

We can make use of trigger function to get the styling done on the data.
$('#form-block').append(data).trigger('create')

trigger will execute all handlers and behaviors of the matched element for the given event type. In this case create is the event type. It’ll make the data to be created with all style element.

Unable to bind an event on a dynamically added selector(id/class)

I added a new class on the fly(using normal javascript), bind an event with this class on DOM ready. But the event was not getting triggered on calling the event.
$(".slide-in").click(function () {
    $(this).removeClass("slide-up").addClass("slide-up-min");

Solution

The reason for the event not getting triggered is, it is bind to the selector on DOM ready. The selector was absent initially. The above usage is same as using bind, which will only do the bind before DOM is loaded.
$(".slide-in").bind('click', function () {
    $(this).removeClass("slide-up").addClass("slide-up-min");

We have to use a method which will bind the event even after the DOM is loaded completely. live or delegate method can be used in this situation.
$(".slide-in").live('click', function () {
    $(this).removeClass("slide-up").addClass("slide-up-min");

delegate vs live

delegate is similar to live, but in delegate nesting can be done. Difference can be explained using an example, we want to add the click event to all anchors inside the class slide-in. If we are using live we have to use a selector for all the anchors(say, class anchor).
$(".anchor").live('click', function () {
    $(this).removeClass("slide-up").addClass("slide-up-min");

Whereas if we are using delegate there is no need to add a new selector. We can do the same thing as
$(".slide-in").delegate('a', 'click', function () {
    $(this).removeClass("slide-up").addClass("slide-up-min");

Advertisements

About Odol Shinu

I've completed my B Tech in Information Technology in 2010 from Government Engineering College Sreekrishnapuram Palakkad under Calicut University.

Posted on April 20, 2012, in Jquery and tagged , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: