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

Maintain Open State of Toggle Drop Down Menu

Having an issue with the toggle down menu or list on my webpage. The problem is that the menu is constantly open (the #text_box) when the page loads. My intention was for it to be closed initially, and then open only when the user clicks on the 'Ope ...

javascriptjqueryhtml

Unexpected response: The JQuery AJAX request did not return the expected JSON data

Within my code snippet below, I have successfully obtained an object that, when printed to the console, begins with: {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ,  …} However, up ...

jqueryajax

Unearthing the worth of the closest button that was clicked

I am currently working on a profile management feature where I need to add students to the teacher's database. To achieve this, I am using jQuery and AJAX. However, I am encountering an issue where clicking the "add" button for each student listed on ...

javascriptjqueryhtmlajax

Getting the value of a hidden input field within a div by accessing the event.target that initiated the event in JavaScript

I am working with a set of li elements, each containing specific child elements structured like this: <li class="list"> <!--Parent--> <input type="hidden" id="id" value="3"> <!--Child 1--> <div class="cd-1">....</div ...

javascriptjquery

I need assistance in locating an error; the error message states that $ is not defined and an object is expected

Issue with $ not being defined, object expected.. I am trying to verify if all sets of radio buttons are checked when a button is clicked! Please help. <script type="text/javascript> $(document).on('click', 'form', function () { ...

javascriptjqueryarrays

When scrolling, numerous requests are sent to ajax - how can I consolidate them into a single request for lazy loading?

I encountered a problem where multiple Ajax requests are being sent when I try to call an Ajax function after scrolling. How can I resolve this issue? $(window).scroll(function(){ var element = $('.MainChatList'); var scrolled = false; ...

javascriptjqueryajaxlazy-loading

What could be causing the unexpected gap between the first two elements and the third in my flexbox layout?

I am facing an issue with the layout of my third child element. Instead of appearing below the first two children, it is wrapping around to the bottom of the container. Can anyone explain why this is happening and suggest a solution? Even though I have se ...

htmlcssflexbox

Switching visual content according to dropdown choice

Hey there! I've been working on my HTML file and ran into a little issue. I'm trying to change the image in the div section based on a dropdown selection that modifies the source of the image from an XML file. However, I keep getting an error tha ...

javascriptajaxxml

New HTML output is displaying strangely when using jQuery AJAX

My jQuery AJAX function retrieves new HTML content from a PHP script. The PHP script is functioning correctly and sending back the accurate HTML to jQuery. However, when I utilize the html() function, the displayed HTML is incorrect. To verify the returned ...

jqueryhtmlajax

Creating a duplicate or copy of an element in jQuery using

My dilemma involves a div that consists of text/images and a custom jQuery plugin designed for those images. The plugin simply executes a fadeIn/fadeOut effect every 3 seconds using setInterval. This particular div acts as a "cache" div. When a user wants ...

javascriptjqueryjquery-plugins

Getting rid of any excess space between columns within the same row in Bootstrap following a line

Exploring Bootstrap 3. When you test the following HTML and CSS code, everything appears as expected with no space above 768px. However, upon reaching that breakpoint, the divs start stacking on top of each other, which is fine. But suddenly, a mysterious ...

htmlcsstwitter-bootstrap

Choose the element that is trapped within the div

I've hit a roadblock with this issue that I just can't seem to figure out. I was working on a practice project creating a Netflix-like webpage, and the select element in the footer containing languages is stuck and won't budge. Here's m ...

htmlcss

Determining the height of a jQuery mobile page

Struggling for the last 24 hours to adjust the min-height styling on a jQuery mobile page specifically for mobile safari. Despite trying various methods like inline styles and overriding ui-page styles, I have not been successful in changing the height of ...

jqueryjquery-mobilecss

Clicking does not trigger scrollIntoView to work properly

I'm facing an issue with a button that is supposed to scroll the page down to a specific div when clicked. I implemented a scrollIntoView function in JavaScript and attached it to the button using onClick. Although the onClick event is functioning as ...

javascripthtmljquery

Encountering issues with integrating interactjs 1.7.2 into Angular 8 renderings

Currently facing challenges with importing interactive.js 1.7.2 in Angular 8. I attempted the following installation: npm install interactjs@next I tried various ways to import it, but none seemed to work: import * as interact from 'interactjs'; ...

javascriptnode.jsangulartypescriptsingle-page-application

Place two divs in the middle of another div with equal spacing in between

I am having trouble aligning two divs horizontally within another div while setting a maximum width for each. Additionally, I would like some spacing between the divs to avoid them touching. The following code isn't yielding the desired outcome: HTM ...

htmlcss

How to retrieve JSON data from unidentified objects using JQuery

I have made an AJAX call and received a JSON file as the response: [ { "LINKNAME": "Annual Training", "HITS": 1 }, { "LINKNAME": "In Focus Newsletter", "HITS": 1 }, { "LINKNAME": "NITA (secured)" ...

javascriptjqueryajaxjsonparsing

SQL/PHP challenge: Trouble updating a record

As a newcomer to PHP, I apologize if my question is basic. I am attempting to update a record using PHP / SQL. Despite researching the error message online, I cannot pinpoint the issue within my code: An error occurred: SQLSTATE[HY093]: Invalid paramet ...

phphtmlsqlrecord

Having difficulty including my JavaScript file located in /app/assets/javascripts when using Rails 4 and "//= require_tree ." in application.js

I'm currently attempting to implement a d3.js graph into my Rails 4 application by following a tutorial found on this website. The example application provided on GitHub works perfectly as expected. The issue I am facing is that when I try to recreat ...

javascriptruby-on-railsruby-on-rails-4d3.jsasset-pipeline

Scrolling up or down in an HTML webpage using a script

Seeking a code snippet for my website that will allow me to achieve the following functionality: Upon clicking on text_head1, a list of lines should scroll down. Subsequently, when I click on text_head2, the previous list should scroll up while the new l ...

phpjavascripthtml