I am trying to get a modal to show upon redirect to a page.
I am following this response (Laravel how to redirect back to boostrap modal dialog window)
My controller:
return redirect('postings')->with('welcome_msg');
My view:
#if(Session::has('welcome_msg'))
<script>
$(function() {
$('#myModal').modal('show');
});
</script>
#endif
<div class="modal fade" id="myModal role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<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>
</div>
</div>
However, the modal is not showing upon pop-up. What am I doing wrong?
<div class="modal fade" id="myModal role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<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>
</div>
</div>
#if(Session::has('welcome_msg'))
<script>
$(function() {
$('#myModal').modal('show');
});
</script>
#endif
This may fix it. HTML has to load before javascript.
try this in your blade just before closing tag of </ body>
#if (session()->has('welcome_msg'))
<script>
$('#YourModalName').modal('toggle');
</script>
#endif
Related
I am a biginner of Laravel blade.
I wanted to split index.blade.php.
When the contents of morumoru.blade.php modal.blade.php are on index.html.it works well.
/view/camila/cabelo/index.blade.php
#yield('camila.cabelo.morumoru')
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
SAMPLE
</button>
#yield('camila.cabelo.blade')
/view/camila/cabelo/morumoru.blade.php
#section('morumoru.blade')
<ul>
<li>INDEX</li>
<li>SUN</li>
<li>MOON</li>
</ul>
#endsection
/view/camila/cabelo/modal.blade.php
#section('modal')
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">...</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-primary">OK</button>
</div>
</div>
</div>
</div>
#endsection
use #include('camila.cabelo.morumoru') and #include('camila.cabelo.modal') instead of #yield
use include instead of yield, and remove #section also #endsection from blade files
Top include like this #include('camila.cabelo.morumoru')
Bottom include like this #include('camila.cabelo.modal')
I know there few old posts about this issue but none of them is helping me. I'm trying to delete a row via Bootstrap4 model,
unfortunately I have to pass the clicked row value to model in order to delete it can someone please tell me how I can achieve this ?
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
<c:forEach items="${anslist}" var="ans">
</c:forEach>
<!-- Modal -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Delete Confirmation </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure, you want to delete this record ?</p>
</div>
<form action="/removeAns/${xxx id here xxx}" method="post">
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger btn-ok" >Delete</button>
</div>
</form>
</div>
</div>
</div>
You can use jquery for that i.e: whenever a tag is clicked get value of href and assign that to action attribute of form under modal.
Demo code :
//onclick of a tag
$("a").click(function(){
//get href value
var hrefs = $(this).attr("href");
console.log(hrefs)
//add to modal form
$("#modal_form").attr('action',hrefs);
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!--dummy data added in href -->
Click <br>
Click2
<!-- Modal -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Delete Confirmation </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure, you want to delete this record ?</p>
</div>
<!--added id to form-->
<form action="/removeAns/${xxx id here xxx}" id="modal_form" method="post">
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger btn-ok">Delete</button>
</div>
</form>
</div>
</div>
</div>
My code is like this.
#if (Session::has('message'))
<script>
$(document).ready(function () {
$("#mailModal").modal('show');
});
</script>
<div class="modal fade" id="mailModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="z-index:10000000;">
<div class="modal-dialog" role="document">
<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">
{{ Session::get('message') }}
</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>
#endif
Mail is sending successfully and also message is generating successfully but modal is not showing on page load. What is the problem in my code?
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.
$.ajax({
type : 'POST',
data : "",
url : '<?php echo site_url("adduser/register_user");?>',
success : function(data){
$('#error').modal('show');
}
});
the codes above is my code to show a modal but it didn't work. Is it possible to show a modal using ajax?
It seems you use Bootstrap right?
If you read the documentation there is a better way to achieve the same result:
In your main file:
<a data-toggle="modal" href="<?php echo site_url('adduser/register_user');?>" data-target="#myModal">Click me</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
And then in the remote file:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
This will show the default modal. More information in the manual: Bootstrap Modal