Question

I have an application which uses phonegap and jquery mobile and it has tabs like this

<div data-role="header">
    <div data-role="tabs">
        <ul>
            <li><a href="#tab-1" class="">Tab 1</a></li>
            <li><a href="#tab-2" class="">Tab 2</a></li>
            <li><a href="#tab-3" class="">Tab 3</a></li>
        </ul>
    </div>
</div>

<div data-role="content">
    <div id="tab-1">
        <h2>Here is the second tab</h2>       
    </div>

    <div id="tab-2">
        <h2>Here is the second tab</h2>
    </div>

    <div id="tab-3">
        <h2>Here is the third tab</h2>
    </div>
</div>

Now i need to do the following things

1. How to add a div dynamically to any of the tab?
2. How to show progress bar for about 10 seconds and then display the result.

Answer 1

You can dynamically add DOM elements with jQuery like this:

$('#container').append("<div></div>");

For jQuery-Mobile, you’d have to call refresh on any library specific constructs, such as listviews.