Step-by-step guide on showing an Ionic popup through a popover selection

In my Ionic framework app, I have a popover that contains two options: share and delete. When the delete option is selected, I want to display a confirmation popup. However, I'm not sure how to implement this.

Should I create a separate controller for the popover? I have successfully implemented a popup coming from an ActionSheet before, but this seems to be a different scenario.

Here is the current controller code:

$ionicPopover.fromTemplateUrl('templates/popover.html', {
    scope: $scope
}).then(function(popover) {
    $scope.popover = popover;
});

// Triggered on a button click, or some other target
$scope.openPopover = function($event) {

    $scope.popover.show($event);
};

And here is the popover template:

<ion-popover-view style="height: 120px">
  <ion-content>
    <div class="list">
      <a class="item">
        Share
      </a>
      <a class="item">
        Delete
      </a>
    </div>
  </ion-content>
</ion-popover-view>
javascriptangularjsionic-framework

Answer №1

To implement a delete function in your template, you can add an ng-click method to the "Eliminar" button:

<ion-popover-view style="height: 120px">
  <ion-content>
    <div class="list">
      <a class="item">
        Compartir
      </a>
      <a class="item" ng-click="showConfirm()">
        Eliminar
      </a>
    </div>
  </ion-content>
</ion-popover-view>

$ionicPopover.fromTemplateUrl('templates/popover.html', {
    scope: $scope
}).then(function(popover) {
    $scope.popover = popover;
});

// Function to open the popover on button click
$scope.openPopover = function($event) {

    $scope.popover.show($event);
}; 

// Function to show confirmation popup for delete action
$scope.showConfirm = function() {
   var confirmPopup = $ionicPopup.confirm({
     title: 'Are you sure?',
     template: 'Are you sure you want to delete?'
   });
   confirmPopup.then(function(res) {
     if(res) {
       console.log('You are sure');
     } else {
       console.log('You are not sure');
     }
   });
 };

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

"Searching for the index of a clicked element? Here's how to do

I am trying to determine the index of a clicked anchor element in my navigation using jQuery. However, when I use the following code snippet, I always get zero in the console: $('.navigation ul li a').click(function(e) { e.preventDefault(); ...

javascriptjqueryhtmlcss

Navigating JSON Objects in Ionic 2

Example of my JSON array structure [{ label: "Interests", datatype: "check", lookupname: "null", order: "05", options: [ 0:{id: "01", value: "Photography"} 1:{id: "0 ...

angularionic-frameworkionic2ionic3

Retrieve your username data using Ajax

I'm working on a JSP page with the following structure: https://i.sstatic.net/3aFoz.png In updating the table in my database, I've added a new username column that accepts any string of text. Once the 'update user' button is clicked, ...

javascriptajaxjsp

Implementing jquery to show information in a dropdown menu

I would like to populate a select box with data from an AJAX response. Below is the code from my view file: <select class="form-control" name="vendor" id="vendor_list" required style="width: 159px;"> <option value="">Vendor 1</option> & ...

javascriptjqueryarraysjsonajax

The ForEach function does not execute actions on every individual object, but rather only once

I am currently developing a Deck building application for a card game. In addition, I have set up a database to manage the cards that I sell and play with. The deck builder tool I created allows me to deplete the stock of sellable cards when adding them to ...

javascriptnode.jsloopsforeachasync-await

Angular 2 - The constructor of a class cannot be called without using 'new' keyword

Currently, I am working on integrating the angular2-odata library into my project. This is the code snippet I have: @Injectable() class MyODataConfig extends ODataConfiguration { baseUrl = "http://localhost:54872/odata/"; } bootst ...

javascriptangularodata

I'm curious if it's possible to modify a webpage loaded by HtmlUnit prior to the execution of any javascript code

To begin, I want to elaborate on the reasoning behind my question. My current task involves testing a complex web page using Selenium + HtmlUnit, which triggers various JavaScript scripts. This issue is likely a common one. One specific problem I encount ...

javascriptjavaseleniumtestinghtmlunit

Is it possible for Skycons to show a duplicate icon?

My current issue involves integrating the JavaScript plugin "Skycons" with the Yahoo weather RSS feed. The problem arises when multiple days have the same weather forecast, as the plugin retrieves icons based on ID rather than class. This prevents me from ...

javascriptcss

Transform an array containing strings into an array containing objects

I'm working with an array that consists of strings containing geographical data. https://i.sstatic.net/4xQWL.png Is there a way to convert this array into an array of objects with the following structure: obj[0] = {lat:0, lng:0} ...

javascriptjqueryarrays

Combining and compressing code in AngularJS

Currently, I am developing an AngularJS application. Many web articles suggest that each file in the project should not exceed 100 to 150 lines of code. However, a question arises when considering concatenating/minifying the code - all the code will be c ...

angularjs

The checkValidity function fails to identify incorrect "tel" input

In my form, I am using the checkValidity function to validate inputs. However, I have encountered an issue where the validation only works when an input with the required attribute is missing a value. It doesn't work if there is a value type mismatch, ...

javascriptjqueryhtmlformsvalidation

Can componentDidMount() capture errors thrown by promises or event handlers linked to a component?

Consider a scenario in React 16 where there is a component as shown below: class Profile extends React.Component { onClick = () => { throw new Error("Oh nooo!"); }); }; componentDidCatch(error, info) { alert(error) } render() ...

javascriptreactjsreact-16

One-Time Age Verification Popup Requirement

Hi there! I'm facing a challenge with an age verification pop up on my webpage. Currently, the pop up appears on every page a user lands on, but I only want it to show on their first visit. I've tried using cookies to achieve this but haven' ...

javascriptcsshtml

Updating views with AJAX after database updates without the use of jQuery via PHP

Learning MVC and Ajax has been quite an adventure for me. I decided to build a site using PHP and MySQL, where I successfully implemented a new controller method to handle ajax requests. With the help of Ajax HTTPRequest, I am now able to update my databas ...

javascriptphpajaxtemplateshttprequest

Received an error message: "An illegal token was found when utilizing setTimeout/Cleartimeout

I am encountering an issue with my code where I want a timeout when hovering out of a div, but the timeout is canceled if I hover back on top of the div again. The code functions correctly if I remove the cancelfunction. So, displaying and hiding the div ...

javascriptjquery

What are the steps to switch to a root page after a successful sign-in with Ember-Auth?

After successfully implementing Ember-Auth using a pure token based approach, I am facing a challenge in redirecting users to the root of my app once they sign in. Although I know about actionRedirectable (refer to for details), since I am using a pure t ...

javascriptauthenticationember.js

Passing variables to the ajax.done() function from within a loop - what you need to know

How can I pass a variable to the .done() method of an ajax call that is inside a loop? The code snippet below shows my initial attempt: <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </ ...

javascriptjqueryajaxasynchronous

Angular error: Attempting to reduce an empty array without an initial value

I am encountering an issue with my array being filtered and reduced. getPageComponents(title: string) { this.pageComponents = []; const pageBlock = this.pageComponents.filter((val) => { if (val.page_title === title) { retur ...

javascriptarraysangulartypescript

Ensuring Typescript returns the accurate type depending on given parameters

i am working with a code example that looks like the following interface BaseQuestionType { label?: string } export type RadioQuestionType = BaseQuestionType & { radio: boolean } export type TextQuestionType = BaseQuestionType & { text: strin ...

javascripttypescript

Testing Tools for AJAX Integration

Searching for AJAX testing resources. Are there any no-cost tools out there for conducting AJAX tests? Edit 2: Besides Firebug, are there any other tools available? ;) ...

javascriptwindowsajaxlinuxtesting