Having trouble displaying the selection menu when using Angular Strap?

//test.js 

const dropdownMenu = document.querySelector('.dropdown-menu');
dropdownMenu.addEventListener('click', (event) => {
  alert(`You clicked on ${event.target.textContent}`);
});

// index.html

<div class="dropdown">
  <button class="btn btn-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Click to toggle popover
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Volvo</a>
    <a class="dropdown-item" href="#">Saab</a>
    <a class="dropdown-item" href="#">Mercedes</a>
    <a class="dropdown-item" href="#">Audi</a>
  </div>
</div>

I am able to get the button to show the menu, but I need help with making alerts pop up when selecting an item from the menu. Can someone assist me with this? Thank you!

Appreciate any assistance provided.

javascriptangularjstwitter-bootstrapangularjs-directiveangular-strap

Answer №1

Utilize the uib-popover-html attribute by following the example provided below.

<html ng-app="demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="PopoverDemoCtrl">
    <h4>Dynamic</h4>
    <button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" popover-placement="right" class="btn btn-default">Popover With Template</button>
  
  <button uib-popover-html="htmlPopover" popover-title="Choose" popover-placement="right" class="btn btn-default">HTML Popover</button>

    <script type="text/ng-template" id="myPopove.html">
        <div>{{dynamicPopover.content}}</div>
        <div class="form-group">
          <select class="form-control"><option value = "volvo"> Volvo </option> <option value = "saab"> Saab </option> <option value = "mercedes"> Mercedes </option> <option value = "audi" > Audi </option> </select>
        </div>
    </script>
   
</div>
     <script>angular.module('demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
  $scope.htmlPopover = $sce.trustAsHtml('<select class="form-control"><option value = "volvo"> Volvo </option> <option value = "saab"> Saab </option> <option value = "mercedes"> Mercedes </option> <option value = "audi" > Audi </option> </select>');
  $scope.dynamicPopover = {
    content: 'Choose car',
    templateUrl: 'myPopove.html',
    title: 'Car list'
  };  
  
});</script>
  </body>
</html>

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

Utilizing React and MaterialUI to create a dynamic GridLayout with paper elements

I am using the react-grid-layout library to create a dynamic grid where each item is a paper component from the React Material UI. However, I encountered an issue while running the application. The browser displayed the error message: "TypeError: react__W ...

javascriptreactjswebmaterial-ui

Tips for resolving this unhandled error in React TypeScript

After creating a program in React TypeScript, I encountered an uncaught error. Despite running and debugging tests and conducting extensive research on Google, I have been unable to resolve this issue on my own. Therefore, I am reaching out for assistance ...

javascriptreactjsnode.jstypescriptvscode-debugger

Tips for employing e.preventDefault within the onChange event handler for a select element

Is there a way to prevent the select tag value from changing using preventDefault? I have successfully prevented input from changing the value with event.preventDefault, but have not been able to do the same for the select tag. Here is an example code sni ...

javascripthtmlselectdom-eventspreventdefault

Switch out the specific content within the p tag

Looking to update the highlighted text within a p tag. The code below addresses handling new line characters, but for some reason the replacement is not working as expected. Check out the HTML snippet: <p id="1-pagedata"> (d) 3 sdsdsd random: Subj ...

javascriptjqueryhtmlreplace

Would it be considered poor design to send back a partial view with just a simple JavaScript alert in my ASP.NET MVC application?

