I try to pass id to form in modal, but i got error The POST method is not supported for this route. Supported methods: GET, HEAD. Although I use it.
this is a web route:
Route::post('bill/{id}', 'MemberController#addBill')->name('bill');
this is the view :
<button type="button" data-toggle="modal" data-target="#message" class="btn btn-info btn-lg" data-id="{{ $r->id }}" ></button>
this is a modal
<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">اثبات الدفع</h4>
</div>
<div class="modal-body">
<p>من فضلك قم بادخال صوره التحويل البنكى</p>
<form action="" method="post" id="upload_form" enctype="multipart/form-data">
#csrf
<div class="form-group">
<input type="file" name="select_file" id="select_file">
</div>
<div class="modal-footer">
<button type="submit" name="upload" id="upload" class="btn btn-primary" value="Upload">jj</button>
</div>
</form>
</div>
</div>
</div>
</div>
this is a ajax request :
<script type="text/javascript">
$('#upload').click(function(e){
e.preventDefault();
var button = $(event.relatedTarget);
var id = button.data('id');
var formData = new FormData($('upload_form')[0]);
$.ajax({
type: 'POST',
url : '/member/bill/'.id,
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function(d){
console.log(d.message);
}
});
</script>
please help me!
01. check your MemberController, addBill() method
public function addBill(Request $request) {
// your code here...
}
Related
I'm trying to redirect on button click based on visitor location and I have modal with two windows. As well as using freegeoip.net:
I'm using this with Wordpress: script correctly hooked to wordpress and running but redirect doesnt work.
I'd equally want this modal to appear only once per visit and across all navigations through the site not upon every page reload. Thanks in advance.
Below is the jQuery:
jQuery(document).ready(function(){
jQuery("#myModal").modal('show');
jQuery.ajax({
url: 'https://freegeoip.net/json/',
type: 'POST',
dataType: 'jsonp',
success: function(location) {
// If the visitor is browsing from Canada.
if (location.country_code === 'CA') {
jQuery('#subscriber-ca').on('click', function(){
window.location.replace('http://www.google.com');
});
jQuery('#subscriber-us').on('click', function(){
// Redirect visitor to the USA.
window.location.replace('http://www.facebook.com');
});
} else if(location.country_code === 'US') {
jQuery('#subscriber-ca').on('click', function(){
window.location.replace('http://www.google.com');
});
jQuery('#subscriber-us').on('click', function(){
// Redirect visitor to the USA.
window.location.replace('http://www.facebook.com');
});
}
}
});
});
this is the modal:
<div id="myModal" class="modal fade">
<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">Subscribe our Newsletter</h4>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button id="subscribe-us" type="submit" class="btn btn-primary pull-left">US Subscriber</button>
<button id="subscribe-ca" type="submit" class="btn btn-primary pull-right">Canada Subscriber</button>
</form>
</div>
</div>
</div>
</div>
Try this code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="myModal" class="modal fade">
<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">Subscribe our Newsletter</h4>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button id="ussubscribe" type="button" class="btn btn-primary pull-left">US Subscriber</button>
<button id="casubscribe" type="button" class="btn btn-primary pull-right">Canada Subscriber</button>
</form>
</div>
</div>
</div>
</div>
<script>
var locationstatus = false;
var userlocation = '';
jQuery(document).ready(function(){
jQuery.ajax({
url: 'https://freegeoip.net/json/',
type: 'POST',
dataType: 'jsonp',
success: function(locationresponse) {
userlocation = locationresponse.country_code;
locationstatus = true;
console.log(userlocation);
}
});
});
$('#ussubscribe').on('click', function(){
alert();
console.log(userlocation);
if (locationstatus) {
if(locationstatus=='CA'){
window.location.replace('http://www.google.com');
}
}
});
$('#casubscribe').on('click', function(){
console.log(userlocation);
if (locationstatus) {
if(locationstatus=='US'){
window.location.replace('http://www.facebook.com');
}
}
});
</script>
</body>
</html>
US Subscriber
change type="submit" to type="button" //also make sure
jQuery('#subscriber-us').on('click', function(){ //check the spelling which is subscribe-us
and add onclick events outside the ajax call
inside if else clause only hide/show modal and buttons
Replace your code:
<button id="subscribe-us" type="submit" class="btn btn-primary pull left">US Subscriber</button>
<button id="subscribe-ca" type="submit" class="btn btn-primary pull-right">Canada Subscriber</button>
With:
<button id="subscriber-us" type="button" class="btn btn-primary pull left">US Subscriber</button>
<button id="subscriber-ca" type="button" class="btn btn-primary pull-right">Canada Subscriber</button>
And Bind click events outside the ajax if buttons are not dynamically created upon ajax request.
To check whether this is the first visit by the user, you can store value in session storage:
window.sessionStorage.setItem("first_visit", "Y");
While loading check for the session storage. If it is not present then open modal dialog.
Hope it helps.
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.
I've a piece of code where I wanna add/insert data from database using ajax in laravel 5. I am a beginner in ajax and laravel and I'm not sure why it's refreshing my page.
Here is what I did so far:
In my view I have a modal like this:
<div class="modal fade" id="addcategory" tabindex="-1" role="dialog" aria-labelledby="contactLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="panel panel-primary">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="panel-title" id="contactLabel"><span class="glyphicon glyphicon-info-sign"></span> Add Category</h4>
</div>
<form id="frmAddcategory">
<div class="modal-body" style="padding: 5px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 {{ $errors->has('email') ? ' has-error' : '' }}" style="padding-bottom: 10px;">
<input class="form-control" name="catname" placeholder="Category name" type="text" required />
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 {{ $errors->has('email') ? ' has-error' : '' }}">
<textarea style="resize:vertical;" class="form-control" placeholder="Description" rows="4" name="catdesc" required></textarea>
</div>
</div>
</div>
<div class="panel-footer" style="margin-bottom:-14px;">
<button class="btn btn-success btn-sm" onclick="addCategoryAjax()">Submit</button>
<!--<span class="glyphicon glyphicon-ok"></span>-->
<input type="reset" class="btn btn-danger btn-sm" value="Clear" />
<!--<span class="glyphicon glyphicon-remove"></span>-->
<button style="float: right;" type="button" class="btn btn-default btn-close btn-sm" data-dismiss="modal">Close</button>
</div>
{{ csrf_field() }}
</form>
</div>
</div>
</div>
to submit the button in my ajax, as u can see i used <button class="btn btn-success btn-sm" onclick="addCategoryAjax()">Submit</button> on my form. i added the function on click.
Here is my ajax function :
function addCategoryAjax() {
$.ajax({
url: "{{ route('admin.addcat') }}",
type: "POST",
data: $("#frmAddcategory").serialize(),
dataType: "JSON",
success: function(data) {
}
});
}
here is my controller:
public function addCategory(Request $request)
{
$stat = "published";
DB::table('categories')->insert([
'name'=>$request->catname,
'description'=>$request->catdesc,
'status'=>$stat,
'created_at' => \Carbon\Carbon::now(), # \Datetime()
'updated_at' => \Carbon\Carbon::now() # \Datetime()
]);
}
You should prevent the default actions of the button, like:
e.preventDefault();
You can pass in event into the function inline which will be the event object for the raised event in W3C compliant browsers.
So your code should be:
HTML:
<button class="btn btn-success btn-sm" onclick="addCategoryAjax(event)">Submit</button>
Js:
function addCategoryAjax(e) {
e.preventDefault();
$.ajax({
url: "{{ route('admin.addcat') }}",
type: "POST",
data: $("#frmAddcategory").serialize(),
dataType: "JSON",
success: function(data) {
}
});
}
<form name="itemGroupForm" id="itemGroup" data-parsley-validate="" method="post" onsubmit="return submitFormItemGroup();">
function submitFormItemGroup() {
var form_data = new FormData(document.getElementById("itemGroup"));
form_data.append("label", "WEBUPLOAD");
$.ajax({
url: "{{URL::to('addItemGroupAjax')}}",
type: "POST",
data: form_data,
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
}).done(function( data ) {
console.log(data);
})
Route::post('/addItemGroupAjax','ItemGroupsController#storeAjax');
I'm doing some testing with AJAX form submissions and I keep getting ReferenceError: submit_ajax is not defined from the code below. However, you can see that it IS defined.
<script type="javascript">
function submit_ajax(){
data = {'email':$('#email2').val(),'password':$('#pwd2').val()}
$.ajax({
url: 'ajax_testing.php',
data: data,
success: function() {
//AJAX success
$('#success_fail').html('success!');
window.setTimeout(function() { $('#success_fail').hide(); }, 3000);
$('#myModal2').hide();
},
error: function() {
//Ajax failure
$('#success_fail').html('failed!');
window.setTimeout(function() { $('#success_fail').hide(); }, 3000);
$('#myModal2').hide();
}
});
}
</script>
<div>
<div id="success_fail"></div>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="button_for_modal2" data-toggle="modal" data-target="#myModal2">Form Submitted via AJAX and No Parent Refresh</button>
<!-- Modal -->
<div class="modal fade" id="myModal2" 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">Title of Form</h4>
</div>
<div class="modal-body">
<h2>Vertical (basic) form</h2>
<!--<form action="<?PHP echo $_SERVER['PHP_SELF']; ?>" method="post">*******************************AJAX*********************************-->
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email2" placeholder="Enter email (ajax)" name="email2">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd2" placeholder="Enter password (ajax)" name="pwd2">
</div>
<button onclick="submit_ajax()" class="btn btn-default">Submit</button>
<!--</form>-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
I've tried running the function directly in the console and I get the same thing.
Any idea about what's going wrong here?
Instead of using <script type="javascript"> use <script type="text/javascript"> which is valid type for JS code.
change your script tag, either dont include type or set it as type="text/javascript"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function submit_ajax(){
alert('submit_ajax working')
data = {'email':$('#email2').val(),'password':$('#pwd2').val()}
$.ajax({
url: 'ajax_testing.php',
data: data,
success: function() {
//AJAX success
$('#success_fail').html('success!');
window.setTimeout(function() { $('#success_fail').hide(); }, 3000);
$('#myModal2').hide();
},
error: function() {
//Ajax failure
$('#success_fail').html('failed!');
window.setTimeout(function() { $('#success_fail').hide(); }, 3000);
$('#myModal2').hide();
}
});
}
</script>
<button onclick="submit_ajax()" class="btn btn-default">Submit</button>
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>