Generating grid-style buttons dynamically using jQuery Mobile

I am in need of assistance to create a dynamic grid using jQuery Mobile. The grid should consist of buttons with either 'onclick' or 'href' functionality. The number of buttons should be generated dynamically at runtime. Specifically, I would like this grid to resemble a library index. When a library button is clicked, it should display the names of books in a new grid of buttons. Upon clicking a book name button, it should then display another grid containing chapter numbers for that book. These grids should all be created dynamically based on user selections.

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

The grid of buttons needs to be generated dynamically during runtime based on the number of books available in the library.

I am utilizing jQuery, JavaScript, and HTML5 with the PhoneGap plugin for this project.

Any help or guidance is greatly appreciated!

Thank you in advance.

javascriptjquerycsshtmljquery-mobile

Answer №1

To add elements and update the grid, you can use the following function along with an example:

function refreshGrid(number){

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

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

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

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

I hope this solution works well for your needs.

Answer №2

Here's a straightforward way to add a stylish button to your webpage:

Begin by creating a button using HTML and JQuery:

var myButton = $("<button>Click Me</button>");

Then, place the button in the desired location on the page:

$("#button_container").append(myButton);

Lastly, apply the button() function from JQuery Mobile to style the button:

myButton.button();

After following these steps, you should now have a fully functional and visually appealing button on your website.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some strategies to reduce the frequency of API calls even when a webpage is reloaded?

Imagine I'm utilizing a complimentary API service that has a restriction of c calls per m minutes. My website consists of a simple HTML file with some JavaScript code like the one below: $(function () { //some code function getSomething() { ...

javascriptajax

Transferring an object from one inventory to another

I'm in the process of developing a task manager that enables users to add and remove tasks. I am also working on enabling the ability for users to transfer tasks from one list to another. The current code I have written doesn't seem to be functio ...

javascripthtmlcssgoogle-chrome-extension

Tips on transitioning from Modal1 to Modal2 in Ionic after a successful submit button press?

My survey app requires users to fill out a form and click the Submit Feedback button. Upon successful submission, a message saying "Feedback submitted successfully" should be displayed in Modal2, which is inside another modal named (Modal1). However, being ...

javascriptcssangularionic-frameworkmodal-dialog

Laravel and jQuery: A Perfect Match for Routing

Using Ajax to fetch and display content in a Laravel view, I am trying to figure out how to access the second parameter from the URL. Currently, it is returning a random string: for(var i=0;i<array.length;i++){ html+="<a href={{ route('show ...

phpjqueryajaxlaravel

Resizable vector graphics with consistent border dimensions

I need a solution that maintains a constant line width while still making the SVG responsive. Here is the desired outcome: https://codepen.io/dudleystorey/pen/wMLBLK The example linked above achieves this using CSS, but I am looking to achieve the same r ...

htmlcsssvgresponsive

The FuelUx scheduler forgets which day we've chosen when selecting weekly recurrence

When using the fuelUX scheduler, I noticed that after calling the method $('#myscheduler').scheduler("value","JSON VALUE") and selecting a weekly recurrence pattern, the information of the day gets lost. For example, if my input for the recurrenc ...

javascriptjsonschedulerfuelux

Transferring Arrays to AJAX communication

I am facing an issue with passing both a string array and an array of string arrays to a webservice through AJAX in my ASP.NET application. Unfortunately, I keep encountering the following error: {"Message":"Invalid object passed in, : or } expected. (16) ...

jqueryasp.netajaxjson

Find the index of the element that was clicked by utilizing pure JavaScript

I am struggling to find the index of the element that was clicked. Can anyone help me with this? for (i = 0; i < document.getElementById('my_div').children.length; i++) { document.getElementById('my_div').children[i].onclick = f ...

javascriptindexingonclick

Troubleshooting issues with jQuery plugin functionality post-upgrade

My previous jQuery version was 1.4 or 1.8, but I upgraded to version 1.10.2 to access newer plugins. However, I encountered a problem - my jQuery code for editing attributes stopped working after the upgrade. Below is the code snippet: <script type="te ...

jquery

What CSS property can be used to make short words wrap to the next line?

Is it possible to automatically identify if a line of text ends with a short word and then move it to the next line, so that the text flows smoothly? This would ensure a more organized layout. For instance, I envision the following text: Cascading Style ...

htmlcss

Securing API endpoints in a React/Redux application using proxy techniques

Ensuring the security of my react/redux application is a top priority for me. I've noticed that my api url is exposed to the public inside the bundled app.js file, which raises some concerns. After doing some research, I discovered that some developer ...

javascriptnode.jsexpressreactjsredux

Adapt the dimensions of the iframe to perfectly match the content within

Looking for a way to dynamically adjust the size of an iframe to perfectly fit its content, even after the initial load. It seems like I'll need some kind of event handling to automatically adjust the dimensions based on changes in the content within ...

javascripthtmliframeadjustment

Adjust Vue FilePond dimensions

I am currently working with a Vue Filepond and trying to ensure that it fills the height of its container. My Vue Filepond setup also involves Vuetify. Whenever I attempt to set values in the CSS, they are constantly overridden by 76px. Although fill-hei ...

javascriptcssvue.jsfilepond

Having trouble integrating a custom plugin with CKEditor?

I am currently using version 4.7 of CKEditor, which is the latest version available. I am facing an issue where I cannot see a new custom plugin that I have added to the toolbar. I have checked my basic example of abbreviation (abbr) plugin but couldn&apos ...

javascriptjqueryckeditor

Vue 2 draggable does not maintain reactivity when the v-model value consists of a parent tag's iterable

Utilizing Vue 2 alongside Vuex, the incoming object gets organized into distinct sub-objects according to the classCategory value. Could it be failing because the v-model value in draggable is a key sourced from the parent tag object? <div class="c ...

javascriptvue.jsvuejs2frontenddraggable

The swf file doesn't stretch to fit the window when the height is set to 100%

Struggling with creating a flash recorder controlled by JavaScript? Trying to get the flash to fill the browser window but disappearing when setting height or width to 100%? Where am I going wrong? <div id="flashrecorder"> <object wmode="trans ...

javascripthtmlactionscript-3flash

Alignment problem in CSS, identical code on two separate servers

After transitioning from the design phase to development, I encountered a strange CSS issue on one small section of my client's website. Specifically, in the "Official NGK Canada Part Finder" section, the text is breaking onto new lines unexpectedly. ...

htmlcssalignment

Tips for placing a button on top of a Div element with overflow set to hidden?

My goal is to have a button placed over a box, but I am facing difficulty achieving this. I have experimented with z-index, grid-content, and other methods, but the button refuses to show over the box as desired. The placement of the button inside the box ...

htmlcss

jQuery UI smooths out the transitions, making the effect more gradual and fluid

Is there a way to make my toggle sidebar scroll smoothly using jQuery UI? Currently, it has a jerky behavior and I would like it to have a smoother left/right effect. I want the outer shell to slide smoothly just like the inner container does, instead of ...

jqueryjquery-uicss

What is the standard way to write the server-side code for HTTP request and response handling?

I stumbled upon these resources: How to send HTTP request GET/POST in Java and How to SEND HTTP request in JAVA While I understand the client-side aspect, how can this implementation be done on the server side? The goal is to utilize the link on the clie ...

javascriptjavaphpwebserver