So I want to use bootstrap modal in my project, I followed the official bootstrap documentation about modal, to test it out I just simply copy and paste the code to my blade. and somehow after I press the button the modal is not showing up. I pretty much sure followed the documentation.
and I realized that this also happens to the dropdown function
can anyone help me with this?
Modal
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
...
</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>
Dropdown:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
shout out to Rouhollah Mazarei and Rwd after reading their comment, I did some recheck on the code and found out that the js and css include code is missing. It still works on my other blade so I thought it already included. thanks
Related
I have 3 components in my vue js
create.vue
list-user.vue
modal-role.vue
in my create.vue i call the 2 other component,
<template>
<div>
<modal-role></modal-role>
<list-user></list-user>
</div>
</template
these 2 components are all modal
modal-role.vue
<template>
<div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRole">
add members
</button>
<!-- Modal -->
<div class="modal fade" id="modalRole" tabindex="-1" aria-labelledby="modalRoleLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalRoleLabel">Role</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul class="list-group">
<li #click="selectRole(item)" data-bs-toggle="modal" data-bs-target="#modalUser" data-bs-dismiss="modal" class="list-group-item list-group-item-action" v-for="item in roles" :key="item.id"> {{ item.name }} </li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</template>
list-user.vue
<div class="modal fade" id="modalUser" tabindex="-1" aria-labelledby="modalUserLabel" aria-hidden="true">
<div class="modal-dialog" v-if="role">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalUserLabel">Choose members as {{ role.name }} </h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" #click="dismiss()"></button>
</div>
<div class="modal-body">
<ul class="list-group">
<li
class="list-group-item list-group-item-action"
v-for="item in users" :key="item.id"
>
{{ item.name + ' ' + item.surname}}
</li>
</ul>
<div class="row justify-content-center" v-if="!isLast">
<button class="btn btn-primary" #click="loadMore()">
View more
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" #click="dismiss()">Cancel</button>
<button type="button" class="btn btn-primary" #click="choose()" data-bs-dismiss="modal">Choose</button>
</div>
</div>
</div>
</div>
So in my create.vue when i have button from my modal-vue to show a modal with list of role,
in my modal-role.vue what i expected is when i select one role, it dismiss the modal on modal-role.vue and show a new modal that is in list-user.role but I got an error:
app.js:14656 Uncaught TypeError: Illegal invocation
at Object.findOne (app.js:14656:44)
at Modal._showElement (app.js:16567:38)
at app.js:16490:35
at execute (app.js:13914:5)
at app.js:16196:7
at execute (app.js:13914:5)
at HTMLDivElement.handler (app.js:13937:5)
and if tried to put the modal in list-user.vue to modal-role.vue, it work but if the second modal dismiss but i still have the overlay background from one of these 2 modals
EDIT
When i show the first modal, got 2 modal backdrop in my element.
I got the problem here, i put a v-if in my modal-dialog div in my list-user.vue, so my modal have no div dialog in mounted then modal bootstrap can't call it to show, so i move my if statement in my modal-content and it work well
I'm working on a spring boot project,
I want to pass a simple id to my modal, the modal is just for ask to the user if He confirm the item deletion, if he confirm i want to send to my controller class /profil/{id}
but i don't understand how to pass my object id to the modal, it's my first spring boot project, I have no bases in JS...
my html code :
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Rendre disponible
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Rendre disponible</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Voulez vous rendre ce topo à son propriétaire ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary">Confirmer</button>
</div>
</div>
</div>
</div>
</div>
Thanks for your help !
you can use th:data to pass parameters to modal.
<button type="button" class="btn btn-primary"
th:data-yourid="id_you_want_to_pass" data-toggle="modal"
data-target="#exampleModal">Rendre disponible</button>
And you can get this value using javascript. The following will be triggered as soon as modal is about to show.
$('#exampleModal).on('show.bs.modal', function(e) {
var id= $(e.relatedTarget).data('yourid);
//do whatever you want to do with this id
});
I'm using ace-admin template (http://ace.jeka.by/) for my CI3 project. I want to populate a modal form from my view. it's working if i put code of modal on the same view, exemple :
<a href="#modal-table" role="button" class="green" data-toggle="modal">
<button class="btn btn-sm btn-default" id="myBtn">
<i class="ace-icon fa fa-plus align-top"></i>
Modal
</button>
</a>
<div id="modal-table" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header no-padding">
Results for "Latest Registered Domains
</div>
<div class="modal-body no-padding">
azerty
</div>
<div class="modal-footer no-margin-top">
<button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
Closee
</button>
</div>
</div>
</div>
</div>
But if i change href to send it to controller like this :
<a href="<?php echo base_url();?>ctl/add/" role="button" class="green" data-toggle="modal">
<button class="btn btn-sm btn-success" id="myBtn">
<i class="ace-icon fa fa-plus align-top"></i>
New
</button>
</a>
and on controller :
$this->theme_view = 'modal';
$this->render('parametres/utilisateurs/_new', $data);
the render function :
if (isset($this->theme_view)) {
$template = 'modal';
} else {
$template = 'master_view';
}
$name = 'contents';
$this->load->view('layouts/'.$template, $this->template_data);
And the modal layouts :
<div id="modal-table" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header no-padding">
Results for "Latest Registered Domains
</div>
<div class="modal-body no-padding">
<?=$contents;?>
</div>
<div class="modal-footer no-margin-top">
<button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
Closee
</button>
</div>
</div>
</div>
</div>
the view appear not like a modal form but in new page.
Any idea for this ?
I am trying to insert a modal into a html page. I took the example from bootstrap page:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" 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">
...
</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>
It's not working(nothing pops up). I also use thymeleaf in my project and i think there is the problem but i don't know what it is. Thanks.
I am having problems to populate a select on a modal window with data retrieved from database, I would like to know if there's a shorter bullet-proof way to do it using Jquery.
select in modal window
Index.blade.php
<a href="{{ url('beneficios/create') }}" class="btn btn-primary mb-3"
role="button" data-toggle="modal" data-target="#modalbeneficio"
id="crear-beneficio">Crear Beneficio</a
Thanks in advance!
Just put somewhere in your index.blade.php the code for your modal, as described in bootstrap official docs:
<div class="modal" tabindex="-1" role="dialog" id="modalbeneficio">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<!-- Insert here whatever HTML you need to be displayed inside the modal --!>
</div>
</div>
</div>
</div>