jquery mobile: create grid type buttons dynamically

Question

I want to create a jquery mobile grid consists of buttons with 'onclick' or 'href' functionality. The number of buttons should be created dynamically during runtime. For example, This block of code should work like a library index. on clicking a library button, it should show the 'book names' in a grid of buttons, and on clicking the buttons of book names, it should show another grid of buttons which consists of 'chapter numbers' in the book which will be created dynamically upon book selection. My static html code for creating the grid is,

<div class="ui-grid-d" id="book_chooser">
        <div class="ui-block-a"><button class="ui-bar ui-bar-a" style="height:30px">Book A</button></div>
        <div class="ui-block-b"><button class="ui-bar ui-bar-a" style="height:30px">Book B</button></div>
        <div class="ui-block-c"><button class="ui-bar ui-bar-a" style="height:30px">Book C</button></div> 
        <div class="ui-block-d"><button class="ui-bar ui-bar-a" style="height:30px">Book D</button></div>
        <div class="ui-block-e"><button class="ui-bar ui-bar-a" style="height:30px">Book E</button></div>
        <div class="ui-block-a"><button class="ui-bar ui-bar-a" style="height:30px">Book A</button></div>
        <div class="ui-block-b"><button class="ui-bar ui-bar-a" style="height:30px">Book B</button></div>
        <div class="ui-block-c"><button class="ui-bar ui-bar-a" style="height:30px">Book C</button></div> 
        <div class="ui-block-d"><button class="ui-bar ui-bar-a" style="height:30px">Book D</button></div>
        <div class="ui-block-e"><button class="ui-bar ui-bar-a" style="height:30px">Book E</button></div>
        <div class="ui-block-a"><button class="ui-bar ui-bar-a" style="height:30px">Book A</button></div>
        <div class="ui-block-b"><button class="ui-bar ui-bar-a" style="height:30px">Book B</button></div>
        <div class="ui-block-c"><button class="ui-bar ui-bar-a" style="height:30px">Book C</button></div> 
        <div class="ui-block-d"><button class="ui-bar ui-bar-a" style="height:30px">Book D</button></div>
        <div class="ui-block-e"><button class="ui-bar ui-bar-a" style="height:30px">Book E</button></div>

Need this grid of buttons should to be created dynamically on run time based on the number of books.

I'm using jquery, javascript and html5 with phonegap plugin.

Please help.

Thanks in advance.

fermin · Accepted Answer · 2013-03-01 10:52:55Z

3

you need append elements and then call trigger('create') for each element, more easy with example:

function redrawGrid(num){

    $('#book_chooser').html(''); //clean grid
    for (var i = 0, class_div = "a"; i < num; i++) {

        var d = '<div class="ui-block-'+class_div+'"> \
                    <div class="ui-bar ui-bar-e" style="height:70px"> \
                        <small>dia '+ (i+1) +'</small> \
                        <button type="submit" data-theme="a" data-icon="plus">Book</button> \
                    </div> \
                </div>';

        $('#book_chooser').append(d).trigger('create'); 

        switch(class_div){ //change class of ui-block
            case 'a' : class_div= "b"; break;
            case 'b' : class_div= "a";break;
        }
    };
}

I hope that work for you.

answered Mar 1, 2013 at 10:52

fermin

6317 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrew Barber · Accepted Answer · 2013-03-05 19:31:23Z

2

Very simple:

First create a button HTML JQuery element by:

var button = $("<button>My Button</button>");

Next, inject the button wherever you want it to be in the page:

$("#my_button_div").append(button);

And finally run the button() JQuery Mobile command on the button:

button.button();

You should have a functional and JQM styled button in your page by now.

edited Mar 5, 2013 at 19:31

Andrew Barber

40.3k20 gold badges97 silver badges124 bronze badges

answered Mar 5, 2013 at 19:23

user1193035

Collectives™ on Stack Overflow

jquery mobile: create grid type buttons dynamically

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related