Bootstrap dropdown problem in Laravel 5.7 - javascript

I started a new laravel project yesterday. Followed the guide from a guy in YouTube. Everything works until I installed laravel auth and realised none of the bootstrap dropdown works, even when i create new one from their website.
Firstly, I thought I messed something up in composer, because I wanted to get rid of the bootstrap and later I changed my mind and put it back. Then I created new Laravel project and started from scratch again. Even then my dropdowns are not working. I checked for similar problems in google, but none of them helped.

By default, bootstrap.bundle.js is not included inside your Laravel app. To add this:
Open 'resources/js/bootstrap.js' file and add the following code at the last line of this file.
require('bootstrap/dist/js/bootstrap.bundle');
Hit save and run npm run dev and it will work finally!

I had the same problem, it is happening because bootstrap has not been loaded properly and I simply solved it by pasting this link in <head> tag
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
and paste this in the lower region of <body> tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

It seems that your bootstrap has not been loaded at all. Make sure that you include the bootstrap library in your view. If you are using WebPack, check if you are mixing the external libraries into one, and include that one in your main blade file.

Sometimes you should change order of script links for that to work

Related

JavaScript is not working when using Bootstrap 5.3

I am building a website on Visual Studio Code and I'm using Bootstrap 5.3, but the functions are not working - buttons not expanding, carousel not rolling, etc. I'm a beginner, so I've been struggling to understand why :(
Do someone know what's the issue or had the same problem?
Many thanks!
I used the CDN from here: https://getbootstrap.com/docs/5.3/getting-started/download/
This is what I have in head - these are followed by my own css file only.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
*I didn't start my own JavaScript yet, only have the html and css files.
You will need to include both of the required resources. Put them both in your <head> element.
The Bootstrap5 css (style) bundle
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
The Bootstrap5 JavaScript Bundle
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Source: https://getbootstrap.com/docs/5.3/getting-started/download/
If you edit your post to contain the html itself then we can have a look and see what the issue is. This will most likely lead to better answers for you.

JQuery added via NuGet Manager doesn't work

I'm working on an ASP.NET Web Forms CRUD project and need to show a confirm dialog box every time a user want to perform an action over the SQL database.
For that purpose I' decided to use Jquery and searching in the internet I found a very good example but they use CDN for Jquery-Jquery ui- Jquery ui themes like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
and works fine, but I decided to use a newest version of Jquery always using CDN so I changed the above code for this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
and still working fine...my problem comes when I add the Jquery-Jquery ui from NuGet and then add those packages to my web form and comment the other lines that use CDN
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/jquery-ui-1.11.4.js"></script>
<link href="Content/themes/base/dialog.css" rel="stylesheet" />
If I do that the confirm dialog box doesn't appear at all but why? I guess that just change the source of the Jquery package from CDN to the one that the NuGET package added to my project shouldn't have to created any problem.
Could you please help me and tell me why my confirm dialog box doesn't show up.
this is what I got in my project after added Jquery ui via NuGet

Bootstrap CDN not working with angular

I am trying to make a small app in angular and am trying to include the Bootstrap CDN into the head section. My current head section looks like this:
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc3.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
</head>
When I go to refresh the page none of the bootstrap changed have been made. Is this something going on with Angular or am I just making a dumb mistake?
You have the wrong URL. You can plug it into your browser to see where it takes you.
yours:
http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css
correct one:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
To make sure you have the correct one, always get it from here: http://getbootstrap.com/getting-started/
For me, Instead of using CDN, Adding and referencing the bootstrap css file locally in dist folder(or whatever folder you have generated via Angular fixed the issue.

Issues using FuelUX with Foundation

I have a project built on top of Zurb Foundation, now I need to use some FuelUX components such as "wizard" and "tree". For that I include Twitter Bootstrap library (2.3.2 version downloaded from Bootstrap site) and also include "all.min.js" from FuelUX, when I use the same HTML markup as come in index.html but for some reason it doesn't work. So I tried to fire the plugin using $("#MyWizard").wizard() and get this error:
TypeError: $(...).wizard is not a function
$("MyWizard").wizard();
Any ideas in how to get this work?
How I include scripts
This is the order in which I include scripts:
<script type="text/javascript" src="/bundles/product/js/bootstrap/bootstrap.min.js?0.1"></script>
<script type="text/javascript" src="/bundles/product/js/fuelux/all.min.js?0.1"></script>
<script type="text/javascript" src="/bundles/stock/js/jquery-impromptu.js?0.1"></script>
<script type="text/javascript" src="/bundles/product/js/product.js?0.1"></script>
<script>
$("MyWizard").wizard();
</script>
This was also posted to https://github.com/ExactTarget/fuelux/issues/259 and from what I'm seeing, being careful to follow the instructions at https://github.com/ExactTarget/fuelux/wiki/Using-Fuel-UX#simple-integration-into-a-page should straighten things out. Hope this helps!

Use JGrowl with Theme roller

I want to know how to use my Jquery UI theme with JGrowl. The site says it can be done. The questions is answered here:
How do I themeroll jGrowl
and the asker seemed happy with the answer, however I did what the solution said: include the Jquery ui css file.
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<link type="text/css" href="css/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jgrowl/jquery.jgrowl.js"></script>
<link rel="stylesheet" href="jgrowl/jquery.jgrowl.css" type="text/css"/>
But it does not use my custom theme. I tried not linking to the jgrowl.css file, but then it did not work right at all.
Any ideas? Thanks!
You express concern that it might actually be working, but with unexpected coloring. To test this, switch to a different jQuery theme, and see if the jGrowl elements change.
If they don't, check the jGrowl version. According to http://forum.jquery.com/topic/jgrowl-question, version 1.2.0 doesn't use jQuery-ui themes automatically, but version 1.2.4 does.

Categories

Resources