Programmatically add jQuery (mobile) CSS classes after the rendering process is complete

JQuery Mobile has the capability to automatically apply CSS and HTML for elements on the page based on the presence of specific data- attributes when the page initially loads.

However, if new HTML content is dynamically loaded onto the page after the JQuery Mobile rendering has occurred, this new content may not receive the necessary CSS classes.

The question arises: Is it possible to selectively call upon the Javascript to apply the rendering to only the new HTML content?

BEFORE

<div id="someDiv">
    <ul data-role="listview" data-theme="b" data-inset="true">          
            <li>
                <a href="#">
                    <h3>
                        Some title
                    </h3>
                    <p>
                        Some text
                    </p>
                </a>
            </li>
    </ul>
</div>

AFTER

<div id="someDiv">
    <ul data-role="listview" data-theme="b" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">          
        <li data-theme="b" class="ui-btn ui-btn-icon-right ui-li ui-corner-top ui-corner-bottom ui-btn-up-b">
            <div class="ui-btn-inner ui-li ui-corner-top ui-corner-bottom">
                <div class="ui-btn-text">
                    <a href="#" class="ui-link-inherit">
                        <h3 class="ui-li-heading">
                            Some title
                        </h3>
                        <p class="ui-li-desc">
                            Some text
                        </p>
                    </a>
                </div>
                <span class="ui-icon ui-icon-arrow-r"></span>
            </div>
        </li>
    </ul>
</div>
jquerycssrenderingwidgetjquery-mobile

Answer №1

Utilize the .page() method in conjunction with your AJAX request

For instance:

var newValue = '123';

function loadPage(page){    
    $.ajax({
        url: 'page.php?parm='+newValue,
        type: 'POST',
        error : function (){ document.title='error'; },
        success: function (data) {                  
            $('#placeholder').html(data).page();
        }
    });
    // Automatically scrolls to the top of the page
    $.mobile.silentScroll(0);
}

HTML Section

<div name="placeholder" id="placeholder"><!-- This serves as the placeholder --></div>

Answer №2

After a thorough inspection of jquery.mobile-1.0a4.1.js and delving into this informative article on widget usage, the solution became clear:

There is already an existing mobile.listview widget that handles the rendering for listviews.

$.widget( "mobile.listview", $.mobile.widget, {

});

To implement this in the html directly, make sure to target the ul.

$("div#someDiv ul").listview();

Here's a complete example:

function hijack(form) {
    $("div#someDiv").html("");
    $("div#someDiv").addClass('loading');

    $.ajax({
        url: form.action,
        type: form.method,
        dataType: "html",
        data: $(form).serialize(),
        success: function(data) {
            $("div#someDiv").removeClass('loading');
            $("div#someDiv").html(data);

            //apply rendering of jquery mobile styles via listview widget
            $("div#someDiv ul").listview();
        }
    });
}

Answer №3

If you need a way to bind events dynamically, the .live() method from jQuery's API (http://api.jquery.com/live/) could be a useful solution for your situation.

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

Tips for adjusting your Navbar from transparent to solid based on screen size changes instead of scrolling

I am seeking assistance in creating a responsive Navbar that transitions from transparent to solid when the screen size changes, such as on a smartphone. I want the Navbar to remain fixed at the top of the page and not move down as I scroll. I tried adding ...

htmlcssbootstrap-4

What is the method to show a tag while dragging content in html5?

How can I make a div element track the mouse movement while dragging an item on my website? I need the div to only appear when the user drags content that has been enabled for dragging. I'm looking for a straightforward method to customize the appea ...

jqueryhtmlcssdrag-and-drop

Jquery cascading menu

I'm currently experiencing difficulties in creating dropdown menus using jquery and css. Below is my HTML code: <nav class="topNav"> <ul> <li> <a href="#menu" class="menu-toggle"><img src ...

javascriptjquerycsshtmluser-interface

Navigate to a different page using a sliding transition

Currently, I am working on a project using jquery-mobile where I need to redirect to another page after clicking on an image with a delay. This is what I have done so far: setTimeout(function(){ window.location.href = "myPage.html"; }, 1000); While t ...

jqueryhtmljquery-mobile

Receiving a 500 status code upon converting a SqlDataReader into Json format

Getting a status 500 error and not sure where I am going wrong. When I click on the 'Getcustomers' button, the 'GetCustomers' method is called which returns JSON. Script: <script> var MyApp = angular.module("MyApp", []); ...

javascriptjqueryasp.net-mvcangularjsrazor

