We Keep Coding

how to pass named route parameter with ajax

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 :)

How to upload file in laravel with formData in jquery ajax

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){
},
});
}));});

AJAX: How to get array on multi dimensional array

I have a json which is . I just want to get specific data which is
obj['contacts']['name']
How can i get
obj['contacts']['name']
name on Contacts array
This is my code:
$.ajax({
type: 'GET',
dataType: 'json',
url: uri,
cache: false,
contentType: 'application/json',
success: function(data) {
for (var obj in data) {
console.log(obj['contacts']['name']);
}
}
});

In your case this is how you want get name from contacts
$.ajax({
type: 'GET',
dataType: 'json',
url: uri,
cache: false,
contentType: 'application/json',
success: function(data) {
if (!data.contacts) return;
var names = data.contacts.map(function(dt) {
return dt.name;
});
console.log(names);
}
});

Just enumerate the returned object "contacts" property:
$.ajax({
type: 'GET',
dataType: 'json',
url: uri,
cache: false,
contentType: 'application/json',
success: function(data) {
data.contacts.forEach(function(contact) {
console.log(contact.name);
});
}
});

Jquery ajax upload not showing values for the big images?

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(); });

How to add variable to FormData in jquery?

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');