No modal windows (Ask a question about the product)

[Serebro200]

Hello, if I click on btn Ask a question about the product

in consol is bug:
Uncaught TypeError: jQuery(...).modal is not a function

And no modal windows appeare


Phoca Cart ver: 3.5.8

[Serebro200]

And no modal appeare when user click on add to cart btn

bug:

Uncaught TypeError: jQuery(...).modal is not a function

probability bootstrap.js is not loaded before i try to call .modal()

[Jan]

Hi, which version of Bootstrap does your template use?

Yes, the bootstrap.js should be loaded before usually happens. Do you use some template framework or some feature which does not fit the Joomla rules and e.g. paste some JS libraries to bottom of the site instead of head?

Jan

[Serebro200]

Do you use some template framework or some feature which does not fit the Joomla rules and e.g. paste some JS libraries to bottom of the site instead of head?

No

Astroid Framework
Framework Version: 2.5.2
Template Version: 2.5.4

[Jan]

Hi, this explains it. In Astroid, some scripts are loaded in the bottom of page instead of in header - Joomla paste scripts to header, so there can be conflict. In such case you need to load the library twice (one with standard Joomla method to header, second to footer by Astroid). There was a link to Astroid forum which described it but as Astroid is not more active, it is recommended to switch to another template framework (e.g. Gantry, etc.)

Jan

[Serebro200]

Thanks!!

[Jan]

Ok

[warrenfelsh]

The $(…).modal is not a function is usually caused because scripts are loaded in the wrong order . The browser will execute the scripts in the order it finds them. If in a script you attempt to access an element that hasn't been reached yet then you will get an error. Make sure that you don't have a script above one that it requires. For example, bootstrap depends on jQuery , so jQuery must be referenced first. So, you must called the jquery.min.js and then bootstrap.min.js like the following:

<script src="/jquery-x.x.x.min.js"></script>
<script src="/bootstrap.min.js"></script>

Sometimes this warning may also be shown if jQuery is declared more than once in your code. The second jQuery declaration prevents bootstrap.js from working correctly.