AltoRouter conflicts with Bootstrap.js

For a muli laguage website for the routing i’m using AltoRouter. I have been using AltoRouter for various other multilingual websites without any problem. But for some reason the navigation in this website didn’t work (when clicking on a menu item nothing happened). Since yesterday evening late I am working to find out what could be the reason for this. One by one I have been removing the various plugins, stylesheets and other dependencies and put them back if it turned out that they did not have any influence on the operation of the navigation. I just removed the last plugin, Bootstrap.min.js, and it turned out that that’s the culprit. After removing it the navigation was working again. Does anyone know what the reason may be? I have been looking in the console but don’t see anything strange so far

I can hardly imagine that a server side PHP script conflicts with a client side javascript script. Most likely your bootstrap.min.js is conflicting with some other javascript script you’re using.

Do you have a link to the site so we can have a look?

@rpkamp. Thank you for the response. Sorry for the late reaction I had to run out.

Sounds logical. The only two other plugins I currently use are jquery-3.3.1 and popper.js. And I have defined any custom functions as yet. Since I assume that the conflict can not be between jquery and bootrap I will try it without popper.js.

No unfortunately I do not have this online as yet but I will keep you informed. Thanks again for your response

@rpkamp: Funny enough it is/was jquery-3.3.1 what was cauusing this. I will give it a try with a lower version since I need jQuery for some other functionality later on

@rpkamp. It took some time but I have it working. When loading jQuery after Bootstrap everything is working fine. Again thank you for the response

1 Like

@rpkamp. I was a bit to early with cheering. By placing jQuery below Bootstrap, the navigation from one page to the other is indeed working, but the dropdown, which I use as language picker, isn’t any longer. While on the other hand, as described in the opening post, jQuery is positioned above Bootstrap the dropdown is working but the navigation isn’t any longer. What could be the reason you think, and more importantly how can I solve this?

Read the documentation on bootstrap which jQuery versions they support and use that version.

@rpkamp. I obviously did that. They write:

and that is exactly the version that gives me the problems. So I have no idea how to solve this?

Could you post the exact HTML you’re using?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.