Handling memory in javascript jquery mobile using phonegap

I have encountered an issue while building a jQuery Mobile + PhoneGap app for iOS. The app functions correctly on a web browser, but when bundled with PhoneGap and tested on a phone, it starts to forget JavaScript functions. For instance, panels that should open and close on swipe gestures stop responding after multiple swipes. Even though other buttons work fine, the panel functionality is lost.

Interestingly, on a computer or web app, I can perform swipes endlessly without any freezing issues. Could there be something causing my JavaScript functions to clear out? Should I consider defining them differently?

$(document).on('pageinit', '#page', function() {
  $(document).on("swipeleft swiperight", "#page", function(e) {
    console.log('swiped!!')
  });
});

Any suggestions or ideas regarding this problem?

UPDATE:

It seems that the forgotten function only occurs after consistent back-and-forth swiping around 10 times. If I introduce a short pause between each swipe, approximately 2-3 seconds, the app behaves normally for longer periods. Could it be possible that new swipe events are getting tangled up with older ones, leading to freezing issues? I'm struggling to find a solution to this. Any advice on managing memory in a PhoneGap app's JavaScript would be greatly appreciated.

javascriptjquery-mobilememory-managementcordova

Answer №1

I managed to find a solution.

$(document).on('pageinit', '#page', function() {
 $(document).on("swipeleft swiperight", "#page", function(e) {
   console.log('swiped!!')
 });
});

Initially, I posted pseudo code that had some issues. It turned out that the console.log message was being triggered on every swipe, but the panel open/close calls were missing from the code snippet provided.

This is the complete original code:

