Generate interactive buttons within a grid layout by utilizing HTML anchor tags

Creating dynamic buttons in a grid within an accordion is my goal. The code I currently have is static, but I am looking to make it more flexible and dynamic. Ideally, the number of buttons needed in the grid will be determined at runtime. While the columns should remain fixed at 4, the rows can adjust based on the number of buttons required.

<div data-role="collapsible" data-theme="c" data-content-theme="b"  class="custom-collapsible" >
<h3>Category 01</h3>
<div class= "limit-theme">          
        <div data-role="content">
            <div class="ui-grid-c">
                <div class="ui-block-b">  <a data-role="button" class="custom-button"></a>          
                </div>
                <div class="ui-block-b"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-c"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-d"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-a"> <a data-role="button" class="custom-button"></a>
                </div>
            </div>
        </div>
</div>

I already have a data model set up and now want to connect this data model with the grid. Additionally, each button needs to have two different background images - one for when it's pressed (pressed.jpg) and another for when it's not (normal.jpg). The plan is to create these buttons dynamically and set their background images using the data model. In the current code snippet provided, all buttons share the same background image.

javascriptjqueryhtmlcssjquery-mobile

Answer №1

Check out this fiddle demo: http://jsfiddle.net/ezanker/BJnV6/

I've created an array containing 4 column classes:

var colClasses = ["ui-block-a","ui-block-b","ui-block-c","ui-block-d"];

Next, I used a for loop to add buttons dynamically (I assigned the grid div an ID of 'theGrid' for easier access):

$(document).on("pagebeforeshow", "#page1", function(){

    var ItemsToAdd = '';
    for (var i = 0; i< 23; i++){
        var col = i % 4;
        ItemsToAdd += '<div class="' + colClasses[col] + '">  <a data-role="button" class="custom-button" href="#">button ' + i +  '</a></div>'
    }

    $("#theGrid").append($(ItemsToAdd));
    $("#theGrid").trigger("create");
});

By using the modulo function (I % 4), I determined the appropriate column for each button and applied the corresponding class. After adding the buttons with jQuery's append function, I triggered the jQM create method to style the new buttons accordingly.

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

Creating a Select2 Dropdown Menu using jQuery

