Guide on implementing themes to HTML within the append() function

I am currently working on a project where I need to dynamically add HTML tags using JavaScript. However, I have noticed that the themes or styles are not being applied to the newly added elements within the append method. In my HTML file, I am using jQuery Mobile CSS and JS for styling. Below is an excerpt from my JavaScript file:

var callback;

function call(uid,pw) { 
            callback=true;

        $.getJSON("json.jsp" + "?uid=" + uid + "&rdm=" + Math.random(), 
            function(data){ 
                var arr=data.menu.split(",");
                $("#cont").empty();
                $.each( arr, function( key, val ) {
                $( "#cont").append("<ul data-role='listview' data-divider-theme='b' data-inset='true'><li data-theme='c'><a href='#page1' data-transition='slide'>" + val + "</a></li></ul>");
                });
                callback=false;
                }      
        );
    }
javascriptjqueryhtmlcssjquery-mobile

Answer №1

Here's a suggestion you can consider:

if ($('#cont').hasClass('ui-listview')) {
   $('#cont').listview('refresh');
} else {
   $('#cont').trigger('create');
}

Answer №2

let responseReceived;

function fetchData(userId, password) { 
    responseReceived = true;
    $.getJSON("data.json" + "?uid=" + userId + "&rdm=" + Math.random(), 
        function(data){ 
            let dataArray = data.menu.split(",");
            $("#content").empty();
            $.each( dataArray, function( key, value ) {
                $( "#content").append("<ul data-role='listview' data-divider-theme='b' data-inset='true'><li data-theme='c'><a href='#page1' data-transition='slide'>" + value + "</a></li></ul>");
            });
            $('#content').trigger('create');
            $('[data-role="listview"]').listview('refresh');
            responseReceived = false;
        }      
    );
}

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

Attempting to align text around an image within Bootstrap 4

I'm struggling to wrap text around my image at approximately 1355px. I attempted using float-left on both the div container and the img tag, but nothing seems to be working. Could it be due to the column setup I have in place? Should I perhaps add an ...

htmlcssbootstrap-4

The absence of underlines for <a href> and <u> is causing an issue

Below is a snippet of code that I am working with: echo "<form> <div id=\"error\"align=\"center\">"; echo "You've either entered the incorrect <b>username</b> or incorrect <b>passwor ...

htmlcss

Error message found: "Uncaught TypeError: e[n] is undefined while setting up redux store in a reactjs application

Delving into the world of Redux for the first time, I decided to tackle the Todo List example from the official redux.js.org website. After testing the code, everything seemed to be working fine with the redux store initialized only with the reducer as a p ...

javascriptreactjsreduxreact-redux

I must determine whether the contents of an array exceed zero

THE SUMMARY: I have three value numbers for an array. If the total addition of the array's elements is greater than 0, I need to display "el funcionamiento no es infinito", otherwise "es infinito". It seems that it's not working because I belie ...

javascriptarraysobject

NextJS does not support the rendering of the map function

Currently, I am getting acquainted with NextJS by creating a basic blog. I have successfully passed the data through props and can see it logged in the console within the map function. However, I am facing an issue where the HTML content does not display i ...

javascriptreactjsnext.js

Unable to access npm run build on localhost

I have developed a web application using react and node.js, and now I want to test it with a production build. After running npm run build in the app directory, I successfully created a build folder. However, when trying to run the application using local ...

javascriptnode.jsreactjsnpm

Rewrite: "Rewriting URL POST requests in Node.js

Within my JavaScript file, I have this function: exports.authentication = function(req, res) { // .. // user validation // .. res.redirect('/login'); }; I'm looking to modify all POST requests to a different path, such as / ...

javascriptnode.jsurlurl-rewriting

How can I stop TypeScript from causing my builds to fail in Next.js?

Encountering numerous type errors when executing yarn next build, such as: Type error: Property 'href' does not exist on type '{ name: string; }'. This issue leads to the failure of my build process. Is there a specific command I can ...

javascriptreactjstypescriptnext.js

Utilizing JavaScript to dynamically alter an image based on selected dropdown option

I am currently facing an issue with my code where the selected image is not changing when I choose an option from the dropdown list. There are a total of 5 images, but for some reason, they are not displaying correctly. Here is the snippet of my code; < ...

javascripthtml

Open a separate window by clicking on an image using JQuery

I've been trying to figure out how to open an image in a new tab when the user clicks on the thumbnail, but none of the solutions I've attempted seem to be working for me. Here is the jQuery code I have tried: $('#imagelink').click(fu ...

jqueryonclick

PHP Error: AJAX request for URL failed due to incorrect address

While migrating my application to a new server, I have encountered some issues. The PHP version is 5.5.34 and the Mac OSX Apache version is 2.4. The Laravel version being used is 4.2. Although I am able to get a grid, my browser is generating URL-related ...

phpjqueryajaxapache

Using jQuery to retrieve the content of a span element by its class name

Is there a way to retrieve the value of a span using just the class name? There is only one matching span in the document. My attempt with $('span.foo').text(); did not work. Any suggestions on how to accomplish this? ...

jqueryhtmlclassname

What is the best way to extract all ID, Name values, and locations from my JSON object and store them in an

I am working with a JSON object named 'tabledata' array. Let's say I want to iterate through all the objects inside it and extract the ID values, so the output would be 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. I also need to access other key-value pai ...

javascriptjson

Transition from the previous image to the new one with a fading effect to enhance list item navigation

I've been working on implementing a sprite image for each list item (home, services, and contact) in my project. Using CSS, I've managed to move the position on hover successfully. However, I now want to add a fade effect to the transition instea ...

javascriptjqueryhtmlcss

Transform specific data binding values into JSON format using Knockout.js

Just dipping my toes into the world of knockoutjs, I've got this viewmodel set up: var Testing = function(){ this.Username = ko.observable(""); this.Password = ko.observable(""); this.email = ko.observable(""); } I'm tasked with ...

javascriptjsonknockout.js

Vanishing essence

http://jsfiddle.net/ddGHz/1004/ //html <div id = "anglereturn"/> <div class="box"></div> //js, jquery var box=$(".box"); var boxCenter=[box.offset().left+box.width()/2, box.offset().top+box.height()/2]; $(document).mousemove(function ...

jqueryhtmlcss

Nested setInterval in JavaScript refers to the practice of nesting

I am attempting to create nested timed code using setInterval. However, my initial approach does not produce any response from Chrome and Firefox: setInterval(function() { console.log('1'); setInterval(function(){ console.log(& ...

javascriptjquery

Building an HTML Form for Requests

Having some trouble creating an HTML form, particularly with resizing the Fieldset and legend elements. As a novice programmer, I am practicing building HTML forms. My goal is to have the form adjust its size based on the window without displacing the cont ...

htmlcssformshtml-table

Embedding a table inside a Bootstrap popover

I'm struggling with adding a table inside a Bootstrap popover. When I click on it, the table doesn't show up. This is my first time trying to insert HTML into a popover, so I don't know the correct way to do it. Any help would be appreciated ...

javascripttwitter-bootstrappopover

Halt the Bootstrap carousel while entering text in a textarea

Is it possible to achieve this? I think so. I have created a carousel with a form inside. The form includes a textarea and a submit button. Currently, the slider does not slide if the mouse pointer is inside it, which is good. However, if the pointer is o ...

javascriptjqueryhtmltwitter-bootstrap