Multiple popups being displayed repeatedly in tablet application

I am currently working on creating a table and assigning a function to the onTap attribute.

The issue I'm facing is that when there are 3 table rows, the prompt opens 3 times.

Does anyone have any suggestions on how I can resolve this?

if(window.localStorage['role'] == 'fitter') {
    //alert(window.localStorage['role']);
    $('#workList tbody').append('<tr class="' + cssClass + '">'+
        '<td>' + project.room_ref + '</td>'+
        '<td>' + project.description + '</td>'+
        '<td>' + project.total_qty + '</td>'+
        '<td id="inst-qty" + i >' + '<a href="#" max="' + project.total_qty + '" id="proj-' + project.id + '" data-role="button" data-inline="true" class="ui-btn-right">' + instQty + '</a>' + '</td>'+
        '<td>' + project.fitter_name + '</td>'+
        '</tr>');

    //$('#workList a').on('tap', editInstallQtyPrompt); 

    thisid = "proj-" + project.id ;
    document.getElementById(thisid).onclick = editInstallQtyPrompt;                     

} 


function onEditInstallQtyPrompt(results, projId, value, max) {
    //alert('call onedit function');
    if(results.buttonIndex == 1) { // OK
        // validate input
        //
        var input = parseInt(results.input1);
        if(isNaN(input)) {
            navigator.notification.alert(
                    'Invalid input, number only', 
                    function() {},
                    'Error'
            );
        } else {
            if(input > max || input < value) {
                navigator.notification.alert(
                    'Number must >= install qty, and < total qty', 
                    function() {},
                    'Error'
                );
            } else {
                if(isInt(input)) {
                    //console.log('new input: '+input);
                    updateProjectHistory(projId, input);
                } else {
                    navigator.notification.alert(
                        'Integer only', 
                        function() {},
                        'Error'
                    );
                }
            }
        }
    }
}

Answer №1

To prevent multiple event subscriptions, it is advisable to place the code

$('#workList a').on('tap', editInstallQtyPrompt);
outside of the row insertion section. Registering the event within this section will lead to multiple subscribers, causing the event to trigger multiple times unnecessarily.

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

Substitute HTML data attributes

Hey everyone, I'm wondering how to change a data attribute in my code. For example, I am currently using a script for a video background, but I want to replace the video with a lighter version when viewed on a mobile device. In my JavaScript file, I h ...

Error: selenium web driver java cannot locate tinyMCE

driver.switchTo().frame("tinymce_iframe"); String script="var editor=tinyMCE.get('tinymce_textarea');"; JavascriptExecutor js=(JavascriptExecutor) driver; js.executeScript(script); I'm encountering a WebDriverException while try ...

Having trouble getting Handsontable to scroll smoothly in Chrome?

I'm currently facing an issue with handsontable specifically on Chrome. The problem is that although the table itself is scrollable, the values and row headings within the table do not update as they should. You can see the issue illustrated in the im ...

Date parsing error thrown by jQuery datepicker plugin

What could be causing the InvalidDate exception when attempting to parse the date using $.datepicker.parseDate("mm/yy","02/2008");? ...

Activate an action only upon closing the page

I am looking for a solution in my vue.js app to execute a function only when the user closes the application. I have tried registering an event listener for beforeunload, but it causes the function to also trigger on page reloads, which is not ideal. Is t ...

Error in ReactJS: Trying to call a function from within a map function in ReactJS, but

Attempting to make a call to getElementByKey() function while mapping a collection: {this.state.sections.map(function(section) { return (<Tab key={section.value} title={section.label}> {this.getElementByKey(se ...

Attempting to fetch JSON data within a function using the Fetch API, in order to utilize the information in a separate function

Looking to extract information from a URL that contains JSON data for multiple objects, I came up with the following code: static fetchObj(){ fetch("http://localhost:1337/objects") .then(callback => { return callback.json(); }) .then(data => { cons ...

When the response is manually terminated, the next middleware layer in express.js is invoked

I recently noticed an unusual occurrence: Even though I am explicitly ending the request using res.json() in one express middleware, the request still cascades down to the next middleware. It is important to mention that I am not utilizing next() anywhere ...

What is the best way to arrange four divs in a row on a mobile device that is responsive?

I am facing an issue with displaying 4 divs of equal size on my website. In desktop view, they appear side by side but in mobile view, they stack on top of each other. I have tried using display: flex; and bootstrap classes like col-3, col-sm-3, col-md-3, ...

"Utilize JavaScript to extract data from JSON and dynamically generate a

I'm currently facing an issue with reading JSON data and populating it in my HTML table. The function to load the JSON data is not working as expected, although the data typing function is functioning properly. I have shared my complete HTML code alo ...

Struggling to integrate Pdf417Scanner as a plugin in Cordova/PhoneGap

Trying to make the Pdf417Scanner plugin (available at https://github.com/PDF417/pdf417-phonegap) compatible with Cordova/PhoneGap has been a challenge. Here's the progress so far: Started a new project using PhoneGap (incorporating Framework7 for t ...

JSON accessed through the file:// protocol

When opening my web app, the browser displays a .html file with the address bar showing the protocol file://. However, I need to open a .json file in the script and load it into a variable. I have attempted using $.ajax request with data type jsonp, as we ...

Javascript function that triggers at the end of a time update

How can I ensure that the alert event is triggered only once at the 15-second mark of a 45-second video? The code snippet below initiates the alert, but how can I modify it to make sure the alert only appears once. var video = document.getElementById("m ...

Manage the application of CSS media queries using JavaScript

Is there a method to control which CSS media query a browser follows using JavaScript? As an example, let's say we have the following CSS: p { color: red; } @media (max-width: 320px) { p { color: blue; } } @media (max-width: 480px) { p { col ...

The node.js application was unable to locate the '../HMS/server/models/user' file

Hi there! I'm currently working on an application with a folder structure as shown below. I want to use the following line in my passport.js file: var User = require('../server/models/user'); However, I encountered the error below after tr ...

Ensure the app remains hidden from Marshmallow users when searched for in the Google Play Store

Is it possible for my application to not be visible to Marshmallow users on the Google Play Store? I recently published an app, but there are some bugs specifically affecting Marshmallow users. I would like to hide the app from Marshmallow users until al ...

Leveraging Material-UI in Electron Environment

I'm currently working on an electron app using React and incorporating Material-UI for the user interface. I've added a datepicker and timepicker to a component, but when clicking on the input in the electron app, nothing happens. I'm unsure ...

Surprising Interactions Between Ajax and PHP

I am encountering an issue with my ajax request to a php page. The PHP script successfully sets a cookie, but the message sent back using the echo function is not appearing in the response. I have confirmed this by logging the XMLHTTPRequest Object in the ...

Utilizing and transmitting contextual information to the tooltip component in ngx-bootstrap

I am currently working on integrating tooltips in ngx-bootstrap and trying to figure out how to pass data to the ng-template within the tooltip. The documentation mentions using [tooltipContext], but it doesn't seem to be functioning as expected. Belo ...

Modifying the font of a WebView on an existing Android site

I've been looking for a solution to my problem for days with no luck. Can someone please take a look: Input: a WebView with a web already loaded. Output: change the font of the loaded web inside the WebView. Here's what I've tried so far: ...