How to effectively utilize JSON responses with jQuery Mobile?

I've been facing an issue with working on my JSON result in JavaScript. Can anyone provide some insight?

Even though the JSON call returns a success status code (200) and I can view the data in Firebug, no alert is being displayed.


$(document).on('pageinit', function(event){

   ...

   $('.link').on('click', function (event) {

          var parm = $(this).attr("data-parm");
          var url = 'http://****:8000/service?parameter=' + parm;

          $.getJSON(url, function (data) {
             var result = $.parseJSON(data);
             alert(result[1].emnam);
             parse(result);
          });
   });

});

function parse( result ) {
      alert( 'parse function' );
}

In the browser (using Firebug or Chrome Dev Tools), this is how my JSON result appears:

{success: "true", 
msg: "Data retrieved", 
data: [
{pernr: "00001032", emnam: "Michaela"}, 
{pernr: "00001016", emnam: "Mike"},
{pernr: "00001024", emnam: "Frank"}
]}

Ultimately, I am aiming to dynamically append the listview into the div #list, displaying pernr and name as columns. Any suggestions would be appreciated!

Answer №1

Here's an example of how you can achieve this: http://jsfiddle.net/exampleuser/abcd123/

let newTable = $("<table><thead><tr><th>ID</th><th>Name</th></tr></thead><tbody></tbody></table");
$(".someclass").append(newTable);
$.each(data.items, function (index, element) {
    newTable.find("tbody").append("<tr><td>" + element.id + "</td><td>" + element.name + "</td></tr>");
});

Answer №2

I found this snippet on the jqm-docs website

<ul id="input_what" style="height:40px;width:100%;" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="xyz" data-filter-theme="d"></ul>

-

$( "#input_what" ).on( "listviewbeforefilter", function ( e, data ) {
    var $ul = $( this ),
        $input = $( data.input ),
        value = $input.val(),
        html = "";
    $ul.html( "" );
    if ( value && value.length > 2 ) {
        $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
        $ul.listview( "refresh" );
        $.ajax({
            url: 'http://****:8000/service?parameter=' + parm +'',
            dataType: "json",
            data: {
                term: $input.val()
            }
        })
        .then( function ( response ) {
            $.each( response, function ( i, val ) {
                html += "<li ><a class='completeItem' href='#'>" + val + "</a></li>";
            });
            $ul.html( html );
            $ul.listview( "refresh" );
            $ul.trigger( "updatelayout");
        }
        );
    }
});

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

Guide to Sending and Scheduling Notifications through HTML 5's Notification Web APIs

Is it possible to utilize Web APIs to Schedule Notifications and send them at specific times? I am working on a CMS application that allows users to schedule and send push notifications for their mobile apps. I am interested in implementing something sim ...

Efficiently showcase connected pages in real-time

I've come across an issue with my express app. Whenever a navigation link (such as Home, Home1, or Home2) is clicked, an error occurs. However, if I manually type in http://localhost:8001/home1, it displays home1.html without any issues. What I' ...

Exploring the World with AngularJS and Google Maps API through ngGeolocation

Having some difficulty displaying my geolocation on Google Maps API using a marker. I am utilizing the ng controller ngGeolocation and the http://angular-ui.github.io/angular-google-maps/ Previously, I hardcoded the marker and map location without any is ...

Creating efficient computed properties in React: a step-by-step guide

Currently, I am facing an issue with creating a table that contains checkboxes. This problem is quite frustrating, as demonstrated in the following example: I have a list of items in the format {id, value}. For each item, I generate a div element containi ...

Transform the display format of the input type date field from 'MM/DD/YYYY' to 'February 5, 2012' in a React.js application using Material-UI's TextField component

https://i.stack.imgur.com/9p7Mz.jpg I am working with a material-ui/ TextField date component and I am looking to maintain the current style and input method, but I need to adjust how the entered value is displayed to the 'en-us' format. const o ...

Challenges encountered with the "load" event handler when creating a Firefox Extension

I am currently troubleshooting a user interaction issue with my Firefox extension. The tasks that my extension needs to complete include: Checking certain structures on the currently viewed browser tab Making backend server calls Opening dialogs Redirect ...

The functionality to disable and reenable a button after performing a calculation is not functioning properly in the code

Here's the issue I'm facing with my code: When I click the search button, a for loop prints "hi" 5000 times. Before this loop starts, I want to disable the button. However, after the console.log is done, the button should be enabled again. But fo ...

Combining Various Time Periods in JavaScript

After encountering various old solutions, most utilizing jQuery, for adding multiple durations together, I decided to create my own script below. While I may not be a JS expert, I am open to input on any potential issues with this code or a more efficient ...

Customize the styling of an individual 'LI' item within an array by utilizing Jquery

Just starting out with Javascript and jQuery. Created a basic image slider that's running into a jQuery problem. Here's the HTML for the image list: <div id = "slider-auto"> <ul class= "slides"> <li class = "slide"&g ...

Having difficulty displaying JSON data in a react component

I am currently working on parsing JSON data retrieved from an Ajax call in order to display it in a table using the React DataTable component. However, I have encountered a problem while trying to store the data in a state variable using the setState metho ...

straightforward multiple second timer

I have multiple <span class="timer">342</span> elements with different values (in seconds). I am trying to create a countdown timer for all of them by using the following code: $('.timer').ready(function() { ...

What are the steps to validate an Ajax form using Dojo JavaScript?

Currently, I am in the process of validating a form that has been written in Javascript/Dojo before sending it via Ajax. Here is the code snippet: <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript" djConf ...

What are the differences between using attachShadow with the "mode" set to open compared to closed

I've recently delved into the world of Shadow DOM through some casual video watching. It seems like many people are quick to dismiss this feature, with comments like "Just keep it open" and "It's less flexible when closed." attachShadow( { mode ...

Inspecting the final element of my jQuery slider

I've been working on a jQuery slider where I add the class "currentmemory" to each child of my memory2container to show which slider is displayed. The issue arises when I reach the last slider; instead of looping back to the first one and starting ov ...

mootools.floor dispose function malfunctioned

I am attempting to implement form validation with the following code: However, it does not seem to be working properly. <form name="niceform" id="third" action="" class="niceform" method="post" enctype="multipart/form-data"> <div class ...

AngularJS wildcards can be used in filters for a versatile approach

Is there a more efficient way to filter a list of values using wildcards? searchString = "ab*cd" The goal is to retrieve all values that begin with "ab" and end with "cd". One approach I've tried involves splitting the string into multiple substrin ...

What are the drawbacks of automating the process of generating charts to track time spent on webpages?

!RESOLVED! I am looking to automatically generate charts based on users and their time spent on different pages of a website. I have a file named "log.xml" where I store user information (customers), visited pages, dates, and the time they spent; once I ...

What is the best way to compress all folders, including the main directory?

I am working on a PHP script where I need to zip all directories, including the root directory. For instance, if my script file is located at /practice/zip/index.php, and I want to create a zip archive for the entire /practice directory. Currently, my sc ...

Getting the total number of child elements in a web page using Selenium web-driver with Node.js

I've been looking everywhere, but I can't seem to find the answer Here's my HTML code: <form id="search_form_homepage" > ... <div class="search__autocomplete" style="display: block;"> &l ...

Newly included JavaScript file displays on view page, but triggers a 404 error when attempting to open

Once I implemented the following code in the child theme's function.php file: add_action('wp_enqueue_scripts', 'js_files'); function js_files() { wp_register_script('ajax_call_mkto', get_template_directory_uri() . ' ...