Develop Reference

Why bootstrap modal is not closing?

Does anyone know what's wrong with below code? The modal is opened when I click the button that has to trigger this action, but when I click on close buttons that has data-dismiss="modal", it happens nothing.
<div class="modal fade show" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-modal="true" style="display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"> Schedule</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<form action="/schedule" id="modal-form" method="post">
<div class="input-container mb-3">
<textarea class="textarea-input" style="resize:none; width: 100%;" rows="5" maxlength="280" name="Text" required=""></textarea>
<br>
<div id="success-message" class="success-message mt-3" style="display: none;">
<span>Successfully scheduled</span>
</div>
<div id="error-message" class="error-message mt-3" style="display: none;">
<span>There was an error during scheduling</span>
</div>
</div>
<button class="btn btn-success" type="submit">Schedule</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="close btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

How to get dynamic data in bootstrap modal for each id by using laravel?

I am developing an app which requires to show the data at every click on my different list of icon. The problem is how to display data in to bootstrap modal according to id. Thanks in advance.
index.blade.php .
<div class="col-md-3">
<button type="button" class="btn btn-success " data-toggle="modal" data-target="#myModal" data-id="{{$post->id}}">Ajouter
</button>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
aria-hidden="true">
<div class="modal-dialog modal-lg" 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" >
<div class="container-fluid">
<div class="row">
<div class="col-md-12 ">
<div class="panel panel-default">
<div class="panel-heading text-center">Nouvelle annonce</div>
<div class=" form-group col-sm-6">
<img class="cart-img img-responsive" src="images/cover_image/{{$post->cover_image}}" alt="IMG-PRODUCT">
</div>
<div class=" form-group col-sm-3">
<span id="layer_cart_product_title" class="product-name layer_cart_product_title"><h2> {{$post->nom_comr}}</h2> </span>
<hr>
<span id="layer_cart_product_ti" class="product-name"><h4> {{$post->date_perm}}</h4> </span>
<span id="layer_cart_product_ti" class="product-name"><h4> {{$post->offre}}</h4> </span>
<hr>
<span id="layer_cart_product_ti" class="product-name"><h4> {{$post->pv_ht}}</h4> </span>
</div>

<button type="button" class="btn btn-success " data-toggle="modal" data-target="#myModal{{$post->id}}" data-id="{{$post->id}}">Ajouter</button>
<div class="modal fade" id="myModal{{$post->id}}" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
thats work for me

I solve my problem by passing the post id in data-target and also in midel in
<button type="button" class="btn btn-success " data-toggle="modal" data-target="#{{$post->id}}">Ajouter </button>
<div class="modal fade" id="{{$post->id}}" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">

Hidding Modal with jquery

This is my jquery code, i've to hide modal using jquery, i tried using 'hide' but it doesn't work!
$(document).ready(function () {
$('#modalButtonLogin').click(function (e) {
e.preventDefault();
$('#loginModal').modal()
});
$('#reserveButtonModal').click(function (e) {
e.preventDefault();
$('#modelId').modal()
});
$('#dismiss').click(function () {
$('#modelId').modal('hide');
});
});
I'm using the same ids but i don't know how to do it the id's are 'dismiss'
i have a problem, cause using data-dismiss it works but i need to know how it works in jquery
<!-- Modal Task's -->
<div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Reserve Table</h5>
<button type="button" class="close" aria-label="Close" id="dismiss">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="row p-2">
<div class="col-sm col-lg-2">
<h5>Section</h5>
</div>
<div class="btn-group align-self-center" data-toggle="buttons">
Non-Smoking
Smoking
</div>
</div>
<div class=" row p-2">
<div class="col-sm col-lg-2">
<h5 class="">Date and Time </h5>
</div>
<div class="mr-3 pb-2 ">
<input type="date" name="dateinfo" id="" placeholder="Date">
</div>
<div class="mr-3 pl-4">
<input type="time" name="" id="" placeholder="Time">
</div>
</div>
<div class=" row offset-lg-2 offset-1">
<button type="submit" class="btn btn-primary"> Reserve </button>
<button type="button" class="btn btn-secondary ml-2" id="dismiss">Close</button>
</div>
</div>
</div>
</div>

You can try to replace $('#modelId').modal('hide'); by $('#modalId').modal('toggle');

How to update a class inside modal body?

I've got a class <div id="modal-data"></div> which is inside a modal
This is the code:
<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header text-center">
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body"><div class="form-group"><div class="col-sm-10"><select class="js-source-states" style="width: 100%" id="timezone">
<div id="modal-data"></div>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>
With this piece of code:
$("#mymdl").modal({
fadeDuration: 1000,
fadeDelay: 1,
closeClass: 'icon-remove',
closeText: 'X'
});
var mymodal1 = $('#mymdl');
mymodal1.find('#modal-data').html("<option value='x'>Create</option>");
But its not working... Can any one help?

Try this
$(document).ready(function() {
$("#mymdl").modal({
fadeDuration: 1000,
fadeDelay: 1,
closeClass: 'icon-remove',
closeText: 'X'
});
var mymodal1 = $('#mymdl');
mymodal1.find('#timezone').html("<option>Hi there</option>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header text-center">
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-10">
<select class="js-source-states" style="width: 100%" id="timezone">
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>

Your DOM structure is wrong you wrote block element div inside select element which is invalid. It should be like following:
<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header text-center">
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body"><div class="form-group"><div class="col-sm-10"><select class="js-source-states" style="width: 100%" id="timezone">
</select>
<div id="modal-data"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
Also you should write your code under a specific callback, in this case you should in show.bs.modal callback:
$('#mymdl').on('show.bs.modal', function (e) {
var mymodal1 = $('#mymdl');
mymodal1.find('#modal-data').html("<h1>HI</h1>");
})

$('.modal-content').find('.modal-body').append('<p>append some html here</p>');
$('.modal-content').find('.modal-body').append('<h1>Hi</h1>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="mdlbtn">Close</button>
</div>
</div>
</div>
</div>
I think this is what you want. if it is i can explain you

Pagignation inside modal does not work

{include file="guest/guest-preview.tpl"} has the table with id = preview_invitees_table
<div class="container">
<div id="preview_modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="width: 170%;margin-left: -37%;">
<div class="modal-header">
<h4 class="modal-title"><center>招待プレビュー</center></h4>
</div>
<div class="modal-body">
{include file="guest/guest-preview.tpl"}
</div>
<div class="modal-footer">
<div class="bloc button">
<button type="button" class="btn btn-onhover btn-default" data-dismiss="modal">戻る</button>
</div>
</div>
</div>
</div>
</div>
</div>
JS
$('#preview_invitees_table').DataTable({ searching: false, "info": false });