I am utilizing the kartik-v/yii2-widget-select2 in the following manner: use kartik\select2\Select2; echo $form->field($model, 'state_1')->widget(Select2::classname(), [ 'data' => $data, 'options' = ...

jqueryyii2jquery-select2

What are the steps to adjust the width of an HTML table cell?

Here is the code snippet I am currently working with: $(document).ready(function () { $(".stripeMe tr").mouseover(function () { $(this).addClass("over"); }).mouseout(function () { $(this).removeClass("over"); }); $(".stripe ...

jqueryhtml

Exploring the contrast between web elements and ElementFinders in Protractor

After diving into the Protractor API documentation and watching a video on Youtube, I'm still unsure. Is ElementFinder a shortcut or pointer to webElement, and is Element an instance of a certain class that represents webpage elements? ...

javascriptnode.jstestingprotractor

attempting to embed a .js.erb file within a webpage

Struggling to incorporate js.erb script into my view for a polling-based chat feature. What seemed straightforward at first has turned into a complex task. Snippet of the js.erb script: $( document ).ready(function() { $(function() { setT ...

javascriptruby-on-railsajaxjsonerb

The onClick() handler within the map function is erroneously altering the state of every element rather than just the element that was clicked

Currently, I am working on a Next.js website that focuses on multiple choice questions (MCQs) and answers. Initially, only the questions are displayed with the title and options. There is a feature where a button allows users to reveal the answer to a sp ...

javascriptreactjsonclicknext.js

JavaScript DateTimePicker onChange event malfunctioning

Issue with JS datetimepicker onChange event not functioning. Attempts have been made using OnSelect, OnClose, OnChange, OnHide, OnChangeMonth to trigger the datetimepicker event, but none of them seem to be effective. <input type="text" class="form-co ...

javascriptjqueryhtmlbootstrap-4

In JavaScript, the function yields a proxy rather than an object

Let's say I have an array: const arr = ['one', 'two', 'three'] Now, imagine I have a function that is designed to take an array of strings and return an array of objects: const func = (arr) => arr.map(item => ({str ...

javascriptreactjsjsonnext.js

Acquiring an icon of a program using its handle

I am looking for a way to extract a program's icon from its handle, which I acquired using User32.dll with EnumWindow/FindWindow. While I am aware of ExtractAssociatedIcon, it seems to work from a file instead of a handle. My question is how can I con ...

javascriptc#node.jswindowsnode-ffi

Vue: Changing the value in the select dropdown causes input fields to reset their content

After setting up a form with input values, I noticed that when using a select element with a v-model to change the dropdown value, the input fields from the previous selections are cleared. This has been a persistent issue for me and is now starting to imp ...

javascriptvue.js

Tips for aligning text to the right within a div using the "justify" text-align property

I want the final sentence of my content to be aligned to the right side while the rest remains justified. I attempted using a <span> within a <p> tag, but it did not work as expected: span.activity-conclusion { font:22px 'Open Sans ...

css

There was a parsing error due to encountering an unexpected reserved word 'interface' in the code, as flagged

I'm encountering an issue with my code when trying to utilize Props. The error message I'm receiving is "Parsing error: Unexpected reserved word 'interface'. (3:0)eslint". This project is being developed using next with TypeScript. Er ...

javascriptreactjstypescriptnext.js

Node.js singleton module design that relies on external data inputs

Usually, creating a simple singleton object with Node.js is done like this: var foo = {}; module.exports = foo; or function Foo(){} module.exports = new Foo(); However, when it comes to making a clean singleton module that requires an external variab ...

javascriptnode.jsredissocket.io

Looping through data and converting it into a JSON format can

Can anyone help me figure out how to work through this JSON data using VUE? I'm having trouble accessing keys that v-for can't seem to reach: [ { "Lavandería": { "id": 1, "name": "Lavandería", "i ...

javascriptvue.jsv-for

Changing the value of a variable after iterating through an array in JavaScript

I'm just getting started with programming and teaching myself. I'm struggling to grasp how to update a variable by iterating through an array. Here's an array containing the best pies, each with its own price: [blueberry, strawberry, pumpk ...

javascriptarraysif-statementiteration

Refresh the vue-chart component in a nuxt.js application

I'm currently working on a nuxt project and I need to incorporate some charts into it. I'm using vue-chartjs as a plugin for this purpose. However, the issue I'm facing is that the chart data is fetched after the chart has already been drawn ...

javascriptvue.jschartsnuxt.jsvue-chartjs

Inform the Rails controller about the view that triggered the action

Two different views are invoking the same controller create action, allowing users to "Track" a product. When the user clicks the "Track" button, an AJAX request is submitted using the remote: true attribute. The JavaScript response should re-render the sp ...

javascriptjqueryruby-on-railsajaxpartial

Ensuring Navigation Elements Remain Aligned in a Single Line

I'm in the process of developing an interactive project that will be showcased on a touch screen. One of its key features is a fixed footer navigation. Currently, I am using floats to position the main navigation elements and within each element, ther ...

htmlcsscss-float

Error: Unable to assign value to property 12 because the object does not support extensibility

I'm facing an issue with my client application as I cannot figure out the error I am encountering. Despite successfully subscribing to a GraphQL subscription and receiving updates, I am struggling to update the TypeScript array named "models:ModelClas ...

javascripttypescriptapollo-clientgraphql-subscriptions

Tips for automatically aligning the camera to a specific point in three.js

Is there a built-in feature in three.js for automatically focusing a camera on a specific point, causing the rest of the environment to blur like in these examples? The XG library code that enables auto focus looks something like this: renderer.dofEnable ...

javascriptthree.jswebgl

Tips on sending variables to a PHP script from a JQuery $(document).ready function

I have a chat application in development. I currently have a functioning JQuery code that calls logs.php every second to refresh the chat. $(document).ready( function(e) { $.ajaxSetup({cache:false}); setInterval(function() { ...

phpjqueryajaxscroll