My bootstrap modal footer just doesn't show up.
Main View
<div class="modal fade" id="ModalId">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal">Log</button>
</div>
<div class="modal-body">
<div id="form">
<div id="ModalBodyId">
#Html.Partial("PartialViewName");
</div>
</div>
</div>
<div class="modal-footer"> // this part doesn't show up
<button type="button" data-dismiss="modal" onclick="SaveNow()";>Edit</button>
</div>
</div>
</div>
</div>
Here is what loads the partial view into the modal. I had to add the below code for the validation to work. The validation works fine now, however i do not see the button which is contained inside the modal footer.
$("#ModalId").click(function () {
var form = $("#ModalBodyId").closest("form");
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);
$.ajax({
url: "/ControllerName/ActionName",
type: "GET",
data: $("#ModalBodyId").serialize(),
cache: false
});
});
If i remove the #Html.Partial("PartialViewName"); from modal-body then the modal-footer shows up.
Related
I am using a modal, and when opens the modal then close it, then open it again to add user, it says page expired upon submitting.
here is the my modal with my form
<div class="modal fade" wire:ignore.self id="studentModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Patient Registration</h5>
#if(Session::has('message'))
<p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{
Session::get('message') }}</p>
#endif
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="closeReset1" onclick="resetInput()"></button>
</div>
<!-- START FORM -->
<form action="add" method="POST">
#csrf
<!-- START MODAL BODY -->
<div class="modal-body">
</div>
<div class="modal-footer"
</div>
</form>
</div>
</div>
here is my route
Route::post('/add', [App\Http\Livewire\UHispatients::class, 'savePatient'])->name('registerPatient');
if you are using the naming route and check your model fillable
<form action="{{route('registerPatient')}}" method="POST">
#csrf
<!-- START MODAL BODY -->
<div class="modal-body">
</div>
<div class="modal-footer"
</div>
<button type="submit">submit</button>
</form>
As I can see, you just forgot to put action for your form in your modal.
If you submit using the submit button, then your problem is using the route path "add" instead of using the route path or route name.So as your route has name you can use it like this :
<form action="{{route('registerPatient')}}" method="POST">
#csrf
<!-- START MODAL BODY -->
<div class="modal-body">
</div>
<div class="modal-footer"
</div>
<button type="submit">submit</button>
</form>
If you're submitting your form with Ajax, then the csrf tag should be sending with your Ajax request. So, your Ajax header should be like this :
<script type="text/javascript">
$('#YOUR_FORM_ID').on('submit',function(e){
e.preventDefault();
let name = $('#name').val();
$.ajax({
url: "{{route('registerPatient')}}",
type:"POST",
data:{
"_token": "{{ csrf_token() }}",
name:name,
},
success:function(response){
console.log(response);
},
error: function(response) {
console.log(response);
}
});
});
</script>
I´m in a point where i need to show a success(or not) message, i like modals because they freeze everything behind(the main view) and show that little box with some kind of message. I have seen many examples, but most of them are showing these "alert" boxes per page and i think i should have a view(called modal) and every time i need to show it, i just pass the proper arguments and the view would show up.
What i have done:
Created a view called modal.
Created a controller with a method that will receive the arguments.
Created a route to the controller.
$.ajax({
method: 'POST',
url: '/angariacoes/insertImovel',
dataType: "json",
data: {"_token": "{{ csrf_token()
}}",values,eachImage,eachImageThumb},
success: function(response){
window.location.href='/popup/popup';
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
But now, how do i show that view(that has boostrap modal code) as a modal? Anyone?
Thanks, regards
Put a div inside of the modal body and then you can just pass back a view as your response:
$.ajax({
method: 'POST',
url: '/angariacoes/insertImovel',
dataType: "json",
data: {"_token": "{{ csrf_token()
}}",values,eachImage,eachImageThumb},
success: function(response){
$('#myAjaxTarget').html(response);
$('#myModal').modal('show');
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
Controller:
return view('my_view', compact($data));
Just make sure the actual modal part is on the view that you want the pop up to be. Create a separate blade that has the modal content.
So I have the_main_view.blade.php, and in it I have put:
<div class="modal fade" id="myModal" tabindex="-1" role="img" style="overflow: hidden">
<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="">Modal Title</h4>
</div>
<div class="modal-body" id="myAjaxTarget">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And we have a different view, my_view.blade.php that is being returned via the Controller method mentioned above:
<span>Literally any HTML</span>
So the response from the ajax call is just my_view, which you use to replace the HTML content of #myAjaxTarget with. So the end modal will look like this:
<div class="modal fade" id="myModal" tabindex="-1" role="img" style="overflow: hidden">
<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="">Modal Title</h4>
</div>
<div class="modal-body" id="myAjaxTarget">
<span>Literally Anything</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Which is then shown with the $('#myModal').modal('show') method.
i wanna put data into database through bootstrap modal with ajax. But after submit data button on modal the modal not close automatically. How i can fix this.
Here is code of Bootstrap modal
<!-- 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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is ajax code
<script type="text/javascript">
***
SOme Code Here
****
$.ajax({
type: 'GET',
url : "YOu URL",
data: {},
success: function(feedback){
$('#feedback').html(feedback);
}
});
});
});
</script>
In your success method, you call to close the model by using
$('#yourModal').modal('hide');
Btw, it is advisable to do a http POST rather than a GET for submissions.
The syntax for modal closing seems fine. But I'm not sure if you are targetting right modal element. See if the target id on which you are triggering the modal close code is right. Hope it solves your problem.
I have been toubleshooting an ajax request for a contact form. The form will load field errors with an ajax request, but it wont submit the form after the response. One thing to note is that I am trying to submit the form with a button outside the form tag, but even with one inside the tag it only submits once.
My ajax script:
$('#modal-form').submit(function(e) {
e.preventDefault();
var form = $(this);
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
success: function(data) {
if (!(data['success'])) {
// Here we replace the form, for the
form.replaceWith(data['form_html']);
$('#modal-form').off("submit");
}
else {
// Here you can show the user a success message or do whatever you need
$('#myModal').modal("hide");
}
},
error: function () {
$('#error-div').html("<strong>Error</strong>");
}
});
});
My form:
{% load crispy_forms_tags %}
<div class="container">
<!-- Modal -->
<div class="modal fade container-fluid" id="myModal" 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><span class="glyphicon glyphicon-envelope"></span> Email Me</h4>
<div id="success-div"></div>
</div>
<div class="modal-body">
<div class="row-fluid">
<div id="form">
<form id="modal-form" class="form-horizontal" method="POST" action="{% url 'emailme_success' %}">
{% csrf_token %}
{% crispy emailme_form emailme_form.helper %}
</form>
</div>
</div>
</div>
<div class="modal-footer">
<div id="error-div" class="pull-left"> </div>
<button name="submit" type="submit" class="btn btn-success pull-right" id="modal-submit" form="modal-form"><span class="glyphicon glyphicon-send"></span> Send</button>
</div>
</div>
</div>
</div>
</div>
I am using codeigniter to create my website. I have a dropdown menu in my first page that contains links like 'Profile', 'Edit' etc. When i click on the link (profile) it should display the bootstrap modal with corresponding user data. Used jquery to get the current id and ajax to retrieve data from database. But, when i tried to load the bootstrap modal with the response data, it displays nothing. What should i do to load the modal with ajax response data.? The response is an array containing user name, address, phone number etc.
Modal HTML
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog">
<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">Modal Title</h4>
</div>
<div class="modal-body">
<div id="UserName"></div>
<div id="Address"></div>
<div id="Phone"></div>
</div>
<div class="modal-footer" id="buttons-box">
<button type="button" class="btn default" data-dismiss="modal">Close Modal</button>
</div>
</div>
</div>
</div>
your jQuery script
$.get('your_server_script.php', {UserId: 'UserId'}, function (response) {
$('#UserName').text(response.UserName);
$('#Address').text(response.Address);
$('#Phone').text(response.Phone);
$('#MyModal').modal('show');
});