I have a insert method on my vue.js with laravel, but... when i click on buton save twice, the function ´save()´ have duplicated datas and insert 2 times, i have tried solve this problem using v-on:click.stop.prevent="save()" but still doesnt working, so maybe a i can solve it on my ajax, but i dont have any idea of how to solve it with ajax, can someone help me?
Modal
<div class="modal inmodal" id="edit" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Register</h4>
<input type="hidden" v-model="competency.id">
</div>
<div class="modal-body">
<div class="form-group">
<label>Name: </label>
<input type="text" name="name" v-model="competency.name" class="form-control" placeholder="name"><br>
<label>Description: </label>
<textarea rows="5" name="" v-model="competency.description" class="form-control" placeholder="Description"></textarea><br>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" v-on:click.stop.prevent="save()">Save</button>
</div>
</div>
</div>
</div>
Vue.js
save: function(){
var self = this;
self.competency._token = window.Laravel.csrfToken;
$.ajax({
url: "competency",
type: "POST",
dataType: 'json',
traditional: true,
data: self.competency
}).done(function (data) {
self.filter();
$("#edit").modal('hide');
fillCompetency(null);
//self.list = data;
});
},
well you could use on:click.once="save()" instead and it won't execute save method until the component is destroyed if thats your requirement.
Related
here is the html file
it contains a model popup with fields name and email id. I need to edit and update them
<tr ng-repeat="item in collection">
<a ng-click=readOne(item.id) data-toggle="modal" data-target="#myModal">Edit</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modal-product-title">Edit</h4>
</div>
<div class="modal-body">
<div><b style='color: red'>{{modalstatustext}}</b></div>
<form id="form-dinminder">
<div class="form-group">
<label for="name" class="control-label">Name</label>
<input ng-model="name" type="text" class="form-control" id="form-name" placeholder="Name">
</div>
<div class="form-group">
<label for="email" class="control-label">Email ID</label>
<input ng-model="email" type="text" class="form-control" id="form-email" placeholder="Email ID">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btn-update-product" type="button" class="btn btn-warning" ng-click="updateProduct()">Save changes</button>
</div>
</div>
</div>
</div>
</td>
</tr>
controller.js
/***********edit************/
$scope.readOne=function(id){
console.log("selected agency id",id)
adminservice.selectedAgency(id).then(function(response){
$scope.aid = response.data[0].id;
$scope.name=response.data[0].name;
$scope.email=response.data[0].webaddress;
//update modal
$('#myModal').modal('show');
},function(error){
$scope.modalstatustext = "Unable to Update data!";
});
}
$scope.updateProduct=function(id){
var Name = $scope.name;
var Email = $scope.email;
service.updateAgency(Name,Email).then(function(response){
//alert(response.data);
$('#myModal').modal('hide');
showAll();//after updating all items are shown
},function(error){
console.log("error in updating ");
});
}
service.js
var updateAgency=function(Name,Email){
return $http({
method: "POST",
url: CONFIG.apiurl + 'edit',
params:{
name:Name,
webaddress:Email
}
});
i have no idea what i have done wrong.
Backend seems to work perfectly.
thanks
Your UpdateProduct function expects a parameter of id,
<button id="btn-update-product" type="button" class="btn btn-warning" ng-click="updateProduct(passidhere)">Save changes</button>
Remove the id parameter from your updateProduct function as this is not used.
I have a problem with a small project for class, which does not insert the data to the database, the data I collect with a bootstrap modal and pass them to the php file using ajax. The error comes at the time of using the script, I think it is correct, but I do not execute the actions.
This is the script I use:
<script type="text/javascript">
$(document).ready(function(){
$('#confirm').click(function() {
var tk = $("#task").val();
var dt = $("#date").val();
var at = $("#amount").val();
var st = $("#status").val();
$.ajax({
type: "POST",
url: "insert.php",
data: {"task": tk, "date": dt, "amount": at, "status": st},
success: function (msg) {
$("#task").val("");
$("#date").val("");
$("#amount").val("");
$("#status").val("");
}
});
});
});
</script>
And this is the 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">New task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body" id="task_insert">
<div class="form-group">
<label for="recipient-name" class="form-control-label">Task:</label>
<input type="text" required class="form-control" id="task">
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Date:</label>
<input class="form-control" required type="text" id="date">
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Amount:</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<input type="number" class="form-control" required id="amount">
<div class="input-group-addon">€</div>
</div>
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Status:</label>
<input type="text" class="form-control" id="status" >
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="confirm" class="btn btn-success" data-dismiss="modal">Confirm</button>
</div>
</div>
</div>
</div>
Thanks to everyone for your support
Hope this will help You
add jquery at top of page:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
then write your ajax script and get your value in insert.php page like:
$task = $_POST['task'];
echo $task;
if still not work then take form inside modal and submit form using jquery.
I am using ckeditor in bootstrap modal. The data in ckeditor should be loaded dynamically after ajax call. I am not able to load the data in ckeditor.
Code :
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Thank you Message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Subject:</label>
<input type="text" class="form-control" id="subject">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<?php $ckeditor->editor('message', '', array('id'=>'editor1')); ?>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
Script
$(document).on('click', '#sendemail', function(){
var target = $('#hidden_send_email_url').val();
var id = $(this).find('#hidden_id').val();
$.ajax({
url : target,
data : {id : id},
type : 'POST',
dataType: "json",
success : function(data){
var modal = $('#exampleModal').modal('show');
modal.find('.modal-body input#recipient-name').val(data.to)
modal.find('.modal-body input#subject').val(data.subject)
CKEDITOR.instances.editor1.setData(data.message)
},
error : function(){
alert('Error occured');
}
})
})
Error is:Uncaught TypeError: Cannot read property 'setData' of undefined
How to solve this?
Any help/suggstion is welcome. Thanks.
I just fixed this issue by removing the id attribute from the textarea
I've a Bootstrap modal for changing a user's password. The problem, however, is that no matter what I try I cannot get the event to fire, be it via onclick or by attaching the button to an event using .on. It simply will not recognise it.
I've tried putting the <script> tags above the modal, below the modal, and even inside the modal, only to always have onclick return Uncaught ReferenceError: updatePassword is not defined. I then removed the onclick, assigned an ID to the submit button, and tried $('#update-password').on('click', function() { ... }); but this wasn't recognised at all.
The culprit in all of this is almost definitely the Bootstrap modal, and I'm guessing it's got something to do with how the browser handles it upon page load.
--
Modal
<!-- Modal -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" role="dialog" aria-labelledby="changePassModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="changePassModalLabel">Change Password</h4>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="alert alert-password" style="display: none;">
<p></p>
</div>
</div>
<form role="form" action="#" method="post">
<div class="form-group">
<label for="password-current">Current Password<span>*</span></label>
<input type="password" class="form-control" id="password-current" name="pass-curr" placeholder="Current password...">
</div>
<hr>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="password-new">New Password<span>*</span></label>
<input type="password" class="form-control" id="password-new" name="pass-new" placeholder="New password...">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="password-new-conf">Confirm New Password<span>*</span></label>
<input type="password" class="form-control" id="password-new-conf" name="pass-new-c" placeholder="Confirm new password...">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="updatePassword()">Update Password</button>
</div>
</div>
</div>
</div>
Script
<script>
function updatePassword(){
console.log('foo');
/*$.ajax({
url: url+"ajax/update_password",
data: {pass-curr : pass-curr, pass-new : pass-new, pass-new-c : pass-new-c},
async: false,
success: function(data) {
},
error: function(data) {
$('#alert-password').removeClass('alert-success').addClass('alert-danger').html('<p><strong>Sorry, an error occurred!</strong></p><p>'+data.additional+'</p>').slideDown(200, function() {
$('#alert-password').delay(4000).slideUp(200);
});
}
})*/
};
</script>
My apologies if this has been asked before. The only questions I could seem to find were those asking how to launch a modal through onclick.
The problem is that your event is not getting binded with button
Please find the JSFIDDLE here
In your HTML - do the following in the script tag
<head>
<script>
function updatePassword(){
console.log('updatePassword');
}
$(document).ready(function(){
// $('.btn-primary').on('click',function(){ - This too works
// console.log('foo');
//});
$('.btn-primary').on('click',updatePassword);
});
</script>
</head>
I have a form inside a bootstrap modal that I want to submit via an Ajax request. I've followed along closely with this post. For some reason, I can't get the form to actually submit. Here's the HTML for my modal.
<div id="modal-close" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal1" 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>
<h3 id="myModalLabel">Edit Introduction</h3>
</div>
<div class="modal-body">
<form id="modal-form-close" method="post">
<input type="hidden" name="event_timestamp" value="{{event.timestamp}}">
<input type="hidden" name="event_desc" value="{{event.desc}}">
<input type="hidden" name="status" value="closed">
<input type="text" name="resolution" value="">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" data-dismiss="modal" id="modal-close-submit">Save changes</button>
</div>
</div>
</div>
</div>
And here's my JavaScript:
<script>
$(function(){
$('#modal-form-close').on('submit', function(e){
e.preventDefault();
$.ajax({
url: '/events/edit/{{event.event_id}}/script',
data: $('#modal-form-close').serialize(),
type: 'POST',
success: function(data){
alert('successfully submitted')},
error: function(data){
alert('something went wrong')
}
});
});
});
</script>
With the javascript written this way, nothing ever happens when I press submit the form. However, if I change the function to .on('click'), things work as expected. What am I missing?
Found the answer here.
I needed to wire the "click" action back to the submit button.
$('button#submit').on('click', function(e){
And add an id=submit to the submit button
<button id="submit" class="btn btn-primary" data-dismiss="modal">Save changes</button>
It's amazing how far you can get copy-pasting code from stack overflow.
Try to add this type in your button
<button type="submit" class="btn btn-primary" data-dismiss="modal" id="modal-close-submit">Save changes</button>
I do this:
give a form an ID <form id="submit_modal">
make a button type="button" and tells him what to do when click onClick="document.getElementById('submit_modal').submit();". So the submit button will looks like this :
<button type="button" class="btn btn-primary" onClick="document.getElementById('submit_modal').submit();">Submit</button>