I need to pass route parameter with ajax but I am using named route method in ajax code.
route I want to go
Route
Route::post('/edit/{id}', 'ArticleController#updateArticle')->name('updateArticle');
Ajax
var id= $("input[name=editId]").val();
$.ajax({
type:'POST',
enctype: 'multipart/form-data',
url:"{{ route('updateArticle',"id") }}",
data: formdata,
contentType: false,
processData: false,
success:function(data){
$('.alert-success').html(data.success).fadeIn('slow');
$('.alert-success').delay(3000).fadeOut('slow');
}
});
I want to use variable id in ajax URL.
Try to use replace function:
var id = $("input[name=editId]").val();
var url = "{{ route('updateArticle', ":id") }}";
url = url.replace(':id', id);
$.ajax({
type:'POST',
enctype: 'multipart/form-data',
url: url,
data: formdata,
contentType: false,
processData: false,
success:function(data){
$('.alert-success').html(data.success).fadeIn('slow');
$('.alert-success').delay(3000).fadeOut('slow');
}
});
I had the same problem, just change your ajax url with this one.
var id= $("input[name=editId]").val();
$.ajax({
type:'POST',
enctype: 'multipart/form-data',
url:"{{ route('updateArticle') }}" + '/' + id,
data: formdata,
contentType: false,
processData: false,
success:function(data){
$('.alert-success').html(data.success).fadeIn('slow');
$('.alert-success').delay(3000).fadeOut('slow');
}
});
Put + around id variable and make sure you are passing X-CSRF-Token via formdata variable or try sending manualy :
replace this line :
url:"{{ route('updateArticle',"id") }}",
with this :
url:"{{ route('updateArticle',"+id+") }}",
var id= $("input[name=editId]").val();
$.ajax({
type:'POST',
enctype: 'multipart/form-data',
url:"{{ route('updateArticle',"+id+") }}",
data: formdata,
contentType: false,
processData: false,
success:function(data){
$('.alert-success').html(data.success).fadeIn('slow');
$('.alert-success').delay(3000).fadeOut('slow');
}
});
Try this:
$(document).on("click", ".delete", function() {
var $ele = $(this).parent().parent();
var id= $(this).val();
var url = '{{ route("student.destroy_academic_qualifications", ":id") }}';
url = url.replace(':id', id);
$.ajax({
url: url,
type: "GET",
cache: false,
data:{
_token:'{{ csrf_token() }}'
},
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$ele.fadeOut().remove();
}
}
});
});
You can do it like this.
In your blade file
<script>
window.your_route = "{{ route('updateArticle',['id'=>$id]) }}";
</script>
In you JavaScript you can use created variable.
$.ajax({
type:'POST',
enctype: 'multipart/form-data',
url:window.your_route,
data: formdata,
contentType: false,
processData: false,
success:function(data){
$('.alert-success').html(data.success).fadeIn('slow');
$('.alert-success').delay(3000).fadeOut('slow');
}
});
You can do it like this below, just hardcode the url and id
var id= $("input[name=editId]").val();
$.ajax({
type:'POST',
enctype: 'multipart/form-data',
url:"edit/1",
data: formdata,
contentType: false,
processData: false,
success:function(data){
$('.alert-success').html(data.success).fadeIn('slow');
$('.alert-success').delay(3000).fadeOut('slow');
}
});
in form
<form id="form-create-role" action="{{route('role-create')}}" >
in file role-create.js
$(function(){
$('#form-create-role').submit(function (event) {
event.preventDefault();
$.ajax({
type: "post",
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: "json",
success: function (response) {
}
});
});
});
I do this by two ways
By using full url
$(document).on('click', '.view', function(){
let contactId = $(this).attr('data-id');
$.ajax({
type: "GET",
url: window.location.origin + "/view-contact-details/" + contactId,
success: function (response) {
console.log(response);
}
});
});
By using named route parameter
$(document).on('click', '.view', function(){
let contactId = $(this).attr('data-id');
let url = "{{ route('view.contact', ['id' => ":contactId"]) }}";
url = url.replace(":contactId", contactId);
$.ajax({
type: "GET",
url: url,
success: function (response) {
console.log(response);
}
});
});
You can use any of these :)
Related
i need to pass $(this).data into success func in ajax. here is my code
var product_id = $(this).data("product_id");
var url = "{{ route('client.add_wishlist')}}";
$.ajax({
url: url,
type: "POST",
dataType: "json",
data: {
product_id: product_id,
_token: "{{ csrf_token() }}",
},
success: function (data) {
$(this).addClass("wishlist-comp-saved");
},
});
But $(this).addClass('wishlist-comp-saved'); is not working inside success: function(data) {}
$(this) will change context when called. When inside of the success: function (data), $(this) is not the same as it was inside of whatever is calling this $.ajax() request.
For your issue, you simply have to set $(this) as a variable before your $.ajax() request, and reference it in the success: function():
var product_id = $(this).data("product_id");
var url = "{{ route('client.add_wishlist')}}";
var that = $(this);
$.ajax({
url: url,
type: 'POST',
dataType: "json",
data: {
'product_id': product_id
'_token': "{{ csrf_token() }}"
},
success: function(data) {
that.addClass('wishlist-comp-saved');
}
});
I am using laravel 5.4 and jquery Ajax to upload file and some form data.
I am using below code
function submitDocument(){
var formData = new FormData(); // Currently empty
var _token = $("#_token").val().trim();
formData.append('title', $("#title").val());
formData.append("doc",$("#doc")[0].files[0]);
$.ajax({
url: "documents",
method: "post",
data:{_token,formData},
}).done(function(data) {
});
return false;// Not to submit page
}
And I am getting error
Uncaught TypeError: Illegal invocation
How can I fix this ? Thanks in advance for your time.
I am able to get value in formData by using
console.log(formData.get('title'));
console.log(formData.get('doc'));
Try adding processData: false, contentType: false in your code
Replace your script with this:
function submitDocument(){
var formData = new FormData(); // Currently empty
var _token = $("#_token").val().trim();
formData.append('title', $("#title").val());
formData.append("doc",$("#doc")[0].files[0]);
$.ajax({
url: "documents",
method: "post",
data:{_token,formData},
cache : false,
processData: false,
contentType: false
}).done(function(data) {
});
return false;// Not to submit page
}
By default, data passed in to the data option as an object will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.
<script>
$(document).ready(function() {
var url = "{{ url('/admin/file') }}";
var options = {
type: 'post',
url: url,
headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
dataType: 'doc',
cache: false,
contentType: false,
processData: false,
success: function (data) {
alert('Ok');
},
error: function (data) {
alert('Error');
}
};
$('#save').on('click', function() {
$("#form").ajaxSubmit(options);
return false;
});
});
</script>
Try this way
$(document).ready(function (){
$("#form").on('submit',(function(e){
e.preventDefault();
var formdata = new FormData(this);
var _token = $("#_token").val().trim();
formData.append('title', $("#title").val());
formData.append("doc",$("#doc")[0].files[0]);
$.ajax({
url: "/site/url",
type: "POST",
data:{token:_token,formData},
contentType: false,
cache: false,
processData:false,
success: function(data){
},
});
}));});
I have a page where i have send form data using jquery ajax upload and in php file i am posting these values in database but it is not showing any values for big image in php files when i try to print . Please check with the my screen shot. upload image size 2mb
var formData = new FormData($('form')[0]);
formData.append('licens_certificate', licens_certificate);
$.ajax({
url: "<?php echo site_url(); ?>pro/submit_business",
type: "POST",
data:formData,
async: false,
processData : false,
contentType : false,
// fileElementId :'licens_certificate',
dataType: "json",
// contentType: 'multipart/form-data',
success: function(result){
alert()
}
});
Please check data properly append with formdata.
var formData = new FormData($('form')[0]);
formData.append('licens_certificate', licens_certificate);
$.ajax({
url: "pro/submit_business",
type: "POST",
data:formData,
async: false,
processData : false,
contentType : false,
// fileElementId :'licens_certificate',
dataType: "json",
// contentType: 'multipart/form-data',
success: function(result){
alert(result)
}
});
Edit: Here's how you convert your form to JSON:
var serializeJSON = function(formData) {
var jsonData = {};
$.each(formData, function() {
if (jsonData[this.name]) {
if (!jsonData[this.name].push) {
jsonData[this.name] = [jsonData[this.name]];
}
jsonData[this.name].push(this.value || '');
} else {
jsonData[this.name] = this.value || '';
}
});
return jsonData;
}
var formData = $("#myform").serializeArray();
var json = serializeJSON(formData);
// Add your licens_certificate data
json['licens_certificate' = 'licens_certificate';
$.ajax({
url: "<?php echo site_url(); ?>pro/submit_business",
type: "POST",
data: json,
async: false,
processData : false,
contentType : false,
dataType: "json",
success: function(result){
alert()
},
error: function(err) {
console.log(err);
}
});
Original
Have you tried to serialize your form?
var formData = $('form').serializeArray();
formData.push({licens_certificate:, 'licens_certificate'});
$.ajax({
url: "<?php echo site_url(); ?>pro/submit_business",
type: "POST",
data: formData,
async: false,
processData : false,
contentType : false,
dataType: "json",
success: function(result){
alert()
},
error: function(err) {
console.log(err);
}
});
Also, make sure you are serializing the right form, especialy if you have several in your page.
You could also simply use the $.post function
var url = "<?php echo site_url(); ?>pro/submit_business";
$.post(url, dataForm).succes(function(data) { alert(); });
Actually i am using following script to post my form
var formData = new FormData($("form#driver_information")[0]);
$.ajax({
type: "POST",
url: "/",
data: formData,
success: function(data) {
$("#page_message_box").html(data);
},
cache: false,
contentType: false,
processData: false
});
I need to pass some more variables along with form data
eg:
var formData = new FormData($("form#driver_information")[0]);
$.ajax({
type: "POST",
url: "/",
data: formData + "&con=delete",
success: function(data) {
$("#page_message_box").html(data);
},
cache: false,
contentType: false,
processData: false
});
But it's not working.( data: formData + "&con=delete", ). Please help to solve this problem.
Try this:
formData.append('con', 'delete');
before the $.ajax call.
Then within that call you just need:
data: formData,
You can append data to FormData like this:
formData.append('con', 'delete');
How is possible to bring data from server onload data from server?
I have something like this, and it's not working:
JS:
function getItems(){
var formData = new FormData();
formData.append("ask", "MainView");
$.ajax({
type: "POST",
url: "getItems.php",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(result){
var result=trim(result);
$("#PageWrap").html(result);
}
});
}
function getItemsOnLoad(){
var formData = new FormData();
formData.append("ask", "OnLoad");
$.ajax({
type: "POST",
url: "getItemsOnload.php",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(result){
var result=trim(result);
$("#onloadInfoID").html(result);
}
});
}
PHP getItems.php:
echo <table onload="getItemsOnLoad()"><tr>some info</tr></table>;
If you're using jQuery, why you can't make it in ready?
$(document).ready(function() {
getItemsOnLoad();
});
function getItems(){
var formData = new FormData();
formData.append("menuItem", menuItem);
formData.append("ask", "MainView");
$.ajax({
type: "POST",
url: "getItems.php",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(result){
var result=trim(result);
$("#PageWrap").html(result);
}
}).done(function() {
formData.append("ask", "OnLoad");
$.ajax({
type: "POST",
url: "getItemsOnload.php",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(result){
var result=trim(result);
$("#onloadInfoID").html(result);
}
})
});
}
That was it, .done(). Change only js file.
try this on <body> tag
<body onload="getItemsOnLoad()">