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

"How to retrieve the height of an element within a flexslider component

I need some assistance with using JavaScript to determine the height of an element within a flexslider. There are two challenges I am facing. When I attempt to use a regular function getHeight(){ var h = document.getElementById("id-height").style.height; ...

Using JQuery to duplicate and assign individual IDs to each clone

Currently, I am in the process of developing a straightforward web application. Users will enter information by selecting options from drop-down menus and typing text into designated fields. Upon completion, users can click on a "generate" button that will ...

npm ERROR! The module './access-error.js' could not be located

I keep encountering an issue with NPM where I always get the error message npm ERR! Cannot find module './access-error.js'. Can anyone provide assistance? The problem initially arose when attempting to install vue-chartjs. Following the document ...

Identical IDs appearing in multiple buttons causing a conflict

I am currently loading content from external HTML files, specifically page1.html and page2.html. Although everything is the same except for the pictures and text, I am encountering an issue with the close button. It only closes page1.html.Feel free to chec ...

Tips for concealing one modal and revealing a different one upon page refresh

I am facing an issue with my modal form. What I want is for the modal to close upon submitting the form, then for the page to reload, and finally for the success modal to be displayed. However, when I clicked submit, the success modal ended up appearing o ...

Showing arbitrary text on Vue.js template

In my Vue.js application, I have a Loader component that randomly displays one of several messages. Here is how I implemented it: Vue.component('Loader', { data() { const textEntries = [ 'Just a moment', ...

Combining various API requests within a Vue component, which includes a for loop

I'm delving into the world of API chaining, specifically trying to link two different API calls within a 'notes' Vue component. My knowledge of promises is basic at best, but I'm eager to enhance my skills in this area. The initial API ...

I'm facing an issue in React where using onChange is causing all DOM elements to be cleared. The input form functions correctly when used with a button, but for some reason, the onChange event does not

Currently, I'm working on a grid that can be resized using two input fields in the application. The setup involves an input for cells across, an input for cells down, and a button to set the grid, which is functioning well. However, I would like to ma ...

Looking to update table content dynamically using jQuery ajax?

I need assistance in creating a dynamic table that can update its content based on the company selected from a dropdown menu. The data should be fetched using AJAX and only display information related to the chosen company. Furthermore, I would like to imp ...

Refresh all tabs in the TabContainer

I have implemented multiple tabs using dojo on a web page, and I need to refresh the current tab every 5 seconds without refreshing the entire page. You can check out the code in this fiddle: http://jsfiddle.net/5yn2hLv9/4/. Here is an example of the code ...

How to share information between ES6 classes?

Recently, I decided to create a node/express app just for fun. One of the components I built is an ES6 class called 'TwitterClient.es6' that interfaces with the Twitter API to fetch data. Now, in my 'server.es6', which handles the route ...

Redirecting asynchronously in Node.js with no use of AJAX

I've been struggling with this issue for days and have already sought help, but nothing seems to be working. Whenever I attempt to redirect from a POST request in node, the browser doesn't respond. Here's how my app is structured: ./ confi ...

The Google Maps API swipe feature on mobile devices is causing issues with screen scrolling

When users visit my website on mobile, they encounter a situation where Google Maps suddenly covers the entire page, preventing them from scrolling away. This is because swiping up or down only moves the map view within Google Maps, instead of scrolling th ...

Here's a unique rewrite: "Learn how to manipulate the CSS class of a textarea element (specifically in NicEdit) by utilizing the addClass

I am currently validating a textarea using the NicEdit plugin. var getContent = nicEditors.findEditor("SubSliderDescription").getContent(); bValid = bValid && checkBlankTextArea(getContent, "SubSliderDescription") function checkBlankTextArea(o, ...

"Oops, it seems like there are an excessive number of connections in Express MySQL causing

While programming in Angular and creating an API server in Express, I encountered a minor issue after spending hours coding and making requests to the API. The problem arises when the maximum number of requests is reached, resulting in an error. Everythin ...

Is there a way to ensure that my AngularJS factory fetches HTTP data only once?

I have implemented a factory in my project to share data among multiple controllers. Here is the code for my factory: var szGetData = "some url that works"; myApp.factory('Data', function ($http) { var eventData = {}; eve ...

What methods can I use to conceal elements of my object that do not align with my specified filter?

Currently, I have implemented a filter that searches for an object in a text field using the properties of title and name. If there are matches, the words are highlighted in yellow. I am interested in modifying this so that if there are matches, the other ...

The React component does not trigger a re-render

Using React Redux, I am able to pass values successfully. However, the component I intend to render only does so once. Interestingly, when I save my code in VSCode, it renders again and the data displays on the page as expected. return ( <div classN ...

Troubleshooting Bootstrap 4 Modal in JavaScript and Vue: Uncaught ReferenceError: $ is not defined

I'm struggling to figure out how to trigger a Bootstrap 4 modal from my Vue 3 app using JavaScript. Whenever I try to launch the modal, I keep encountering this error message: $ is not defined at eval When looking for solutions, I noticed that most a ...

Is there a way to utilize and incorporate Functions from a separate file within an API Server file?

I have integrated ReactJS, Firebase, and React Redux into my project. https://github.com/oguzdelioglu/reactPress Currently, I am displaying data from Firestore by utilizing Functions in https://github.com/oguzdelioglu/reactPress/blob/master/src/services/ ...