JQuery Mobile: Adding fresh, dynamic content - CSS fails to take effect

I've encountered this issue before, but I'm still struggling to resolve it. When adding dynamic content to a page (specifically a list-view), the CSS seems to disappear once the content is added. I've tried using the trigger("create") function as suggested, but the CSS styles still don't apply.

$('#MyClubsListDiv').append('<ul id=\"MyClubsList\" data-role=\"listview\"></ul>').trigger("create");

for (var i=0; i<MyClubsReply.length; i++) 
{
    addClub('#MyClubsList',MyClubsReply[i].Name,MyClubsReply[i].LogoImg,MyClubsReply[i].LastUpdate);
    $('#MyClubsListDiv').trigger("create");
}


function addClub(section,clubName,logoFile,LastUpdate)
{
    $(section).append('<li class=\"ClubListItem\">' +
            '<a href=\"#ClubPage\" data-transition=\"slide\">' +
                '<img src=\"' + PiccoloServer + 'ClubLogos/' + logoFile + '\" class=\"listview-logo-thumb\" />' +
                '<div class=\"ClubListContent\">' +
                    '<h1 class=\"ClubListH1\">' + clubName + '</h1>' +
                    '<p >20 Offers Available</p>    ' +
                '</div>' +
                '<p class=\"ui-li-count\">25d</p>' +                    
            '</a>' +
        '</li>').trigger("create");
}

"MyClubsReply" in this case refers to a JSON object.

Can anyone pinpoint what I might be doing incorrectly? Any advice would be greatly appreciated!

javascriptjquerycssjquery-mobile

Answer №1

To help you better understand, I have put together this jsfiddle.

When building the UL Listview, remember to use trigger("create"). However, each time you add a new list item, make sure to use listview("refresh").

Visit the jsfiddle here

<div id="MyClubsListDiv"></div>
<button id="addClubBtn">Add New Club</button>

$('#MyClubsListDiv').append('<ul id=\"MyClubsList\" data-role=\"listview\"></ul>')
    .trigger("create");

$("#addClubBtn").on("click", function () {
    $("#MyClubsList").append(
        '<li class=\"ClubListItem\">' +
        '<a href=\"#ClubPage\" data-transition=\"slide\">' +
        '<img src=\"http://si0.twimg.com/profile_images/2366293550/Club_logo_normal.png\" class=\"listview-logo-thumb\" />' +
        '<div class=\"ClubListContent\">' +
        '<h1 class=\"ClubListH1\">Major Club</h1>' +
        '<p>20 Offers Available</p>' +
        '</div>' +
        '<p class=\"ui-li-count\">25d</p>' +
        '</a>' +
        '</li>'
    ).listview("refresh");
});

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

Showing dynamic icons in Angular 2 applications

My goal is to dynamically load a part of my website, specifically by using icon classes defined in the interface like this: import { OpaqueToken } from "@angular/core"; import {IAppConfig} from './app.interface' export let APP_CONFIG = new Opaq ...

javascriptangulartypescriptangular2-routing

Troubleshooting Problems with jQuery Cloning