$(document).on('pageinit','#page', function(){
  $(document).on("swipeleft swiperight", "#page", function(e) {
    console.log('swiped!!')
    // Additional logic to manage opening and closing of panels based on swipe direction
  });
}

The following modifications resolved the issue: - Removed the selector from the 'swipeleft' and 'swiperight' functions - Added e.stopPropagation() to prevent event propagation

$(document).on('pageinit', '#page', function() {
  $(document).on("swipeleft swiperight", function(e) {
    e.stopPropagation();
    console.log('swiped!!')
    // Improved logic for handling panel functionality
  });
})

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

What is the process for customizing the appearance of a prop within the <TextField> component?

Using my custom DatePicker.js component, I have two instances of <TextField>. When the user clicks on the <CalendarIcon> within the <TextField>, a small calendar pops up. However, I want to style the label in the <TextField> in a sp ...

javascriptreactjsmaterial-ui

What is the best way to manage the package-lock.json file during deployment from git using SSH?

In my deployment process, I utilize a Git repository to check code in. By using web hooks, a deployment script is triggered on the production server. Once connected to Git via SSH and a .pem key on the server, I perform a Git pull, npm install, webpack bui ...

javascriptnode.jsgitnpm

A Guide to Implementing v-for in a JSON Array with Vue.js

After receiving JSON data from the server: [ {"id":"2","name":"Peter","age":"24"}, {"id":"4","name":"Lucy","age":"18"}, ] I am ...

javascriptarraysjsonvue.js

Adding list items to an unordered list without making them draggable using jQuery

How can I allow users to build a list of sports and drag them into a "cart" using jQuery? The issue I'm facing is that the appended list items are not draggable, and I'm unsure of how to solve this problem. /* JS code for sports.html */ $(fu ...

javascriptjqueryhtmljquery-ui-draggable

How can I dynamically populate my select field with JSON data using React.js?

My goal is to fetch data from an API and use the 'symbol' JSON field as options for a select dropdown. However, I'm encountering an issue: 'TypeError: Cannot read property 'length' of undefined.' Beneath my code, I' ...

javascriptreactjs

Changes in query parameters on NextJS navigation within the same page do not activate hooks

When utilizing NextJS without SSR, I encountered an issue with basic navigation using different query parameters. Upon the initial arrival on the page/component, everything seems fine as the component gets mounted and URL params change accordingly. However ...

javascriptreactjsnext.js

Exploring jQuery AJAX Attributes during ajaxStart and ajaxStop event handlers

With my project consisting of over 40 ajax webservice calls, I am looking to incorporate additional debugging features. One such feature is a timing method which I have already developed using my Timer class/object in Javascript. I'm seeking assistan ...

javascriptjqueryajax

Test the file upload functionality of a Node Js application by simulating the process using Chai

My API testing involves receiving a file as input. I have successfully used the attach() function for this purpose. To cover all scenarios, I anticipate using around 20 different input files. Rather than storing these 20 files individually, my idea is to c ...

javascriptnode.jsexpresschai

What is the best way to showcase arrays in a JSON document?

I'm working on a basic AJAX code to show a JSON file stored locally using this HTML, but I keep getting an 'undefined' error. I'm opting for JavaScript instead of JQuery since I haven't delved into it yet; hoping my code is syntact ...

javascriptajaxjson

Transferring the link value to an AJAX function when the onclick event is triggered

I have a link containing some data. For example: <li><a href="" onclick="getcategory(this);"><?php echo $result22['category']; ?></a></li> I need this link to pass the value of $result22['category']; to ...

phpjavascripthtmlajax

Get a file from a node.js web server by clicking a button to initiate the download

I am a beginner in nodejs and I am working on creating a web server using nodejs to host some static files. Here is the code I have used for this purpose: var http = require('http'); var finalhandler = require('finalhandler'); var ser ...

javascriptnode.jshttpwebserver

Utilizing document.write() for displaying markup content

I have an inline SVG stored as a variable on my webpage and I am making some changes to it. How can I display viewText on the page (not the SVG image) with the modifications? What is the best way to make viewText appear on the page? For instance: ...

javascriptjqueryhtml

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', ...

javascriptvue.js

Animate a div to sense whether it has reached the top or bottom position

Is it possible for a div to animate when it reaches almost halfway while scrolling? I'm looking to achieve this effect on a sticky sidebar, similar to how it works on this website: sample This is the code I have: $(function(){ // document ready ...

javascriptjqueryhtmlcss

Transmit a base64-encoded image in an HTTP request to the server

I am currently working on sending a base64 image using the request npm module from a nodejs/express application to another REST API endpoint. Below is the code I am using: First, I have middleware set up using multer and datauri to upload the image in mem ...

javascriptnode.jsexpressbase64multer

Retrieving data from a remote source repeatedly based on user selections on a single page

In my current project, I am utilizing next js to build a web application. One of the pages in this app has the following structure: <page> <component_1> This component fetches data from a remote server using `getInitialProps` (alternat ...

javascriptnode.jsreactjsnext.js

The exported NextJS URL isn't functioning properly

Recently, I delved into the world of Next JS by following a tutorial on YouTube by Brad Traversy. In his guidance, I used next export to export the program and ran it using serve -s out -p 8000. While the page loads perfectly on localhost:8000, the issue a ...

javascriptnode.jsreactjsnext.js

In case of an API error with the Nuxt fetch method, ensure that the entire site responds with a 404

Is it possible to configure a Nuxt website to respond with a 404 error when the API raises a 404 error? The API call is made on the client side using the fetch method: Check out this demo here: codesandbox demo Code Snippets index.vue <template> ...

javascriptnode.jsvue.jsnuxt.js

The next promise in a promise chain does not wait for the previous promise to resolve

I am completely new to the concept of Promises, but I have read that they are a powerful tool for executing functions one after another through Promise chaining. The code snippet below, under //RUN ON CLICK: CREATE TABLES, makes two AJAX calls - "Create D ...

javascriptjqueryes6-promise

"Access Denied: Error 403 - Forbidden" encountered during the CSS minification and bundling process in ASP.NET Web Forms

After migrating my ASP.NET web forms application from a managed VPS to AWS EC2 using AWS Elastic Beanstalk, I encountered an issue with CSS bundling and minification. While the JavaScript was successfully bundled and minified on the Amazon server, the CSS ...

javascriptcssasp.netamazon-web-servicesbundling-and-minification