leveraging jQuery mobile for asynchronous requests

I've been attempting to print a jQuery mobile element using ajax, but I'm running into an issue where the result isn't being encoded as jQuery mobile is intended to do.
Below is a simplified excerpt of the JavaScript code responsible for this functionality:

   <script type="text/javascript">
       function changePage(task) {
           var objText = "";
           $.ajax({
               type: "POST",
               url: "DataFetch.aspx/FetchData",
               data: '{id: ' + <%=Session["loggedID"] %> + ', task: ' + task + ' }',
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function (response) {
                   var obj = JSON.parse(response.d);
                   if (task == 2)
                   {
                       objText += "<div data-role='collapsible'><h3>click me</h3><p>text</p></div>";
                   }
                   document.getElementById('content' + task).innerHTML = objText;
               }
           });

       }

</script>

Does anyone have suggestions on how I can resolve this issue? (When I manually insert the HTML elements into the page without using ajax functions, it works fine, but I require it to work with json)

Answer №1

Consider updating the following code snippet:

document.getElementById('content' + task).innerHTML = objText;

to

$('#content' + task).HTML(objText).enhanceWithin();

By including the enhanceWithin() function, you are instructing jQM to improve the new content loaded via AJAX. For more information on enhanceWithin(), refer to:

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

Could use some assistance in developing a custom jQuery code

Assistance Needed with jQuery Script Creation <div>Base List</div> <div id="baseSection"> <ul class="selectable"> <li id="a">1</li> <li id="b">2</li> <li id="c">3</li> ...

Unusual marking on the navigation bar

Currently, I am making updates to a website that was created by a previous employee long before I joined the team. One of the requested changes is to eliminate the orange box surrounding the navigation links. The navigation appears to be generated using Ja ...

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects: <div class="form-inline" v-for="(genre, index) in genreArray" :key="index" > ...

I can't figure out why I keep getting the error message saying that $ is not

Looking to execute a PHP file using AJAX, I attempted the following: <html> <script type="text/javascript"> setInterval(function(){ test(); },3000); function test(){ $.ajax({ type: "POST", url: "GetMachineDetail.php", data: ...

What steps can be taken to have Eslint/Prettier report errors and warnings within a CI environment?

Recently, I encountered an issue with my Vue app where I am using Eslint with Prettier. Even though I have set up a Github action to check the code style, running npm run lint -- --no-fix only logs the warnings and does not cause the workflow to fail. I r ...

Can users arrange a lineup of choices?

As a beginner, I have a task that seems pretty simple to others but not so much for me. I need to create a feature where a client can order 10 different services in the order they prefer. The idea is to use a dropdown menu or checkboxes to allow the user ...

I am attempting to get a jquery plugin to function properly on my Windows 7 Internet Explorer IE7 browser. The plugin in question can be found at http://jvectormap.owl-hollow

I'm encountering some strange issues with my Internet Explorer IE7 browser on Windows 7. The jquery plugin I am attempting to use can be found at . Unfortunately, this plugin is not functioning properly on Internet Explorer IE7 on Windows 7, but it ru ...

Creating a custom table layout with JavaScript and jQuery

I've been grappling with a project for some time now, and I'm stuck on this particular issue. In my database, I have a table structured like this: ProjectName UserName SpentDays FirstProject User1 10 SecondProject User1 5 SecondProjec ...

Tips for hiding the calendar icon once a form has been submitted

Below is the HTML code snippet for the date field. <asp:TextBox ID="txtExpiryDate" runat="server" Width="80px" MaxLength="10" CssClass="fromDate" /> And here is the HTML code snippet for the Submit button. <asp:Button ID="cmdSubmit" runat=" ...

`Nextjs customizes the position of locales`

Currently implementing i18n translation in my project, the default root appears as follows: https://example.com/en/business/transaction Is it possible to customize the root to appear as: https://example.com/business/en/transacation Thank you. ...

Verify optional chaining support in Angular app for browsers

Within my Angular application, I am looking to verify if a client's browser supports optional chaining (es2020) in order to load a library that contains both a modern ES version and a legacy one. The issue arises when the Angular compiler (which I su ...

Issue occurred while executing maildev - logger.info(`Shutdown signal received, beginning shutdown now...`)

After rebooting my machine, I encountered an error when running the maildev command in the terminal. Despite uninstalling and reinstalling the program, the issue persists. Below is the complete error message. Appreciate any help in solving this problem. ...

Disabling form submission when pressing the enter key

Is there a way to prevent a submit action from occurring when the enter key is pressed within an ASP:TextBox element that triggers an asyncpostback upon text change? Instead, I would like it to click on another button. The Javascript function I am using wo ...

Maintain the webpage content even after submitting a form with a file attachment on the same page

I am in the process of creating a secure webpage exclusively for our members. This page will allow members to access their personal data stored in the database and upload files as needed. One concern I have is how to return to the member page with all the ...

yii ajaxurl customization for table sorting

Here is some code I have: ajaxUrl : '<?php echo Yii::app()->createUrl("abc/def");?>&page={page}&size={size}&{sortList:col}&{filterList:fcol} ', Referenced from: http://mottie.github.io/tablesorter/docs/example-pager-aj ...

Can README docs be prioritized to appear before all other stories in Storybook navigation?

Organizing my Storybook stories is important to me. I like to nest all my stories under a “Docs” header, with each component having a README mdx file followed by its stories. My preferred order is to always have the README appear first in the navigatio ...

Problem with TypeScript involving parameter destructuring and null coalescing

When using parameter destructuring with null coalescing in TypeScript, there seems to be an issue with the optional name attribute. I prefer not to modify the original code like this: const name = data?.resource?.name ?? [] just to appease TypeScript. How ...

retrieve information in the form of an array by making an AJAX request with the

Looking for a solution on how to send an array of strings as data from a PHP file? Check out the code snippet below: function getMods(){ var modsData; $.ajax({ type: "POST", url: "init.php", data: { 'id': getID()} ...

Fetching values from a JSON array in Java

In my Java code, I am working with a JSON array. Below is the structure of my JSON object: jsonString: {"user1": [ { "id":"11", "address":"Roshan shore", ...

Photoswipe using identical source code, yet the output is malfunctioning

Having an issue with my code that refreshes the content of a ul element. Initially, it works fine by directly loading the ul content, but I am constantly creating new content every 10 seconds to provide users with fresh updates. Even though the source co ...