I am trying this sample bootstrap dropdown code. There is no error but my dropdown is not working
I have installed jquery-popper, jquery and bootstrap 5
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-
expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
This is how my angular.json looks like
` "styles": [
"./node_modules/#angular/material/prebuilt-themes/deeppurple-
amber.css",
"./node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css",
"node_modules/slick-carousel/slick/slick.scss",
"node_modules/slick-carousel/slick/slick-theme.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/slick-carousel/slick/slick.min.js"
]`
I have also included "node_modules/#popperjs/core/dist/umd/popper.min.js", in script array and tried but nothing happens. Am I missing something here
What version of bootstrap are you using? In case you are using v5, you should not import jQuery, as Bootstrap dropped jQuery in its latest version.
Our latest release, Bootstrap 5, focuses on improving v4’s codebase with as few major breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling.
(Taken from the Bootstrap About Page)
For some components (e.g. Popovers, Tooltips), you will need Popper.js. Make sure to include it by either passing both Bootstrap and Popper.js into the scripts section or just include the complete Bootstrap bundle which contains Popper.js like so:
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.js",
// other script files ...
],
You can also use the minified version of the bundle ([...].bundle.min.js)
Related
Can someone explain to me how to configure alpinejs in an ASP.NET Core MVC project and use it in a my .cshtml files?
I have already run npm install alpinejs and I have already imported it into my index.cstml file
<script src="~/node_modules/alpinejs/dist/alpine.js"></script>
However I have a problem when I make #click
<button class="outline-none focus:outline-none border-r border-gray-200 w-10 h-10 hover:text-indigo-500 active:bg-gray-50"
#click="format('bold')">
<i class="mdi mdi-format-bold"></i>
</button>
Thank you for help
the # is already a reserve symbol in asp.net, so you can escape it with ##click or use the longer binding syntax in Alpine of x-on:click
<!-- Service Policy Modal -->
<!-- <div class="modal modal-landing fade" id="servicePolicyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-body justify-content-center">
<h4 class="modal-title text-center mb-4" id="exampleModalLabel">
{{ trans('lang.service_policy') }}
</h4>
<img :src="publicPath+'/images/service-policy.png'" class="img-fluid mx-auto d-block mb-4" width="50%" alt="">
<div class="text-justify mb-4" v-html="custom_content"/>
<div class="row justify-content-center">
<div class="col-4">
<button type="button" class="btn btn-block btn-landing" data-dismiss="modal">
{{ trans('lang.close_btn') }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div> -->
I commented down this code in Vue JS, Laravel application but the problem is the section is still showing on the website. The changes are not reflected on the website.
Can you please help me out with this?
Simply making changes to the Vue files won't actually affect anything on the site, because the actual code that is rendered is in the public folder (most probably the public/app.js file). In order to compile the Vue files to the public folder, you need to run a command after making the changes. npm run dev or npm run prod are used for this. You could also run npm run watch to continuously watch for changes and automatically compile the assets instead of running a command manually each time you make a change.
You should see that each time you make a change and run one of those commands, the change appears also in a file in the public folder of the project. Do not edit the files inside the public folder directly, since if those commands are run /they are likely to be a part of the deploy procedure/, those changes will be overwritten by the newly compiled files from the source ones (those in resources folder).
I could bet that it's related to page chache. Open the Chrome de tools, under Network tab check "disable cache" and try again. Vue js precompiles the js code by chunking vendor files in small js files such as 1.js, 2.js, etc, which are loaded on demand while you navigate your app.
Your new change may be located in 1.js, so no matter the code change, if this file is loaded from cache and not from Network, you won't see the updates until cache refresh.
i am using Ajax with laravel, i have two buttons, Add and Update, what i am trying to achieve is, if i click on Update button,
Laravel #if statement should run,
#if(isset($teacher))
if i click on add button Laravel #else statement should run,
Complete Code:
<button class="btn btn-secondary" id="add" > </span > ADD NEW</button>
<button class="btn btn-secondary" id="update"> UPDATE OLD</button>
#if(isset($teacher))
#foreach($teachers as $teacher)
#endforeach
<button class="btn btn-secondary" id="update-t"> UPDATE Teacher</button>
#else
<button class="btn btn-secondary" id="add-t" > ADD Teacher</button>
#endif
You are misunderstanding the way Laravel Blade templates work.
Blade template is rendered into PHP, than executed to render HTML, which is sent to your browser to render it client-side. This is the moment when your JavaScript functions will start working, and they cannot interfere with what was previously rendered, as JavaScript will only 'see' the final HTML render.
Solution to your problem if you want to use AJAX, is to create some kind of API, which will be processed in AJAX's success function.
Need to open an htm page that is located on my local disk.
I'm running an application using php and xampp server.
I've tried in every way and not make it.
My application path is C:\xampp\htdocs\portal
My htm file path is C:\sistemas\test.htm
I can't move my test file and put it into portal folder.
when I click on the link just nothing happens.
here's my code
<li>
<a target="_new" href="file:///C:/SISTEMAS/test.htm">
<span class="ui-icon ui-icon-suitcase"> </span> Test
</a>
</li>
I've tried in Firefox 25 and IE10. Same result.
You cannot actually do like this but I guess your requirement is just including the content of test.htm. Using php your code can go something like this.
<li>
<a target="_new" href="test.php">
<span class="ui-icon ui-icon-suitcase"> </span> Test
</a>
</li>
and test.php would be including the content of test.htm
<?php require('../../sistemas/test.htm'); ?>
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown"> Reviews </button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>testuser 2012/08/12 12:25:42:836 PM</li>
<li>testuser11 2012/08/13 12:25:42:836 PM</li>
</ul>
</div>
I am using bootstrap.min.js v2.0.4 and jquery 1.7.2, tried with jquery 1.8.0 and 1.7.1 with same results
I have this js code in tbspopover.js -
jQuery(function(){
$('a[rel=popover]').popover();
});
Script Order
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="/vendor/bootstrap.min.js"></script>
<script src="/js/views/tbspopover.js"></script>
The js function to enable popover was called before the element was added to DOM. The DOM element wasn't added until after ajax call was done. Found a tip here
With an older Version (2.0.2) of Bootstrap it should work.
You can find a working example here.
Older Versions of Twitter Bootstrap can be found on Github here.
I had a similar issue, it was because font-size of .btn-group was set to ZERO!!