Creating interactive lists on Android devices with PhoneGap and jQuery Mobile

I am facing an issue with my code. It works perfectly in Chrome, but when I try to run it on Android, the alert("test") function is never called. I created an apk using PhoneGap and am also using jQuery Mobile. Can anyone help me figure out what I am missing? Is there another way to create a dynamic listview from the data received in a json response?

Thank you for your assistance.

$( document ).bind( "mobileinit", function(){
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
    $.mobile.loadingMessageTextVisible = true; 
    $.mobile.showPageLoadingMsg();
})

$( document ).ready(function (){

$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
e.preventDefault();
    alert("test");//-----------------------------------------------

        $.ajax({                                                                   
        crossDomain: true,
        type: 'GET',
        url: 'http://ip/services/rest/contact/list', 
        callback: 'jsonpCallback',
        jsonpCallback: 'jsonpCallback',
        jsonp: '_jsonp',
        contentType:  'application/json',
        dataType: 'jsonp json',
        timeout : 10000,

        success: function(data){
            var html ='';
            alert("data.firstName");
            $.each(data, function(key, data) {
            html += '<li><a class=contact href="#" ><h1>' + data.label + '</h1><p>'+ data.customerName + '</p><p>' + data.phone + ', ' + data.email + '</p><p>' + data.id + '</p></a></li>';
            $('#ul_id').append($(html));
            html='';
            });
            $('#ul_id').trigger('create');    
            $('#ul_id').listview('refresh');
        },
        error: function (xhr, ajaxOptions, thrownError){
            alert("Status: " + xhr.status + ", Ajax option: " + ajaxOptions + ", Thrown error: " + thrownError);
            //location.reload();
        },
    }); 
;

});

Answer №1

