What is the best way to update the CSS of a DIV that has been populated with external content in JQuery Mobile?

After reading through all the comments, none of the suggested solutions seem to do the trick for me. My issue involves a piece of Jquery code that retrieves content from an external PHP script and updates a div in my application. However, once the new data is loaded, it lacks the Jquery Mobile styling. I've tried using .page() and trigger("refresh"), but nothing seems to refresh the entire div successfully. Here's the relevant part of my code:

function getcontent(pg) {
   $("xyz").html("");
   $.get("http://myscript.php", function(data) {
      $("#xyz").html(data);
      $("#xyz").page();
}

The HTML in question:

<div id="xyz"></div>

I'm really struggling to find a solution here. I did manage to make some progress by removing the wrapper div ("xyz") and refreshing individual elements like listviews and buttons, but that approach feels quite clumsy.

Answer №1

If you have a page with the ID #xyz, such as #mypage, execute the following:

$('#mypage').trigger('pagecreate');

Answer №2

By utilizing the .page element on either the list or div containing the refresh, I was able to achieve desired results.

$('ul.sessions-list *').page();

This action effectively refreshes all content within my sessions-list that was externally loaded, while also fixing any CSS discrepancies.

Answer №3

Give this a shot:

$("#page_id").trigger("create")

Implement this code on the receiving page to add content successfully.

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

Is there a way to manually change the field color upon approval in AngularJS?

Within my application that utilizes the MEAN stack, I am using AngularJS as the front-end technology. How can I manually change the color representation of a tolerance value to 159.06 in a table? Check out my Plunker for more details. Please refer to m ...

Is it more efficient to pass session variables through an ajax function, or should I access them directly within the script?

I am currently working on a page that utilizes an ajax function to retrieve updates from another page. The function requires the user's id, which is obtained from a session variable, to fetch any new updates. These updates are then displayed in a spec ...

Upon clicking the navbar dropdown item, it shifts its position

I am currently working on setting up a navigation bar with multiple items aligned to the right side. However, I have encountered an issue where clicking on the "notification" icon causes the other icons in the navbar to move instead of remaining fixed in p ...

The issue of background repetition persists exclusively on Chrome, even after implementing the 'no-repeat' property

I'm struggling to figure out why my background keeps repeating in CSS even though I've used the no-repeat property. I want to avoid using the background-cover option as it distorts the image, and this issue seems to be specific to Chrome. Check ...

Togglebox CSS is set to hide elements initially

I am having issues with Lightbox2 as it is not functioning properly when I try to click on the image. Upon inspecting the Developer Console in Chrome, I noticed that the overlay and image are being added to the DOM, but the display property is set to none ...

Description of Images in a ClickWould you like to learn

Creating Modal Images with Descriptions I stumbled upon some code here for generating multiple Modal Images. However, I'm having trouble figuring out how to include description text when the modal opens up. The code in the second-to-last answer on th ...

Error message: Attempting to call the row() function on a variable that is not an object while trying to

Currently, I am using CodeIgniter for my application development and incorporating jQuery to transmit JSON data. Below is the code snippet: public function updateRequest($id_request, $jenis_request, $keluhan ){ $data= array( 'jenis_r ...

Showing a multi-column layout for an HTML ul list

I have an automatic nested list structure that looks like this <ul> <li>AAA</li> <li>BBB <ul> <li>111 <ul> <li>XXX</li> </ul> </li> <l ...

One effective way to create a dynamic and engaging multi-step process using a combination of AJAX, jQuery

In PHP, the steps are counted and stored in a session to prevent going back to the beginning when updating or refreshing the page. The value is retrieved using the variable $step. <?php session_start(); if ( !empty($_SESSION['datos_form' ...

The correct method for including a CSS file in a Vue.js application

How can external CSS files be properly added in a Vue.js Application? I have come across multiple methods for adding CSS files in a Vue.js Application. One suggestion is to use the following code: <link rel="stylesheet" type="text/css" href="/static/b ...

Is there a way to efficiently load POST data into SimpleXML?

I am facing a challenge in posting XML data from a textarea input to PHP for parsing and generating an output table. Despite trying various methods, none seem to be yielding results. My current approach is as follows: jQuery('#btnRegistrarXML' ...

Using jQuery and AJAX to dynamically pass a variable into the URL parameter in dynamic HTML pages

By utilizing jQuery, I am dynamically updating the content of a div with a form that consists of two textboxes and a button. Upon clicking this button, ajax is employed to retrieve results from a public webservice based on the data gathered from the textbo ...

Javascript code is not functioning properly (library missing?)

I recently upgraded my Bootply.com account in order to download a snippet that I believed would work perfectly. However, it seems like there's something missing here. Can anyone help me figure out what's wrong with the original Bootply.com snippe ...

Tips for running a function in CodeBehind triggered by jQuery?

In my Aspx code, I have the following: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="WebSite.View.Index" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> ...

Alter the background color of a table cell in Angular HTML depending on a boolean value

Attempting to use Angular ng-class to set the background color of a table cell. I'm referencing code snippets from these resources: Angular: How to change the color of cell table if condition is true Change HTML table cell background color using ...

When I bind the submit event to my form, the form is automatically submitted using the default handler

This issue occurs in both IE and Firefox, but not in Chrome. Here is the form structure: <form id="enviaEmail" method="post"> <label for="nombre">Nombre</label> <input id="nombre" type="text" name="nom ...

Designing a dynamic 2x2 layout to maximize screen space

I can't seem to figure out how to tackle a seemingly easy problem. I need to create a 2x2 box layout that fills the whole screen and then switches to a single column at a certain width. The tricky part for me isn't making it break down, but rath ...

Strange occurrence with getBoundingClientRect() function and F5 refresh, what could be causing this odd behavior?

Apologies for the lengthy code, I have stripped it down multiple times to make it stand-alone. Codepen won't be helpful in this case. You can simply copy and paste the code into an HTML file to see how it behaves. <!DOCTYPE html> <html> &l ...

Random Image Generator in Javascript with Links

I am attempting to load one image at a time along with its corresponding link. My goal is to display the image in a div with an ID of 'ads'. Here is the code I have so far, but I am not proficient enough in JavaScript to achieve my desired outcom ...

The jQuery .load() function does not seem to be functioning properly on secure HTTPS connections

After implementing an SSL certificate through Cloudflare on my website, I encountered an issue where a specific function returned an error code 0 and failed to load the URL content. How can I resolve this issue? $(function () { EnderReact(); }); functi ...