0

After upgrading the bootstrap in my application from 3.3.6 to 4 I started getting error error $(...).modal is not a function, which(modal) was previously working fine. Error

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 am using angular js. when there is a success, error or any info I use modal. I have tried to replicate the issue with fiddle.

I have just started working on angular so i am not sure how to fix.

Fiddle Link

In many post i researched it was suggested to make changes to 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;
 }

Also many link suggested to use noconflict like here. I am not sure how no conflict will work with angularjs

please suggest what i can do to fix the issue

DotNetBeginner
  • 412
  • 2
  • 15
  • 34
  • Can you post the full Error message you are getting ? –  Nov 13 '17 at 21:52
  • @sgiant please check the edit – DotNetBeginner Nov 13 '17 at 21:53
  • Are your loading your Jquery and Angular scripts BEFORE bootstrap ? –  Nov 13 '17 at 22:05
  • @sgiant yes I am. 1st jquery-{version}.js 2. angular js 3. bootstrap.js 4. bootstrap css 5. font awesome in bundle config. In html page1.jquery-ui.css 2. jquery-1.12.4.js 3. query-ui.js – DotNetBeginner Nov 13 '17 at 22:11
  • Alright how about placing the jquery-1.12.4.js just before bootstrap.js working ? –  Nov 13 '17 at 22:17
  • @sgiant Nope, not working. – DotNetBeginner Nov 13 '17 at 22:22
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158903/discussion-between-dotnetbeginner-and-sgiant). – DotNetBeginner Nov 13 '17 at 22:33
  • 1
    You need to include **popper.js** as well for **v4**, see [Getting Started Docs](https://getbootstrap.com/docs/4.0/getting-started/introduction/). Your [jsFiddle](https://jsfiddle.net/ADukg/15916/) updated and working. – vanburen Nov 13 '17 at 23:17
  • @vanburen you are my hero. is there a particular order in bundle config I should follow – DotNetBeginner Nov 13 '17 at 23:19
  • Yes, as far as the **Bootstrap Dependencies** go it's **jQuery**, then **PopperJS**, then **BootstrapJS**: you can refer to the [JS](https://getbootstrap.com/docs/4.0/getting-started/introduction/#js) section of the Getting Started. – vanburen Nov 13 '17 at 23:24

1 Answers1

0

One solution mentioned in their GitHub repo us to put this in your html:

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

Also you might need to disable ViewEncapsulation in app.component.ts.

See "Disable CSS Encapsulation" here for how to do it.

UPDATE:

It seems that in your fiddle you're missing the jQuery script file. I added that in yours and now it works:

here

Yaser
  • 5,609
  • 1
  • 15
  • 27
  • i am using angular 1 . the article is for 2 and above – DotNetBeginner Nov 13 '17 at 22:31
  • In that case this should help: https://stackoverflow.com/questions/42690497/angular-ui-modal-with-bootstrap-4 – Yaser Nov 13 '17 at 22:45
  • I have already implemented that . I have also mentioned that in the question. Its not working – DotNetBeginner Nov 13 '17 at 22:57
  • Could you please update your code with your import statements included? @DotNetBeginner – Yaser Nov 13 '17 at 23:02
  • I am sorry someone downvoted you. let me fix that for you. all my code is in the fiddle exactly how i used it. fiddle link is in my question. I dont think there is import in angularjs. I am not so sure though as in am very new to angular – DotNetBeginner Nov 13 '17 at 23:17
  • Maybe the word import has confused you. That means your script tags which brings in js and css files into your app – Yaser Nov 13 '17 at 23:48