After reviewing the jquerymobile documentation, it is recommended to use $(document).bind('pageinit') instead of $(document).ready(). Additionally, when working with phonegap, make sure to bind to `deviceready'.

To update your code properly, consider the following adjustments:

document.addEventListener("deviceready", onDeviceReady, true);

$( document ).bind( "mobileinit", function(){
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
    $.mobile.loadingMessageTextVisible = true; 
    $.mobile.showPageLoadingMsg();
});

var onDeviceReady = function(){

$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
e.preventDefault();
    alert("test");//-----------------------------------------------

    $.ajax({                                                                   
    crossDomain: true,
    type: 'GET',
    url: 'http://ip/services/rest/contact/list', 
    callback: 'jsonpCallback',
    jsonpCallback: 'jsonpCallback',
    jsonp: '_jsonp',
    contentType:  'application/json',
    dataType: 'jsonp json',
    timeout : 10000,

    success: function(data){
        var html ='';
        alert("data.firstName");
        $.each(data, function(key, data) {
        html += '<li><a class=contact href="#" ><h1>' + data.label + '</h1><p>'+ data.customerName + '</p><p>' + data.phone + ', ' + data.email + '</p><p>' + data.id + '</p></a></li>';
        $('#ul_id').append($(html));
        html='';
        });
        $('#ul_id').trigger('create');    
        $('#ul_id').listview('refresh');
    },
    error: function (xhr, ajaxOptions, thrownError){
        alert("Status: " + xhr.status + ", Ajax option: " + ajaxOptions + ", Thrown error: " + thrownError);
        //location.reload();
    },
}; 

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 any HTML code that is able to implement a currency format identical to the one we've customized in Google Sheets/Google Apps Script

I am currently working with a Google Sheet table that consists of 2 columns. The second column contains charges which can vary based on user input through a Google Form and are summed up using GAS. To view an example, click here. The data from this Googl ...

Is there a simple solution to show script 1 to visitors from the US and Canada, while displaying script 2 to visitors from other countries?

I'm looking for a simple script that can show one script to visitors from the US and Canada, and another script to visitors from other countries. It doesn't have to be perfect, but using a service like seems too complex for me. Is there a stra ...

Encountering a problem with Nginx and WordPress where the admin-ajax.php is causing an issue when returning an AJAX result, leading to an error of Un

Currently, the issue is that everything runs smoothly on my Apache server, but when I switch to Nginx, an error is triggered with Uncaught SyntaxError: Unexpected token < Below is the function extracted from Functions.php function searchranges() { ...

Include a quantity dropdown menu on the cart page of your Shopify store's debut theme

Hey there! I'm currently customizing the Shopify Debut theme and I'm trying to incorporate a quantity selector as a dropdown on the cart page. Unfortunately, I'm encountering some issues with this implementation. I've managed to succes ...

The requested resource in WebApi2 does not have the ability to process a post request

After reading numerous similar posts discussing the same error message, I have come to realize that my issue is not quite matching with what others are experiencing. Lately, I made the switch to using Web API and removed all MVC methods where JSON was bei ...

Showing how to make an element visible in Selenium and Python for file uploading

Check out this HTML snippet: <div class="ia-ControlledFilePicker"><input class="ia-ControlledFilePicker-control icl-u-visuallyHidden" type="file" id="ia-FilePicker"><label class="ia-ControlledFilePicker-fakeControl" for="ia-FilePicker">C ...

Encoding discrepancies

I’m currently in the process of developing an Android app that incorporates a web server to deliver text message-based pages. On the client side, I’ve created a web interface which features several DIV elements filled using ajax. Specifically, there ar ...

Utilizing jquery.load to fill out a form following unsuccessful validation with ajax in CodeIgniter

After exploring numerous form validation tutorials that utilize jQuery Ajax, I have observed a common trend - they all focus on successful form validation. However, my quest is to uncover the process of displaying errors when server-side validation fails. ...

JavaScript keydown event for rotating images

I am experiencing an issue with JavaScript animation. I have incorporated code from this particular link into my keydown function. However, the code is not functioning as expected. While the code from the provided link works fine on its own, within the key ...

Creating a flexible parent tag for grouping child elements using Angular 2

My Objective I am determined to develop an Angular 2 button component that can dynamically render as either an <a /> tag or an <input /> tag based on the value of a property called type. Furthermore, this button component should be able to acc ...

Having trouble updating the input value in AngularJS?

As I venture into customizing an AngularJS tutorial on a Saturn Quiz, I am transforming it from multiple choice to a fill-in-the-blank quiz. The challenge I face is that the first answer registers as correct or incorrect, but subsequent questions always s ...

Is there a way for me to incorporate a feature that verifies whether an email address is already registered before allowing the person to sign up?

I am currently working with Node.js, express.js, mongoose, and pug to develop a registration/login system. I have successfully stored the name and email in a mongoose database with specified schema for these fields. The data is sent from a pug page via a p ...

Using Nuxtjs/Toast with personalized image emblems

Would it be possible to include an icon in a toast error message, or is there a need to install another module for this functionality? I am currently using vue and attempting to integrate a component as an icon, but so far without success. this.$toast.er ...

Exploring the Depths of Javascript Variable Scope

bar: function () { var cValue = false; car(4, function () { cValue = true; if (cValue) alert("cvalue is true 1"); }); if (cValue) alert("cvalue is true 2"); } car: function (val, fn) { fn(); } I have encountered a similar is ...

Issue regarding navigation using nuxt-links to pages with hashtags/anchors

When it comes to my website navigation, I rely on nuxt-links a lot. Most of these links direct users to specific sections within the home page using hashes like: <nuxt-link v-else class="text-link" :to="localePath('index') + #hash" > ...

What methods can be used to defer the visibility of a block in HTML?

Is there a way to reveal a block of text (h4) after a delay once the page has finished loading? Would it be necessary to utilize setTimeout for this purpose? ...

Using JavaScript to convert date and time into ISO format

Similar Question: How do I output an ISO-8601 formatted string in Javascript? I've been attempting to change a date and time input into an ISO format but keep encountering the error .toISOString is undefined. It seems like I must be overlooking s ...

Tips for adding elements to an angular $scope.array?

Currently, I am facing an issue that I cannot seem to pinpoint (most likely due to my limited expertise in AngularJS). In my HTML file, I have a basic ng-repeat set up like this: <ul> <li ng-repeat="fot in fotografia"><img src="{{fot.path ...

The function this.$set is failing to update an array in VueJS

I am facing an issue where the console log shows me the updated array xyz, but when I try to print it in the DOM using {{xyz}}, it does not update. Can anyone shed some light on why this might be happening? data() { return { xyz: [] } }, met ...

Ways to verify the presence of an element in a list

I found this interesting JS code snippet: ;(function ($) { $('.filter-opts .opt').click(function(){ var selectedName = $(this).html(); $('.append').append('<li>' + selectedName + '</li> ...