Introducing ons-popover 2.0 - now you can trigger it using pure JavaScript instead of Angular

I'm attempting to replicate a feature using Onsen 2.0 without AngularJS, similar to this CodePen example:

http://codepen.io/argelius/pen/zxGEza?editors=1010

var app = ons.bootstrap();

app.controller('DropdownController', function($scope) {
  ons.createPopover('popover.html').then(function(popover) {
    $scope.popover = popover;
  });
});

In essence, how can I trigger a popover in JavaScript without utilizing ons.bootstrap() since it causes an error when AngularJS isn't included?

The structure of my page looks like this:

<div class="right">
   <ons-toolbar-button onclick="????">
   <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
   </ons-toolbar-button>
</div>

<ons-template id="popover.html">
      <ons-popover direction="down" cancelable>
        <ons-list>
          <ons-list-item modifier="tappable">Option 1</ons-list-item>
          <ons-list-item modifier="tappable">Option 2</ons-list-item>
          <ons-list-item modifier="tappable">Option 3</ons-list-item>
        </ons-list>
      </ons-popover>
    </ons-template>
javascriptangularjsonsen-uimonacaonsen-ui2

Answer №1

ons.bootstrap is specifically designed for AngularJS. If AngularJS is not included in your project, you can safely omit it without any issues. You can still use the popover functionality in a similar manner, just without the need for controllers:

var popover;

ons.createPopover('popover.html').then(function(element) {
  popover = element;
});

function display(id) {
  popover.display(id);
};

You can test it out here: http://codepen.io/frankdiox/pen/LGQwVM

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

Ways to ensure that v-model does not become "true" or "false" in an input checkbox using Vue

I am currently working on a filter popup that includes a list of checkboxes. By default, some items should be selected and others not selected. I have connected these checkboxes to an object array using v-model. My issue is that when I deselect and select ...

javascripthtmlcssvue.jsfrontend

Transfer information from PHP to JavaScript across distinct files

In my website, I have several files including login.php, main.php, functions_js.js and functions_php.php. The login.php file retrieves two variables that I need to pass to the functions_php.php file via AJAX. In functions_php.php, I execute a SELECT query ...

javascriptphpjqueryajax

Is it possible to utilize "this" in mapMutations spread within Vue instance methods?

Trying to define Vuex mutations like this: export default { props: { store: String }, methods: { ...mapMutations({ changeModel: `${this.store}/changeModel` }) } } Encountering an error message: An er ...

javascriptvue.jsthisvuexvuex-modules

An issue occurred while running the "gulp test" command due to a problem with the 'gulp-tslint-log'

Having issues running gulp on a JHipster generated project. I've already installed all node_modules using npm install and here are my package.json and gulpfile.js: { "name": "myapp", "version": "0.0.0", "description": "Description for myapp", ...

javascriptjsonnode.jsgulp

Using XMLHttpRequest to fetch a JSON object

Having trouble with returning an object from the getMine function in Javascript? Even though you try to print out the object, it keeps showing up as undefined. How can you successfully return the obj within this function? function getMine() ...

javascriptajaxjsonxmlhttprequest

What is the method for modifying the button text to read "No Sign Ups!" once the alert box has been dismissed?

Seeking guidance in jQuery as I aim to modify the text of the "Sign Up Now" button post closing the alert box. I'm contemplating creating a function that triggers once the alert box shuts down, but my attempts so far have been fruitless. Any assistanc ...

javascriptjqueryhtmlcss

Simple Filtering in React Data Grid

I've been delving deeper into "react-data-grid" and trying to implement the Basic Filtering feature in my React app. Here is the Basic Filtering example I'm referencing: The example code in codesandbox: https://codesandbox.io/s/w6jvml4v45?from-e ...

javascriptreactjsreact-data-grid

The problem with the MD-Dialog

