Re-styling dynamic content with jQuery Mobile

We are going to quickly look at how using trigger(“create”) can solve the problem of adding dynamic content to a jQuery Mobile application within an XPage.

I will get to writing an article on jQuery Mobile in the future but in the mean time here is something which I came across – how do you re-style the page when new content is created?

Problem

How to re-style newly added content in a jQuery Mobile application.

Situation

I have an acceptance form which I am creating in my XPage application. I have a mobile only view which is determined using a re-direct based on the browser’s user.agent when the device access the application.

jQuery Mobile acceptance form
jQuery Mobile acceptance form

Users are able to add an unknown number of guests. To achieve this functionality I am inserting a new row into the Guest Name table using normal jQuery

$('[id$=add]').click(function() { // when you click the add link
        $('[id$=theTable] tr:last').before('<tr><td><input name="person"'+i+' id=person'+i+' type="text" value="" /></td><td><label id="label'+i+'" for="check'+i+'">Yes</label><input type=checkbox name=check1 id=check'+i+'></td><td><center><img border=0 id=img'+i+' onclick="removeInput(this.id)" src="images/badge-circle-cross-24-ns.png"></center></td></tr>');
        i++;
    });

Unfortunately when I do this out of the box the sweet looking jQuery mobile look and feel is not applied to the new content.

(This problem also occurs if you perform a partialRefresh on the content) and you get something not so nice looking

Adding dynamic content does not style well
Adding dynamic content does not style well

Solution

Fortunately the guys at jQuery Mobile, smart fellows that they are, overcome this issue very easily with a simple one line command which re-applies the mobile style to any element within the supplied container.

Selecting the parent table and applying .trigger(“create”) solves the problem nicely, and it does it so fast it is imperceptible to the naked eye.

$('[id$=theTable]').trigger("create")

And here’s the result – this “looks” so good I would almost rather replace the desktop browser version of this application and have everyone use this look and feel!

jQuery mobile page with the correct styling applied
jQuery mobile page with the correct styling applied
Advertisements

2 thoughts on “Re-styling dynamic content with jQuery Mobile

  1. Hello
    I’m trying to use jQuery mobile (1.2) with xpages, and had several problems ( dojo vs jquery mobile)

    Do you have a demo database ?

    • Matthieu – I do not I am afraid. All the jQuery Mobile work I have done has been as part of another application and I have never separated it out into a demo….not a bad idea though. Sorry I don’t have anything for you

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