Enhance dynamically generated HTML using jQuery Mobile

Using jQuery Mobile version 1.2.0

I am dynamically generating HTML using JavaScript ($(selector).html(content)), adding it to the DOM, and then displaying it ($.mobile.changePage()).

After that, I make an AJAX call, retrieve some data, and re-generate the HTML (keeping the parent element, $(selector), the same but changing its content with html(...)).
At this point, the HTML does not have jQM styling applied.

According to the documentation, I should simply invoke the page() function on the parent element, like $(selector).page().

However, other parts of the documentation suggest triggering the create event instead, for example: $(selector).trigger("create").

The issue is that neither of these methods seems to work - the jQM styling is still not being applied.

After examining the jQM source code, I attempted triggering the pagecreate event on the element which actually worked. However, this method is not officially documented, leaving me unsure about its future compatibility with jQM releases.

Additionally, I came across a mention in the documentation stating that calling page() on a page should only be done once..

In any case, is there a clear or standard way to instruct jQM to "enhance" the entire element along with its child elements? Or would it be advisable to continue using the pagecreate event trigger?

Thank you!

javascriptjquery-mobile

Answer №1

If you want to recreate an entire page, you can simply use the following code:

$(selector).trigger("pagecreate");

I provided a similar solution in response to another question here: . You can see an example of page recreation in that answer. Hopefully, this will help solve your issue.

Answer №2

What is the purpose of $(selector).trigger("create");

You can use this method to dynamically add elements to a page before JQM styling is applied during the 'pageshow' event. For instance, you can add a header/footer like this:

$(document).on('pagecreate', "[data-role=page]", function() {

var header = "<div data-role='header'>some header stuff</div>";
 var footer= "<div data-role='footer'>some footer stuff</div>";

$(this).prepend(header);
$(this).append(footer);

$("[data-role=header]").fixedtoolbar({tapToggle: false});
$("[data-role=footer]").fixedtoolbar({tapToggle: false});

});

Ensure that you are using jQuery version 1.7 or above as the on method is required for this functionality.

If you are facing issues with DOM generation and page editing, try loading the page first and then make dynamic changes to the DOM structure.

EDIT Set the reload page option to true

  $.mobile.changePage($(page), {reloadPage: true});

Edit 2

$(selector).children().each(function(){
   $(this).trigger('create');
})

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

toggle switch for numerical input

Whenever the "Qty" radio button is selected, I need to activate an input box that accepts numbers. Conversely, when the "rate" radio button is clicked, I want to disable this input box. This is how I designed it: <input type="radio" class="radioBtn" ...

javascriptjqueryhtml

Utilizing the smallslider feature through jQuery/JavaScript operations

I've recently embarked on the journey of learning JavaScript/jQuery. I've been attempting to incorporate this cool effect, but unfortunately, I'm facing some difficulties with it: My goal is to understand how to execute this effect using Ja ...

javascriptjqueryhtmlcss

Leverage JSON data using props in React JS

Currently, my data is formatted in JSON and successfully populated into props known as foxFooterData. Upon inspecting the console.log result of foxFooterData.data, the following information is visible: I am attempting to retrieve the foxFooterCopyright t ...

javascriptjsonreactjs

Having trouble locating the web element within a div popup while utilizing Node.js and WebdriverIO

I need assistance with a seemingly simple task. I am currently learning webdriverjs and attempted to write a short code to register for an account on the FitBit website at URL: www.fitbit.com/signup. After entering my email and password, a popup appears as ...

javascriptnode.jsseleniumselenium-webdriver

Is it possible to obtain the socket.id of a user immediately upon their connection?

Does anyone know how I can send a personalized message to a user when they connect, without broadcasting it to everyone else? I'd like to use their socket ID with the code io.to(theirSocketID).emit('chat message', 'Welcome');, but ...

javascriptnode.jssocket.io

breezejs: Non-scalar relationship properties cannot be modified (Many-to-many constraint)

Utilizing AngularJS for data-binding has been smooth sailing so far, except for one hiccup I encountered while using a multi-select control. Instead of simply adding or removing an element from the model, it seems to replace it with a new array. This led t ...

javascriptangularjsbreeze

Using Plotly.js within a deleted Vue.js component may result in displaying an incorrect chart

