Bootstrap navbar collapse menu not working with Turbolinks.
Working scenario
On page load
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapse collapse" id="menu"> </div>
Click menu and dropdown
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapse in" id="menu" style="height: auto;"> </div>
Click menu again and collapse
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapse collapse" id="menu" style="height: 1px;"> </div>
Not working (after navigating to any page)
On page load
the same html, no need to repeat
Click menu and dropdown
the same html, no need to repeat
Click menu again and collapse
3.1. Transient change observed in the debugger
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapsing" id="menu" style="height: 96px;"> </div>
Note: class="navbar-collapsing" and height: 96px;
3.2. And then go back to the same state
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapse in" id="menu" style="height: auto;"> </div>
Note: Same html as in step 2.
Libs versions:
Turbolinks 2.1.0
JQuery 2.0.3
Bootstrap 3.0.3
I hope someone can come up with a real answer or an explanation.
The responsible here is Turbolinks. And the workaround is to not load the Turbolinks javascript.
In the file
app/assets/javascripts/application.js
Delete this line
//= require turbolinks
Dirty Solution will be to put the following in your application.js
$(document).on("page:change", function() {
$(".navbar .dropdown").hover((function() {
$(this).find(".dropdown-menu").first().stop(true, true).delay(150).slideDown();
}), function() {
$(this).find(".dropdown-menu").first().stop(true, true).delay(50).slideUp();
});
});
Mind that it is change not load
Other solution.
Making permanent element. With jQuery open or close the dropdown.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="button-dropdown" data-turbolinks-permanent> Button</button>
Doc from Turbolinks
https://github.com/turbolinks/turbolinks#persisting-elements-across-page-loads
Add this on your headers.
<meta name="turbolinks-visit-control" content="reload">
Related
I have Problem when trying to make Bootstrap Modals to show PDF Document using <embed src="./pdfFiles.pdf"></embed> Tag. I am using Bootstrap Version 4.5
When user click the button to trigger the modals, Bootstrap modals normally displays PDF document. But, The problem appear when user close the modals and show it again. instead of displaying PDF Document, modals displays blank document.
EDITED
My Code Shown below.
Bootstrap CDN
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<title>PDF Show</title>
Show the modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">PDF Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<embed src="http://localhost/pdfFile.pdf"></embed>
<embed src="http://192.168.0.13/pdfFile.pdf"></embed>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I already contained the issue, The PDF Failed to display only when I use the IP address (or base_url() in Codeigniter) to fill pdf link in src="http://192.168.0.1/pdfFile.pdf"
No problem appear when I use http://localhost/pdfFile.pdf
<embed src="http://localhost/pdfFile.pdf"></embed>
<embed src="http://192.168.0.1/pdfFile.pdf"></embed>
I am building a livewire-based application which I came to a point where I need wire:click event to fire a function in the livewire component class as well as open a Bootstrap Modal.
Without the wire:click event, the Bootstrap Modal opens.
Without the Bootstrap Modal id, the wire:click event works just fine.
With both the two, the Modal opens but hides (not dismissed) forever, until I reload the page before I could do anything.
By default when you create livewire using php artisan make:livewire --name, the view part comes with <div> //comment </div> tag. So, whenever the place the Modal inside the div tag the above problem occurs.
However, if the place the Modal in outside the div tag it works fine BUT NOT RECOGNIZING THE LIVEWIRE VARIABLES
I want to know;
If the livewire doesn't support Bootstrap Modal or having conflicts with the Modal scripts.
If one event can not be fired twice at the same time (wire:click and default click event).
Why except tags are enclosed inside the <div> </div> before livewire recognizes it.
<a href="#" wire:click="edit({{ $file->id }})" class="mr-1 edit" data-toggle="modal" data-target="#editFileModal">
<i class="align-middle fa fa-edit"></i>
</a>
By adding wire:ignore.self to the root element of my modal fixed it for me.
Modal trigger button.
<button wire:click="updateModal({{ $item->id }})" type="button" class="btn btn-sm btn-label-brand btn-bold" data-toggle="modal" data-target="#updateModal"> Update</button>
Example modal dialog.
<div wire:ignore.self class="modal fade" id="kt_modal_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient" class="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient" wire:model="recipient">
</div>
<div class="form-group">
<label for="message" class="form-control-label">Message:</label>
<textarea class="form-control" id="message" wire:model="message"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
You could use Alpine.js (that comes with Livewire) to fire both the wire:click and the toggle of the modal. By doing this you could even listen for the wire:click call to complete before you open the modal, if that suits you better.
<a href="#" x-on:click="$wire.edit({{ $file->id }}); $('#editFileModal').modal('show');" class="mr-1 edit">
<i class="align-middle fa fa-edit"></i>
</a>
I was having the exact same issue, here is my solution:
Instead of using the attribute data-target="#myModal" to show myModal when the button is clicked, I just use wire:click function to do that. ie:
<button class="btn btn-sm btn-danger" wire:click.prevent="myFunction({{$some_id}})">...</button>
In myFunction, do whatever you want, after that, add:
$this->dispatchBrowserEvent('openModal', ['someParameter' => 'some value']);
In the view file, add:
<script>
window.addEventListener('openModal', event => {
$('#myModl').modal('show');
//alert('parameter: ' + event.detail.someParameter);
})
</script>
See https://laravel-livewire.com/docs/2.x/events#browser for more info
I am converting a simple webapp from Bootstrap to Foundation framework. What is the equivalent of
$(...).modal()
?
It's the reveal component:
https://get.foundation/sites/docs/reveal.html
<div class="reveal" id="exampleModal1" data-reveal>
<h1>Awesome. I Have It.</h1>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>
$(document).foundation();
I am using Bootstrap4 and in my navbar i have a button to open a modal.I have added jquery,popper and bootstrap js in correct order as mentioned in bootstrap website .I have to click this button 5-6 times continuously to open the modal
<asp:Button ID="btnUserDetails" runat="server" Text="USER DETAILS" data-toggle="modal" data-target="#userDetails" />
my modal is
<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" >
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<asp:Label ID="lblLoginID" runat="server"></asp:Label><br />
<asp:Label ID="lblIPAddress" runat="server" ></asp:Label><br />
<asp:Label ID="lblSystemName" runat="server" ></asp:Label><br />
<asp:Label ID="lblVersionInfo" runat="server" ></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I tried using javascript to open the modal by using this code
<asp:Button ID="btnUserDetails" runat="server" Text="USER DETAILS" data-toggle="modal" data-target="#userDetails" OnClientClick="return openmodal();return false;" />
<script type="text/javascript">
function openmodal() {
$('#userDetails').modal('show');
}
</script>
However this does not work .My javascript function is being called as i put an alert message and tested .There is something weird happening with vertical scroll bar though on click of the button ,it shows up for sometime on click of button and vanishes i think once button click event ends .
The issue is with "fade" in the modal
<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" >
i removed fade and used "show" and the modal is working
<div class="modal show" id="userDetails" tabindex="-1" role="dialog" >
also i added a javascript function for the button that triggers the model
<script>
$( '#btnUserDetails').click( function(){
$( '#userDetails').modal('show');
});
</script>
I'm no fan of the blocking browser confirmation dialogues currently used for delete confirmations by phoenix_html. Given that Phoenix ships with Bootstrap by default, how do I integrate the Bootstrap modal component with Phoenix?
I've implemented the delegation of this dialogue to a Bootstrap modal component if (and only if) jQuery is available and a suitable DOM element is present.
Copy this modal.js gist to the web/static/js folder in your Phoenix project.
Comment out the import "phoenix_html" line in web/static/js/app.js
Include the HTML for a Bootstrap modal component in your HTML template. The Bootstrap documentation advises to:
Always try to place a modal's HTML code in a top-level position in
your document to avoid other components affecting the modal's
appearance and/or functionality.
Make sure that your HTML includes the id="phoenix-bs-modal" on the top-level <div class="modal">, and that a primary (confirmation) button <button class="btn-primary"> is present in the modal:
<div class="modal fade" id="phoenix-bs-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
The message passed in via the data-confirm attribute on the delete link is forwarded to the modal body.
This has been useful for me to get a coherent layout. I'm putting my solution out there because hopefully it's useful to others as well.