Bootstrap 3 and Angular UI.Bootstrap Accordion working together

Although I am aware that ui.bootstrap is not fully adapted to Bootstrap 3 yet, my app is mostly built using it and reverting back to version 2.3 just for this component is not an option.

Therefore, I am currently exploring my options.

Here's what I have attempted so far:

  1. Reverting to Bootstrap 2.3
    This caused all my styles to break... not a viable solution

  2. Sticking with BS3 and trying to use the accordion from https://github.com/angular-ui/bootstrap/tree/bootstrap3
    I tried including the code below the ui.bootstrap_0.7 library, replacing the accordion code in ui.bootstrap 0.7, and removing it to place it in a separate file. None of these approaches worked

  3. Sticking with BS3 and attempting to adapt the accordion styles from BS2.3
    While I was able to add a style to it using this method, the accordion functionality did not work correctly

In each attempt, no errors were displayed in the console...

I feel like I am lost in the dark, unsure of how to integrate the accordion into my code without having to start from scratch.
Any assistance would be greatly appreciated, thank you!

javascriptangularjsangular-uiangular-ui-bootstrap

Answer №1

For Bootstrap 3, panels should be used instead of the accordion class. To make this change in the template without affecting ui-bootstrap, I modified the module containing the accordion template. You can add this module to your js class (and ensure it loads after ui-bootstrap):

angular.module("template/accordion/accordion-group.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/accordion/accordion-group.html",
    "<div class=\"panel panel-default\">\n" +
    "  <div class=\"panel-heading\" >\n" +
    "    <h4 class=\"panel-title\"><a data-toggle=\"collapse\" ng-click=\"isOpen = !isOpen\" accordion-transclude=\"heading\">{{heading}}</a></h4>\n" +
    "  </div>\n" +
    "  <div class=\"panel-collapse\" ng-hide=\"!isOpen\">\n" +
    "    <div class=\"panel-body\" ng-transclude></div>  </div>\n" +
    "</div>");
}]);

angular.module("template/accordion/accordion.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/accordion/accordion.html",
    "<div class=\"panel-group\" ng-transclude></div>");
}]);

You can view this example on Plunker

Answer №2

If you only reference the "ui-bootstrap-tpls.js" file, it should work correctly.

Personally, I encountered a problem when referencing both files in this order:

ui-bootstrap-tpls.js
ui-bootstrap.js

In my case, the "ui-bootstrap" was taking precedence and overriding the templates.

Answer №3

mlim1972 provided a great solution, but I decided to take a different approach using the angular $provide decorator in coffeescript:

module.config( ["$provide", ($provide) ->
  $provide.decorator 'accordionDirective', ["$delegate", ($delegate) ->
  $delegate[0].templateUrl = "path/to/modified/accordion-group.html"
  $delegate
]

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

Exploring ways to display featured posts within specific category sections

I have 2 featured posts in 1 div id, one with a big class and the other with a small class. I want the big featured div to display posts based on categories. The code for the big featured post is shown below: <div class="main_feat"> ...

phpjavascripthtmlwordpress

Using Selenium WebDriver with JavaScript: Handling Mouse Events (mouseover, click, keyup) in Selenium WebDriver

I am currently working on integrating Selenium testing for mouse events with dynamically generated elements. Specifically, I am attempting to trigger a "mouseover" event on an element and then interact with some icons within it. However, I have encountere ...

javascripttypescriptseleniumselenium-webdriver

The search function in Select2 is not displaying the desired result

I'm encountering an issue with the search functionality when it uses Ajax to load data from a JSON file. For example, if I search for Yemen, the record for Yemen does not get selected or highlighted properly. Here is the complete source code - could ...

javascriptjsonjquery-select2

Utilize the JavaScript .send function to pass an array

Can an array be passed to a PHP page using the code below? If not, what modifications are needed in the code? function ajax_post(){ var hr = new XMLHttpRequest(); hr.open("POST", "get_numbers.php", true); hr.setRequestHeader("Content-type", "a ...

javascriptphparraysjson

I am looking to develop a customizable table where the user can input their desired information

Looking to create an HTML page featuring a 10x10 table with alternating red and green squares. After loading the page, a pop-up window will prompt the user to input a word, which will then appear only in the red squares of the table. While I've succes ...

javascriptphphtml

Unable to retrieve hours from MongoDB date array

Whenever I fetch data from my NodeJS+MongoDB webservice, I am able to retrieve the date format successfully. However, I am facing an issue when trying to extract hours from it. Here is how the date looks in MongoDB: https://i.stack.imgur.com/qxWGL.png I ...

javascriptnode.jsmongodb

Exchange the draggable elements between distinct div containers while keeping them in their original positions

Attempting to create an example showcasing Draggable jQuery with Bootstrap, everything is functioning smoothly so far. However, there are two things I am aiming to achieve: Swap the divs <div class='col-sm-12'></div> that were gen ...

javascriptjqueryjquery-ui

Is it possible to set a different default page index other than 0 in a material table using reactjs?

I have noticed that the default page index in the material table is set to '0', but the API I am currently using begins with a page index of '1'. Is there a way to adjust the default page index of the table to match that of the API? ...

javascriptreactjspaginationmaterial-uimaterial-table

What changes do I need to make in order for this code to be compatible with Google Sites?

I am working on creating a random redirect button and need to modify the code below in two ways: <script> <!-- /* Random redirect button- From JavaScript Kit (http://javascriptkit.com) Hundreds of scripts available for free! Please keep this cred ...

javascripthtmlurlhttp-redirectweb

Combining Files in Angular 2 for Optimal Production Deployment

What is the best method for packaging and combining an Angular 2 application for production? My goal is to have an index.html file and a single app.min.js file. Although the Angular 2 documentation mentions using webpack, I found it to be overly complex f ...

javascripthtmlangularjsbuildangular

Managing URL patterns in AngularJS ui.router: Tips and Tricks

When utilizing the "ui.router" angular JS module, does this mean that the module will have complete control over all URL navigation on the entire page? Currently, I am using the $stateProvider.state method to define URL and State mappings. However, it see ...

angularjs

Adjusting the React Material UI TextField behavior upon a change in value while maintaining the

I have an MUI TextField component that I would like to trigger a function when it changes, while still allowing it to function as usual (without being a controlled input). <TextField onChange={(e)=>{ doSomething(e.target.value) //perhaps call ...

javascriptreactjsmaterial-ui

Storing the results of an Ajax call in a global variable

What is the best way to store and access the output of an ajax call within a global variable? let globalOutput = []; $.ajax({ type: "GET", url: uri, dataType : "json", contentType: "application/json", data: { input: filterVa ...

javascriptjqueryajax

Error: The function `push` cannot be used on the variable `result` (TypeError)

Here is a snippet from my react component const mockFetch = () => Promise.resolve({ json: () => new Promise((resolve) => setTimeout(() => resolve({ student1: { studentName: 'student1' }, student2: { studen ...

javascriptreactjserror-handling

Updating component (`App`) during the rendering of another component is not allowed

I have encountered an issue with a react component that I am struggling to resolve. It involves a radial knob control, similar to a slider, and I am trying to achieve two main objectives: Adjust the knob and pass its value up to the parent component for ...

javascriptnode.jsreactjscomponents

Animation loading on React.js when the page or URL is changed

Just starting out with React and trying to incorporate a loading animation when the page/url changes on button click - check it out here: https://codesandbox.io/s/cthululel-7zmsl?fontsize=14 Successfully got the animation working on initial load, but runn ...

javascriptreactjsfrontend

During the Jasmine test, an error was encountered when trying to call a factory function that includes both a local and another function. The error message displayed

I have a factory with two functions and two local methods. I have written a Jasmine test case in which I expect the local method updateDetails and the factory function SavePref.savePref to be called when SavePref.saveDetails(values, prop); is invoked, as s ...

javascriptangularjsjunitjasmine

"Relating to meteorjs, admin users are akin to those in

Looking for a package or tutorial to create admin users similar to Django. I want to be able to create superusers through the terminal and have the ability to personalize user schemas with Collection2. Additionally, I would like to remove the option for ...

javascriptnode.jsmeteornpm

Tips for maintaining interactivity after a page refresh

$(document).ready(function () { $("#2").click(function () { $("#content").load("{% url 'about' %}"); }); $("#3").click(function () { $("#content").load("{% url ...

javascripthtmljqueryjquery-uijquery-plugins

An unexpected issue occurred: Unable to invoke method on NPObject

I am new to JSON and having trouble accessing object data. Here is the code snippet: <!doctype html> <html> <head> <meta charset="utf-8"> <title>ajax </title> </head> <body> <p id="p"></p& ...

javascripthtmljson