Issue I am facing a problem with deleting one of the components that contains a chart. Even after deleting the component, the chart remains visible. To see an example, check out this jsfiddle: https://jsfiddle.net/m4ywp5fc/4/ Solution Attempted I attem ...

javascriptvue.jsplotly

Modifications made to the process module in one file are not reflected in a different file

It seems that the process module in NodeJS is not global, resulting in changes made to it in one module not reflecting in other modules. To confirm my findings, I wrote a small piece of code. Here is the snippet: server.js import app from "./app.js& ...

javascriptnode.jsexpress

Tips for transferring localstorage values from the view to the controller in order to utilize them as a PHP variable in a separate view

How can I pass the value from local storage as a PHP variable when using location.href in the controller after clicking a button? In the view: echo Html::button('Proceed', [ 'onclick' => " var dataVal = localStorage.g ...

javascriptphpjquery

Looking to display the "loading....." message on a PHP page?

I am working on a PHP webpage where I need to implement the following features: 1. Upon clicking "Say Thanks", it should change to "Done!". 2. Simultaneously, I would like to trigger an action in the indexController. 3. While this action is happening, I wa ...

phpjavascriptajaxzend-frameworkaccordion

showcase every value upon submission in the form with options to edit and delete

Is it possible to display all values submitted in a form with edit and delete buttons? Currently, only one value is being displayed at a time. Whenever a new value is displayed, it replaces the old one. How can this be fixed? You can fin ...

javascriptjquerycsshtml

What is the process for incorporating Material-UI into a JSFiddle project?

I'm having trouble figuring out how to load and use the Material UI script on platforms like JSFiddle or SO's code editor, even though I can add it with NPM. Check out this JSFiddle example <script src="https://unpkg.com/@material-ui/core/um ...

javascriptreactjsmaterial-ui

What is the best way to add multiple lines of text to a webpage using the span element?

Currently, I am developing a game that involves using a map, which consists of multiple lines. My question is whether it is possible to have the span tag cover multiple lines while ensuring that each line ends with a new line character. Below is an exampl ...

javascripthtml

Executing system commands using Groovy is a breeze

One of the scripts I have is a sample.js script that allows me to view files located on the server myHost. It works perfectly: var exec = require('ssh-exec') var v_host = 'myHost' exec('ls -lh', { user: 'username&apo ...

javascriptgroovy

"Execution of the console.log statement occurs following the completion of the request handling

When I have a piece of middleware that responds if no token is found, why does the console.log line still run after the request is responded to? I always believed that the res.json call would "end" the middleware. Any insights on this behavior would be g ...

javascriptnode.jsexpress

Output JSON data from PHP for use in Javascript

Is there a way to effectively convert JSON data from PHP/Laravel into JSON for JavaScript? I have the JSON string from PHP, but it is only rendering as a string. How can I convert it to a JSON object in JavaScript? Take a look at my code below. $('#e ...

javascriptphpjsonlaravel

What steps should be taken to develop a Hybrid Mobile App concept?

We are currently developing our first hybrid mobile application with a monetizable idea in mind. After conducting some research, it seems that to reach our end goal we will need: A Front End UI Framework: options include Ionic or AngularGap (although d ...

javascriptangularjscordovaionic-frameworkloopbackjs

Identifying whether a webpage has integrated Google Analytics

I am working with a node server. I provide a Url in the request and utilize cherio to extract the contents. My current goal is to identify whether the webpage uses Google Analytics. How can I achieve this? request({uri: URL}, function(error, response, bod ...

javascriptnode.jsgoogle-analytics

Wrap the words around to fit a rectangle with a specific ratio, rather than a specific size

Does anyone have a solution for breaking text at word boundaries to perfectly fit a rectangle with a specific approximate ratio, such as 60:40 (width:height)? Please note that this is not just about setting a width limit (e.g. 80 characters or 600px) and ...

c#javaphpjavascriptalgorithm

Enhance the readability and writability of the properties of JavaScript objects

I'm curious if there's a way to make existing properties of JavaScript objects immutable after they've been assigned. Essentially, what I want is to lock in the current properties of an object but still allow new ones to be added. Can exis ...

javascriptnode.js