<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!!
Related
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)
i am working on my new project and technology stack is: laravel 8 + Livewire V2 + Jetstream, to create a single page application (SPA). but I am still confused if its possible SPA in my selected technology stack or not.
I know Livewire no longer supports Turbolinks out of the box so they provided Turbolinks adapter. I have followed the documentation but seems like its not working. please help me to understand the issue and let me know if SPA is possible or not in Livewire version 2.
here is my code:
<div class="min-h-screen bg-gray-100">
#livewire('navigation-menu')
<!-- Page Heading -->
#if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
#endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
#stack('modals')
#livewireScripts
<script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks#v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false"></script>
Livewire Version 1 supported Turbolinks internally. Livewire Version 2 has removed internal support and extracted it into this plugin.
The goal of this livewire version 2 is to provide full Turbolinks/Turbo support in Livewire.
add hotwired/turbo package on your layout below #livewireScripts
add livewire/turbolinks package on your layout below hotwired/turbo package
#livewireScripts
<script type="module">
import hotwiredTurbo from 'https://cdn.skypack.dev/#hotwired/turbo';
</script>
<script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks#v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>
You need to install Turbolink module first, Please go Turbolinks documentation Here.
Support for Turbolink has been removed in Livewire 2. So you need to add an extra JS script to make it work.
More here => https://github.com/livewire/turbolinks
Just add this after your livewire script:
<script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks#v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>
Example:
#livewireScripts
<script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks#v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>
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.
I am having a strange issue where glyphicons are not loading through a Mac. I have tried Chrome v50 and Safari v9. The icon is either not there, or a strange box.
But they load up fine on a PC
Here are the simple buttons I'm using:
<button title="Include" id="addToList" class="btn btn-default center-block add"><i class="glyphicon glyphicon-chevron-right"></i></button>
<button title="Remove" class="btn btn-default center-block remove"><i class="glyphicon glyphicon-chevron-left"></i></button>
The CSS:
.glyphicon-chevron-right:before { content: "\e080"; }
Any help would be much appreciated!
It looks like your answer is in this article:
ASP.NET MVC 5 on Azure: "The resource you are looking for has been removed..." for SVG files
and here:
404 on static content (svg,woff,ttf) on Azure
I receive the following error message in "some" of my laravel webpages project:
This site can’t be reached
The connection was reset.
ERR_CONNECTION_RESET
Any advise please
I have found that the problem is because of the commenting syntax i am using. for example:
{{--
<div class="btn-group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-ok"></span>
</button>
</div>
--}}