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.
Related
I am working on the CRUD part of a Laravel app.
It is supposed that when the delete button of an entry is clicked, a modal show up and ask user to confirm delete the corresponding entry or not.
I tried to do this but it said the method written in vue modal template is not defined in the JS console of chrome browser when I clicked the button.
Sure I have defined it. Why does this happen and how to fix it?
If there is any similar example that demonstrate how to do it in vue,
please provide the link. Thanks!
This is the structure of my frontend code.
The blade.php
<button id="show-modal" class="btn btn-danger"
#click="triggerDeleteModal($project)">
delete</button>
<modal-delete></modal-delete>
/resources/js/app.js
Vue.component('modal-delete', require('./components/ModalDelete.vue'));
/resources/js/components/ModalDelete.vue
<template>
<div class="modal fade" tabindex="-1"
role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<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>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['project'],
methods: {
triggerDeleteModal(project) {
alert('Did something!' + project + " - project : " + this.project);
}
}
}
</script>
You got two options here. First the one LakiGeri mentioned you put the button inside the vue-template.
The second way is you just calling the the blade.php and you call two templates. First the template with the button and the modal-delete call. And after this you $emit the function from the inside of the modal-delete template.
Vue.js emit events
I would suggest the second way because so you can reuse the modal-delete Template.
I show you one of my examples: create.blade.php
...
#section('content')
<p>Neues Raster anlegen</p>
<div class="col-md-12">
<gridunits></gridunits>
</div>
#endsection
Now calling the first template gridunits. Inside this i forward the methods for the emit-events remove and add to the second template.
<template>
...
<div class="form-group">
<gridunititems
v-for="gridunit in request.gridunits"
:key="gridunit.id"
:gridunit="gridunit"
#remove="removeGridUnit"
#add="addGridUnit"
>
</gridunititems>
</div>
...
</template>
<script>
...
methods: {
addGridUnit(id) {
//doing things
},
removeGridUnit(idToRemove) {
//doing things
},
...
</script>
Second template gridunititems
<template>
...
<div class="input-group-append">
<button type="button" class="btn btn-outline-success" #click.prevent="$emit('add',gridunit.id)">+</button>
</div>
<div class="input-group-append">
<button type="button" class="btn btn-outline-danger" #click.prevent="$emit('remove',gridunit.id)">-</button>
</div>
...
</template>
create.blade.php calling first template
gridunits.vue calling second template and methods in script
gridunitsitems.vue button who emitting event
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 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');
});
I have some problem to delete data with confirmation (in this case using modal box) in laravel.
This is my delete button
{{ Form::open(array(
'route' => array('delete_spk', $spk_data->id),
'method' => 'put',
'style' => 'display:inline'
))
}}
<button class="btn btn-danger btn-line btn-rect" type="submit" data-toggle="modal" data-target="#delSpk" data-title="Delete SPK" data-message='Are you sure you want to delete this data ?'>
<i class="icon-trash icon-white"></i> Delete</button>
{{ Form::close() }}
This is the modal box
<!--MODAL DELETE SPK-->
<div class="col-lg-12">
<div class="modal fade" id="delSpk" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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="H4"> Delete SPK</h4>
</div>
<div class="modal-body">
<p class="help-block">Are you sure you want to delete this data ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-line btn-rect" id="confirm">Yes</button>
<button type="button" class="btn btn-primary btn-line btn-rect" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</div>
<!--END OF MODAL DELETE SPK-->
<!-- Dialog show event handler -->
<script type="text/javascript">
$('#delSpk').on('show.bs.modal', function (e) {
$message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text($message);
$title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text($title);
// Pass form reference to modal for submission on yes/ok
var form = $(e.relatedTarget).closest('form');
$(this).find('.modal-footer #confirm').data('form', form);
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#delSpk').find('.modal-footer #confirm').on('click', function(){
$(this).data('form').submit();
});
</script>
This is the route
Route::get('spk/destroy/{id}', array('as'=>'delete_spk','uses'=>'SpkController#destroy'));
And this is the Controller for delete the data
public function destroy()
{
$spk= Spk::find(Input::get('id'))->delete();
Session::flash('message', 'Successfully deleted the SPK !');
return Redirect::to('spk_view');
}
The modal box is working, but when I'm getting the ID to delete, this will be ended with results "method not allowed http exception". Can someone help me please?
This issue happens because you have defined the route as GET but submitting the form as PUT
If you define you route as below then it must work
Route::put('spk/destroy/{id}', array('as'=>'delete_spk','uses'=>'SpkController#destroy'));
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.