Jquery Image Slider showcasing a variety of image sizes

I am in need of creating an image slider that includes images of varying heights. My goal is to ensure there are no gaps between the images. Should any image be smaller, it should be displayed with suitable padding or margin. The image s ...

jquery

The compilation process in my gulpfile is not successful

I have spent the past few days trying to figure out how to solve my problem but haven't had any luck. My gulpfile is not compiling my css even though it should be. Originally, my gulpfile was set up for sass files and everything worked perfectly. Howe ...

csssassgulp

What advantages does avoiding the use of float:right offer?

On my website, I have two divs - one on the left side and the other on the right side. However, the client has requested that I do not use float:right. Instead, I have opted for margin-left. What are the advantages of avoiding float:right? Is it better to ...

htmlcsscss-float

HTML listbox with a hierarchical structure that mimics the folding levels of a file explorer

Seeking a method to transform an HTML listbox into hierarchical content with unlimited levels (const > 1 would suffice). The hierarchy levels should be collapsible similar to a file explorer view. It is important that the behavior of the HTML listbox is ...

jqueryhtmlexplorerhierarchical

Ways to streamline your Jquery/Ajax code: Eliminate repetitive sections

Seeking guidance on optimizing my Jquery/Ajax code that involves sending GET requests. I've noticed there's quite a bit of repetition. How can I streamline this code effectively? $(".add_to_cart").click(function() { product_slug = $(this).at ...

javascriptjqueryajax

Unable to apply styling to table cells that are dynamically added using JQuery within an Angular

Currently working on setting up a form using Angular. Within the hotel.view.html file, there is a table that looks like this: <table id="rooms"> <tr> <td>Room Type</td><td>Beds</td><td>Q.ty</td ...

jquerycssangular

encountering an issue with the map function being undefined

I am currently working on a todo list and I want to be able to delete data stored in an array using the filter method. However, I am encountering an error with my code. Here is the snippet: const onDelete = (id) => { setaddItem((prevData) => { ...

htmlcssreactjs

Changing camera view in Three.js upon clicking an HTML button

My goal is to create a straightforward animation using three.js, HTML, and CSS. The concept involves generating multiple BoxGeometries within a for loop and adjusting the rotation of each box incrementally with each iteration. I have successfully achieved ...

javascripthtmlcssthree.js

Creating dual modes (night/day) for your AngularJS application

Currently, I am in the process of developing a project with Angularjs and facing an obstacle with animations. My goal is to implement a feature in my application that allows it to display in two different modes - night mode and day mode. I have come ac ...

javascriptcssangularjssassangular-ui-router

Creating a CSS animation to mimic the fading in and out effect of the Mac scrollbar when scrolling begins

My journey begins with this: *::-webkit-scrollbar { } *::-webkit-scrollbar-button { } *::-webkit-scrollbar-track { } *::-webkit-scrollbar-track-piece { } *::-webkit-scrollbar-thumb:active { width: 6px; background-color: red; } *::-webkit-scr ...

javascripthtmlcsswebkitscrollbar

Items expand and move seamlessly between two columns

My website features a Bootstrap accordion that I have organized into a two-column layout using the following CSS: #accordion { column-count: 2; } .card { margin: 0px 20px 20px 20px; break-inside: avoid-column; -webkit-column-break-inside: avoid; ...

javascriptjqueryhtmlcssbootstrap-4

Use of absolute positioning resulted in the disappearance of the element

Can anyone assist with resolving the issue I am encountering? I currently have three nested divs as follows: <div class="section"> <div class="parent"> <div class="child"> Some random text. </div> </div> </div> To adj ...

javascripthtmlcss

"Server request with ajax did not yield a response in JSON format

http://jsfiddle.net/0cp2v9od/ Can anyone help me figure out what's wrong with my code? I'm unable to see my data in console.log, even though the network tab in Chrome shows that my data has been successfully retrieved. Here is my code snippet: ...

javascriptjqueryajaxjson

Steps for serializing HTML tags contained within a Form along with the Form itself

I am currently working on a form that allows users to input information for publication on the site. The form utilizes a combination of inline editing with contenteditable=true on editable HTML tags, as well as standard form inputs like selects and text fi ...

jqueryajaxserializationcontenteditableinline-editing

Customizing the appearance of ASP.NET file uploader for various sizes

Has anyone successfully changed the width of the ASP.NET file uploader? I attempted by adding the CssClass, but it did not work. Is there an alternative method to adjust the width? Thanks in advance. ...

asp.nethtmlfile-uploadcss