I have a MD-dialog controller set up like this: var HomeController = function ($scope) { $scope.demoNonLinear = function () { var element = document.querySelector('.mdl-stepper#stepper-non-linear'); if (!element) re ...

angularjs

Changing the function to operate asynchronously

How can I convert the following code into an asynchronous function? It is currently returning referralUrl as undefined: controller async createReferralUrls() { this.referralUrl = await this.referralService.generateReferralUrl(this.userData.referral ...

javascriptangulartypescript

Utilizing controllerAs for a Model Change Event Handler

Currently, I have several directives for a sophisticated search form that are connecting to the controller using the controllerAs syntax in Angular 1.3. Since there is no scope object involved, the model is directly set on the controller. My goal is to es ...

angularjs

Updating File Owner with Google Drive API - Permission Error 400 "Field 'Permission Type' is mandatory"

I've been utilizing the Google Drive API within Google Apps Script. This particular script is written in sandboxed server-side Javascript, which restricts the use of the Google Client API for Javascript. As a Google Apps super admin, I am authenticat ...

javascriptjsonpermissionsgoogle-apigoogle-drive-api

Using the spread operator in ES6 allows for arguments to be placed in a non-con

When working in nodeJS, my code looks like this: path = 'public/MIN-1234'; path = path.split('/'); return path.join( process.cwd(), ...path); I was expecting to get: c:\CODE\public/MIN-1234 but instead, I got: `‌publ ...

javascriptnode.jsecmascript-6

Verify whether the input includes a specific value or a different one

Can someone help me with a simple task of checking if a textarea contains the value "12" OR "34"? I have tried the code below but it doesn't seem to work. Any suggestions? function check() { if (V1.value == ('12' || '34')) { ...

javascripttextarea

I need to implement a div-based dropdown with a scrollbar in JavaScript and CSS to prevent it from extending beyond the screen. Additionally, the use of struts is essential in this implementation

Dealing with a dynamically populated div-based dropdown can be tricky, especially when it extends beyond the screen's limits and hides entries. This is an inherited application that lacks support, leaving me to handle it without the necessary expertis ...

javascriptjqueryhtmlcss

NodeJS MySQL failing to retrieve the most updated data post-write

I'm struggling to solve an issue where after performing data operations (create, update, delete) and then querying for the data afterwards, I receive the previous version of the data rather than the updated version. For example: Let's say I hav ...

javascriptmysqlnode.jsdatabaseexpress

Redux actions do not cooperate with functions, preferring to be implemented inline instead

I am a beginner in Redux and JavaScript and just came across this issue, When I use the line dispatch({type: 'REQUEST_START'}); it works fine, but when I write it like this: dispatch(requestStart); No actions are being fired! Any suggestions ...

javascriptreduxactiondispatch

Error message: Unable to locate module using import instead of require

I am currently in the process of transitioning from using require to using import for all modules within my project. However, I have encountered some challenges with older npm modules that only provide instructions for require. For example, when it comes ...

javascriptecmascript-6es6-modules

The distinction between plural and singular array identifiers in JavaScript

The functionality of this code in Chrome 59.0.3071.115 is causing confusion for me: var names = ["Cat 1", "Cat 2"]; console.log(names); When executed, it displays an array object; however, var name = ["Cat 1", "Cat 2"]; console.log(name); Instead print ...

javascriptarraysstringgoogle-chrome

Using AngularJS to implement a clickable functionality within a directive

Currently, I am in the process of implementing a drag-and-drop directive. When an element is dropped, I am adding a copy of that element to my div and appending the ng-click attribute to it in this manner: copy.append('<button class="close" ng-cli ...

javascriptjqueryangularjsdirective

Utilize fileSystem in an API Route when working with NextJS deployed on Vercel

I am facing an issue with using fileSystem methods like readdirSync on an API Route in NextJS. It functions properly locally but returns a 500 status code when deployed on Vercel. Here is the error message from Vercel's Function Logs: catch Error: EN ...

javascriptnode.jsnext.jsvercelnode.js-fs