I have a unique Action method that handles exceptions by returning an _error partial view: [AcceptVerbs(HttpVerbs.Post)] public PartialViewResult Register(string id, int classid) { try { Thread.Sleep(3000); User user = r.FindUser(i ...

c#javascriptasp.net-mvc-3

What could be causing my Apollo useLazyQuery to be triggered unexpectedly within a React hook?

import { useLazyQuery } from '@apollo/client'; import { useEffect, useState } from 'react'; import { ContestSessionResponseInfoObject, GetSessionDocument, HasAccessToRoundDocument, } from '@/graphql/generated/shikho-private- ...

javascriptreactjsnext.jsgraphqlapollo-client

Creating a Modal Dialog with Justified Tab and Dropdown Using Bootstrap 4.1

I am struggling with Bootstrap 4.1 as I try to align content to the right side. Specifically, I have a Navigation Bar that triggers a Modal Dialog containing Tabs. The dropdown menu on the far right of the Tab is what I want to justify to the right. Here a ...

javascriptjqueryhtmlcssbootstrap-4

Is it possible to verify if a bearer token has expired within an Angular application?

Is there a secure and efficient way to determine when a bearer token has expired in my Angular application? This is the issue I am facing: If I keep the app open in my browser, someone could potentially access sensitive information on my screen since I am ...

javascripthtmlangularjwtbearer-token

Having trouble with test coverage in Mocha using Blanket?

I have a Node application that I want to test and generate a coverage report for. I followed the steps outlined in the Getting Started Guide, but unfortunately, it doesn't seem to be working correctly. In my source code file named src/two.js: var tw ...

javascriptnode.jsmocha.jsblanket.js

The button is not being vertically centered when using the boostrap pull-right class

---------------------------------------------------------------- | Title | | Button | --> (using .pull-right) the button is not aligned vertically ------------------------------------------------------------- ...

csstwitter-bootstrap

I am experiencing difficulties with my focusin not functioning properly for the input element that I added

I am working on a program that includes a dynamic table with the following structure: <table id="selectedItems"> </table> I plan to use jQuery to append elements to it like so: var i=0; $("#selectedItems").html(''); $("#sel ...

javascriptjqueryhtml

Implementing a file download feature in Python when clicking on a hyperlink

I'm attempting to click on the href link below. href="javascript:;" <div class="xlsdownload"> <a id="downloadOCTable" download="data-download.csv" href="javascript:;" onclick=&q ...

javascriptpythonbeautifulsouppython-requestsmechanize

The global class variable encounters an error when trying to assign the value of "socket" to it

Within my class constructor, I am setting up a Socket connection and then storing the socket parameter in a global class variable (this.socket_variable = socket) so that I can access it across all functions in the class. CODE const { Server } = require(&q ...

javascriptnode.jsangularwebsocket

The functionality of the dynamic drag and drop form builder is not functioning as expected in Angular 12

I am currently developing a dynamic form builder using Angular version 12. To achieve this, I decided to utilize the Angular-Formio package. After installing the package and following the steps outlined in the documentation, I encountered an issue. The i ...

javascriptangularformioangular-formio

Steps for triggering a click event on a div with a button role within a class containing multiple elements

Can anyone help me figure out how to auto-click every button in Instagram's "hide story from" settings using console? I tried the following code: for (let i = 0; i < 300; i++) { document.getElementsByClassName('wbloks_1')[i] ...

javascripthtmljquerycss

Sending a XML file from a Vue application to an ASP.NET Core backend using axios

I'm encountering difficulties when trying to upload an xml file using axios to my asp .net server. Below is the code snippet I am using on the vue side to retrieve and upload the xml file: uploadXmlFile(file: any) { const rawFile = new XMLHttpRequ ...

javascriptc#typescriptvue.jsasp.net-core

Implementing V-model within an iteration

I am encountering an issue while trying to utilize v-model within a v-for loop, resulting in an error message. Is there a solution to make this functionality work properly? <ul class=""> <li class="" v-model="category.data" v-for="category in ...

javascriptvue.js

Unable to retrieve the value from a textarea when using Shopify Product Options by Bold

I'm currently facing an issue trying to retrieve the value of a textarea using Shopify's Product Options by Bold. The code works fine locally, but when I transfer it over to Shopify, I am unable to get the value. Despite looking at various resour ...

javascriptjqueryhtmlshopify

Whenever attempting to choose a rating, the MUI dialog continuously refreshes and resets the selected rating

I'm facing an issue with my MUI dialog where it keeps refreshing and resetting the selected rating every time I try to rate a movie. Any assistance on this matter would be highly appreciated. The RateWatchMovieDialog component is designed to display ...

javascriptreactjsmaterial-ui

Ways to effectively pass arguments to the callback function within the catch function in JavaScript

While working on my code, I suddenly felt the need to pass an extra argument, "msg", to the callback function renderError(). This extra argument should be passed along with the default error argument generated by the catch function itself. I tried doing i ...

javascriptcallbackasynccallback