Encountering the error message "AngularJS error: $(...).modal is not a function" after updating from Bootstrap 3.3.6 to version 4.0

Since updating the bootstrap version in my application from 3.3.6 to 4, I've been encountering an error stating that $(...).modal is not a function. This was previously working fine before the update.

angular.js:14700 TypeError: $(...).modal is not a function
at ReviewQueueController.js?V=1.2:122
at angular.js:20440
at completeOutstandingRequest (angular.js:6362)
at angular.js:6642

I utilize modal in AngularJS for displaying success messages, errors, or any other information. I tried to replicate the issue on a Fiddle but couldn't succeed.

As I am relatively new to AngularJS, I'm unsure about how to resolve this issue.

Link to Fiddle

After researching various posts, it was suggested to make changes to the CSS:

.fade.in {
  opacity: 1;
}

.modal.in .modal-dialog {
   -webkit-transform: translate(0, 0);
   -o-transform: translate(0, 0);
    transform: translate(0, 0);
 }

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
 }

Many sources also recommended using noconflict as mentioned here. However, I am uncertain about how to implement noconflict with AngularJS.

I would appreciate any suggestions on how to fix this issue.

jquerycssangularjstwitter-bootstrapmodel-view-controller

Answer №1

In their GitHub repository, one approach suggested is to include the following code in your HTML:

<!-- Enable bootstrap 4 theme -->
<script>window.__theme = 'bs4';</script>

You may also need to deactivate ViewEncapsulation in the app.component.ts file.

To learn how to disable CSS Encapsulation, check out the information provided here.

UPDATE:

If you're encountering issues with your fiddle, it could be due to the absence of the jQuery script file. I have included it for you so that everything functions properly:

Click here

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

Whenever I press a button, the data fails to be sent to the changePassword.php file using ajax in jquery

I tried to use this form to send data to changePassword.php, but unfortunately, the data did not get sent. <form class="form-horizontal" method="post"> <div class="form-group"> <label for="inputName" class="col-sm-2 control-labe ...

phpjqueryajax

A comparison of Kendo UI and jQuery UI: evaluating their dimensions and JavaScript capabilities

I've been wondering about the differences between Kendo and jQuery, and one thing is still unclear to me. Can someone clarify whether the new Kendo product utilizes jQuery or its own framework? I'm already using jQuery, so I'm trying to und ...

jqueryjquery-uikendo-ui

What is the best method to iterate through a jQuery array variable without any errors?

I am struggling with a PHP project where I need to create a json array of data values that will be used in a jQuery script. The array looks something like this: [3,94,83,141]. My goal is to leverage these values to manipulate the visibility of rows in a ta ...

javascriptjquery

Initial click not triggering ajax request

Here's the issue I'm facing. I have a link that triggers an ajax function to load content in a div. It works well in Chrome and Firefox, but there is a problem in IE. It behaves strangely - when I click on the link for the first time after the p ...

jqueryajax

Anticipated that the absence of a value would match the presence of an Object

Struggling with running AngularJS unit tests for $resource using Jasmine v2.0 and Karma v0.13, I managed to convert custom actions to newer syntax successfully. However, a specific type of test is giving me trouble, which I suspect is related to $httpBacke ...

javascriptangularjsjasminekarma-jasmineangular-resource

Creating a sleek navigation menu using Bootstrap 4

Currently tackling the Vertical Navigation bar which can be found at this location: Codeply This is my code snippet: <html> <body> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > ...

cssbootstrap-4

div that adjusts its max-width to always perfectly match the width of its contents

Check out this jsfiddle for more information: http://jsfiddle.net/tN6QE/2/ The CSS code we are using is as follows: div { display: inline-block; border: solid 1px black; padding: 10px; max-width: 200px; } We are dealing with two scenarios here. ...

htmlcss

Codeigniter raises an error message stating, "No file selected for upload," in cases where data is transmitted via Ajax

Having trouble inserting form data using Ajax and Codeigniter - encountering a 'You did not select a file to upload' error specifically with file uploads. Need help passing input file data through jQuery ajax. Below is the jQuery code snippet: ...

phpjqueryajaxcodeigniter

Guide on updating directory images by uploading a new one directly onto the site

As someone who is new to HTML, I have a question about updating images on my website through an "admin" page. Currently, I have two websites set up - the main site displays an image from the "images" folder, and the second site serves as an admin page. M ...

htmlcss

Is there a way to include two functions within a single ng-click event?

Is it possible to incorporate two functions in a single ng-click event? Below is the code snippet: <button class="cButtonSpeichern" ng-click="saveUser()">Speichern</button> In addition, I would like to include this function as well. alert ...

javascriptangularjshtml

Why is my jstree create_node event not being triggered even though the node is successfully created?

Even though I am able to successfully create the node, the event is not firing as expected. There are no reported errors in Firefox. What could be causing this issue... $("#treeFile1").jstree("create", null, "outside", { "attr" : { "rel" : "folder" } ...

jqueryjstree

What is the best way to transfer the value of one directive attribute to another directive in AngularJS?

For instance: <custom-main> <custom-sub1 att-name="test"></custom-sub1> <custom-sub2></custom-sub2> </custom-main> JavaScript Source Code bosAppModule.directive('custom-main',[&apos ...

javascriptjqueryangularjs

Can transitions be applied to links in this manner?

Having an issue with ajax requests, I am currently resorting to using JavaScript linking. This is how I normally link: window.location.href = ('file:///android_asset/www/custom/kontakty.html'); I am curious if it's possible to add a transi ...

javascriptjqueryjquery-mobile

What are the benefits of using `terminal: true` instead of simply deleting lower priority directives?

Related: How to comprehend the `terminal` property of directive? What is the rationale behind setting terminal: true and specifying a priority on a directive rather than removing lower priority directives? For instance, one could do: <tag directive-1 ...

angularjsangularjs-directive

The functionality of changing the checkbox to "checked" by clicking on the span is not

How can I create a toggle button with a checkbox using css and jquery? Clicking on the span representing the toggle button should change the checked property of the checkbox. Currently, the span does not change the property, even though it triggers the c ...

javascriptjqueryhtmlcss

Multiple columns contained within a span

I'm trying to create a panel that displays a list of values with corresponding labels. The requirement is for each label to be positioned above its respective value and aligned to the left. The layout should resemble the following: Label 1 Lab ...

htmlcss

Creating dynamic ColumnDefs for UI Grid is essential for responsive and flexible data

I am currently facing a challenge with my angular UI Grid setup for populating data in reports. With almost 20 reports to handle, I am looking to streamline the process by using one UI Grid for all of them. To achieve this, I am attempting to dynamically c ...

javascriptangularjsangularjs-scope

jQuery dataTables fails to load with all of its functionality

Issue Loading Datatable with Features function loadmaincattable(){ var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } ...

phpjquerydatatables

Suggestions for enhancing the functionality of this code by incorporating an additional dynamic chained selection box

Currently, I am utilizing a plugin offered by CSS-Tricks to create two chained select boxes using PHP, jQuery, and MySQL. I am contemplating the idea of introducing an additional box that will be dependent on the selections made in the first and second box ...

phpjquerymysqldrop-down-menudropdownbox

Here is how you can invoke a function in an AngularJS controller following a change in the $

My controller contains a method called goToNext() that is intended to change the angular.controller('myCtrl',function(){ function goToNext(){ $location.path('/abc.html'); // I also need to execute some code based on the DOM of ...

angularjs