"Unleashing the power of Ionic: Why ng-click fires twice in Mobilefirst

Operating Environment:

  1. Eclipse 4.4.2,
  2. IBM MobileFirst Platform Foundation 7.1,
  3. StarterApplication_ionic-release71.zip,
  4. angular-route.js [AngularJS v1.2.12 part of sample application] and
  5. ionic.bundle.js [Ionic, v1.0.0-beta.1 part of sample application]

The StarterApplication_ionic-release71.zip has been successfully imported into the existing Eclipse workspace.

Within feeds.html

<button data-ng-click="clickMe()">Click Me!</button>

In the controllers.js file under the Scope of FeedsController

$scope.clickMe = function(){
    alert("123");
    console.log("I am clicked");
};

Complete code snippet:

app.controller('FeedsController', function($rootScope, $scope, feedsService, 
$ionicLoading, $timeout) {
    $scope.clickMe = function(){
        alert("123");
        console.log("I am clicked");
    };
    $scope.loading = $ionicLoading.show({   
        content: '<i class="ion-loading-c"></i> Loading...',
        animation: 'fade-in',
        showBackdrop: true,
        maxWidth: 200,
        showDelay: 0
    });
    $scope.getFeeds = function() {
        $rootScope.feeds = [];
        $scope.errorMsg = "";
        feedsService().then(function (feeds) {
            $rootScope.feeds = feeds;
            $scope.$broadcast('scroll.refreshComplete');
            $scope.errorMsg = "";
            $scope.loading.hide();
        },
        function(error) {
            $scope.errorMsg = "Could Not Load feeds";
            $scope.$broadcast('scroll.refreshComplete');
            $scope.loading.hide();
        });

    };
    $scope.getFeeds();

});

The html and js codes have been added as specified above.

Upon clicking the button, the clickMe method seems to be triggered twice, resulting in the alert being displayed twice along with double logging.

Attempts were made to investigate the root cause using Google search and StackOverflow but unfortunately, the source of this issue remains unidentified...

Answer №1

After importing the sample application into Eclipse with MFPF 7.1, I inserted the necessary code snippets and deployed the app to the server. When previewing the Common web resources in Chrome stable, I encountered unexpected behavior.

Upon clicking the "Click Me!" button, an alert popped up along with a console log message. Strangely, I could not replicate this issue...

Update: This problem seems to be isolated to Android devices and persists even when testing outside of IBM MFP's provided tools.

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

Loading a series of images in advance using jQuery

I have a series of frames in an animation, with file names like: frame-1.jpg, frame-2.jpg, and I have a total of 400 images. My goal is to preload all 400 images before the animation begins. Usually, when preloading images, I use the following method: v ...

Creating a tooltip with a left arrow and a bordered design

I am looking to create a tooltip that displays its content after clicking on the tooltip tip icon. Currently, it only works on hover, but I want it to be clickable and mobile responsive. Desktop design should resemble: https://i.sstatic.net/FQPyt.png Mob ...

Effective ways to check for the time discrepancy between dates in moment.js

My server is set to use UTC date format and I am running my node server in UTC as well. I am looking to determine if the current time in Indian timezone (which is +5.30) is greater than 8AM, and if so, send an email notification. How can I achieve this u ...

Is it possible to retrieve randomly generated twig elements in AngularJS using JavaScript?

I am facing a challenge in Symfony where I need to retrieve the value of a randomly generated input field using Twig. I am unable to set the ng-model attribute in the Twig file. ...

Is it possible to create a static array with custom keys in JavaScript using just one line of code, similar to how it can be done

When attempting to create a static array in JavaScript: let arr = ['a':'a1','b':'b2','c':'c3'] //results in an error When attempting to create a static array in PHP: $arr = ['a'=>&ap ...

The controller persists in its loop as it utilizes $state.go

As a newcomer to Angular, I am uncertain if this is the most effective solution. Within my state/route, there is a button that triggers the following function when clicked: _this.foo = function () { save(); $state.go("next"); } The issue arises w ...

What is the process for retrieving data from mongoDB and displaying it by year in a single row?

I have received an array of data from MongoDB, which includes id, userName, and date. The date consists of years and months. My goal is to display this data categorized by years. How can I construct a query to the database that will show the data for all y ...

Kendo UI's DataSource toJSON method is lagging behind by a single value

I am currently working on an Angular application that involves implementing batch editing in a Kendo Grid. Instead of using the datasource's transport mechanism, I am manually adding data to the grid by calling .data() on the datasource. One issue I ...

Utilizing CakePHP 3.0 with jQuery UI for an autocomplete feature

Seeking assistance on why the current code isn't functioning. The objective is to retrieve data from the index controller to search and obtain JSON data. No requests are being made, and there are no visible results. New to CakePHP 3.0, I am attemptin ...

An issue arose during the installation of nodemon and jest, about errors with versions and a pes

Currently, I am facing an issue while trying to set up jest and nodemon for my nodejs project. My development environment includes vscode, npm version 6.13.7, and node version 13.8.0. Whenever I try to install nodemon via the command line, the console disp ...

"Chrome experiences issues with onmouseover functionality when navigating away from a page or posting content

I'm experiencing an issue with a page where I have onmouseover and onmouseout attributes set for pictures. When submitting, the onmouseover and onmouseout events cause the images to fail, resulting in the image source not found icon being displayed. ...

Calculating the duration of time using JQuery with provided start and end times

I am currently utilizing a jQuery time picker to gather start and end times in a 12hr format. My goal is to calculate the time duration between the start and end times in HH:MM:SS format. The code snippet I have below is providing me with a duration like ...

.load() not triggering for images that are not in the cache - jquery

In Safari and Opera, the callback function of .load doesn't wait for uncached images to be fully loaded. With cached images, it works perfectly fine. The code may seem a little complicated, but I'll do my best to simplify it... So, here is my J ...

unable to establish a secure connection to the specified URL within my application

I am facing an issue with my form that includes hidden values which need to be sent to a URL upon submission. The URL is for secure card payment purposes, and when I try to process it through my app by opening the URL and sending the hidden values, the con ...

Can we incorporate modal images into the design?

Can modal images be incorporated into a blog post? If necessary, I'm utilizing the Vimux/Mainroad theme. ...

What steps can I take to ensure that my popup images continue to appear?

Currently, I am working on creating a webpage that features thumbnails sourced from a local geoserver. The goal is to have these thumbnails expand into dialog windows that can be moved around. While I have successfully implemented the functionality to expa ...

Exploring the integration of JSON data with Angular and Node.js

Hey everyone, I'm diving into the world of Node JS and Angular for the first time. Right now, I'm tackling the task of handling JSON files with Angular and Node JS, but I've hit a bit of a roadblock. My goal is to retrieve all elements (both ...

Maintain the current application state within a modal until the subsequent click using Jquery

Due to the challenges faced with drag and drop functionality on slow mobile devices, I am considering implementing a modal approach for moving elements from one place to another. Here is how it would work: When a user clicks on an item, it is visually ma ...

I must modify the initial statement to appear in bold from the paragraph with the use of JavaScript and CSS

Mr. XYZ and Mrs. ABC are known for their integrity. They own a stylish car. In the next paragraph, I would like to emphasize the first sentence by making it bold, We admire our exceptional leader J.K.L. He shows great potential. In this section, I wan ...

How can we prevent the 'To Date' value from incrementing by one with each search in AngularJS when using Moment.js for conversion?

Implementing date range search functionality in AngularJS and utilizing moment.js. Despite setting the time zone, the 'To Date' field increments by one date each time. Below is the code snippet that I am using: function getSearchDate( ...