Could someone take a look at this and point out what's wrong? I can't seem to figure it out: function retrieveStates(){ var stateData; $.getJSON("fetchStateData.php", function(data) { stateData = data; var lastGroup = ""; $("#group ...

jqueryclone

JavaScript code that only runs during the initial iteration of a loop

I am facing an issue while trying to develop a stopwatch for multiple users using PHP and JavaScript, with MySQL database for user data storage. The problem is that the stopwatch starts when I click on one user but does not work for others. I have attempte ...

javascriptphpstopwatch

In MUI v5, the Autocomplete default value is not set

When I try to use the defaultValue prop in the Autocomplete component of MUI v5, the value always ends up being undefined. This is a snippet from my code: const vehicles = [ { name: "Toyota", model: "Camry" }, { name: "Ford&qu ...

javascriptreactjsmaterial-uiformikformik-material-ui

Understanding the functionality of sessions in CodeIgniter when using AJAX

I am experiencing an issue with the Session in my code. It only works when the page is refreshed. I have a controller called ravi and the view named myview. Here is the code snippet: <?php class Ravi extends CI_Controller { public funct ...

phpjqueryhtmlajaxcodeigniter

Creating a custom Chrome extension with the ability to modify the pop-up window instead of the web page

Is there a way to modify the content inside my extension's pop-up without affecting the web page being viewed by the user? Also, how can I ensure that my dropdown list functions correctly? I have two dropdown lists where selecting an option from the ...

javascriptjqueryhtmlgoogle-chromegoogle-chrome-extension

Design your own unique HTML webpage

My goal is to create a screen using divs that includes a big div which aligns with the month of October. This big div should be movable across the months, and when it stacks on a specific month, a form should be submitted. I am seeking assistance with po ...

htmlcss

Tips for evenly distributing list elements in HTML without using whitespace

After reading the article on flexbox techniques without actually using flexbox, I attempted to implement "space-between" in my code: ul { margin: 0; padding: 0; text-align: justify; } ul:after { content: ""; display:inline-block; width:100%; ...

htmlcss

What are the dimensions for maximum picture width and height in the Bootstrap 4 grid class col-4? Additionally, can you provide some tips on minimizing image bl

Hey there! I am trying to arrange 3 screenshots in 3 separate columns in one row, resembling steps 1, 2, and 3. I want them all to have the same size. Can you advise on the maximum width and height I should use before they start getting stretched or comp ...

htmlcssbootstrap-4

Load texture using ImageUtils with callback in Canvas Renderer

Currently, I am utilizing three.js revision 53. While attempting to load a texture in Canvas Renderer (specifically on Win7) and incorporating a callback for the onLoad event, the texture fails to display. Surprisingly enough, removing the callback functi ...

javascriptcanvaswebglthree.js

Troubleshooting Django and AJAX: Issue with rendering new data on subsequent jQuery AJAX calls

Despite setting the cache property to false on the AJAX request, I experienced no change. I am currently working on a JS calendar that displays a popup overlay containing another calendar when you click on any day. This second calendar is loaded via ajax a ...

jquerydjangoajax

The import of a package installed from git is not possible with Webpack

After forking a package in git and making my changes, I proceeded to install it using the following command in my terminal: npm install --save git+https://github.com/hayk94/ddp.js.git Once installed, I attempted to import the package in my code with this ...

javascriptgitnpmwebpack

csslimit overflow display only left side

I am struggling to implement a drag and drop feature resembling a shopping cart. Unfortunately, the content within the box is concealing the div I want to drag when moving out of the box. Is there a method to display only the content on the left side? Che ...

jquerycssoverflow

Encountering a malfunction while executing an npm command specified in the package.json file

Currently, I am following a tutorial on Node, React, and Express on Udemy. In the tutorial, when I execute the command npm run data:import I encounter the following error: undefined npm ERR! code ELIFECYCLE npm ERR! errno 1 ...

javascriptnode.jsreactjsnpm

Troubles arise when the left column shifts to the top with widths larger than 1440

Having a WordPress site with the Divi theme, I encounter an issue where the menu on the left-hand side is being displayed above the page content when the screen width exceeds around 1440 pixels. This problem persists on every page that contains this colum ...

csswordpressresolution

Passing a value via jQuery Ajax on the same PHP page

I'm a little confused when trying to send a value on the same page. <script> $("select[name='sweets']").change(function () { var str = ""; $("select[name='sweets'] option:selected").each(function () { ...

phpjqueryajax

Updating the src of an iframe and adding an onclick event to a link using JavaScript

Looking to design a page that accommodates both login and sign up functionalities by dynamically updating the src of an iframe. In the navigation bar, there is: <li id="change"><a onclick="sign()">Sign up</a></li> And within the ...

javascripthtmlfunction

The drawback of using a datepicker within an Angular input field

When attempting to open the Angular Material datepicker, it was appearing above the input field. How can I make it open below the input field instead? <mat-form-field appearance="outline" class="w-100 date-class"> < ...

cssangularangular-materialmat-datepickermat-form-field

Is it really necessary to import React from 'react' in the index.js file when importing react is no longer required?

Currently diving into the world of React.js. I recently found out that after version 17, importing React is no longer necessary. My current React version is v18.2.0. Here's the code snippet in question: // import React from 'react'; import ...

javascriptreactjsimport

What are the steps for implementing webpack 5 configurations in Next.js?

I can't seem to figure out how to properly add experiments to my webpack config. Here is my current environment: [email protected] [email protected] To set up, I started a new Next.js app using the command npx create-next-app blog Accord ...

javascriptwebpacknext.js