Jquery mobile: dynamically create grid type buttons

Question

I want to create a mobile jquery grid consisting of buttons with the onclick or href function. The number of buttons must be created dynamically at runtime. For example, this code block should work as a library index. when you click the library button, it should display the “book names” in the button grid, and when you click the book name buttons, it should display another grid of buttons, which consists of the “chapter numbers” in the book, which will be created dynamically when the book is selected. My static html code to create the mesh,

<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> 

This button grid must be created dynamically at runtime depending on the number of books.

I am using jquery, javascript and html5 with the phonegap plugin.

Please, help.

Thanks in advance.

Answer 1

you need to add elements, and then call the trigger ("create") for each element, it’s easier with an 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 the work is for you.

Answer 2

Very simple:

First create a jQuery HTML element on the button:

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

Then enter the button, wherever you are, on the page:

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

And finally, run the jQuery Mobile button () on the button:

 button.button(); 

You should now have a JQM function button on your page.