Develop Reference

Append additional variable to formData

How do I append dataid to the formData so that AJAX POST's both? I have tried formData.append('id', dataid); and formData = formData.append('id', dataid);
$(document).ready(function() {
$('#insert_screen').on("submit", function(event) {
var dataid = $("#res option:selected").attr('data-value');
console.log("Value", dataid);
event.preventDefault();
var form = $('form')[2];
var formData = new FormData(form);
$.ajax({
url: "insert_new_screen.php",
data: formData,
method: "POST",
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
$('#insert').val("Inserting");
},
success: function(data) {
$('#add_screen_modal').modal('hide');
window.location.reload();
}
});
});
});
UPDATE:
Below is the code I managed to get working:
$(document).ready(function(){
$('#insert_screen').on("submit", function(event){
var dataid = $("#res option:selected").attr('data-value');
console.log("Value", dataid);
event.preventDefault();
var form = $('form')[2];
var formData = new FormData(form);
formData.append("RecordID", dataid);
$.ajax({
url:"insert_new_screen.php",
data: formData,
method:"POST",
cache: false,
contentType: false,
processData: false,
beforeSend:function(){
$('#insert').val("Inserting");
},
success:function(data){
$('#add_screen_modal').modal('hide');
window.location.reload();
}
});
});
});
Many thanks to all those who gave me help. I hope this helps other.

Ajax: send mulit images

I use laravel and I want to upload gallery and I want to use ajax.
I created this code
$('#hello').on('submit', function(e){
e.preventDefault();
var formData = new FormData(this);
$.ajax({
method: "POST",
url: "{{ route('upload.store')}}",
mimeType: "multipart/form-data",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: formData,
success: function(done){
console.log(done)
},
error: function(error){
console.log(error);
}
});
});
This is ma the latest code. Could you help me?

$('#hello').on('submit', function(e){
e.preventDefault();
var formData = new FormData($("#hello")[0]);
$.ajax({
url: "{{ route('upload.store')}}",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData:false,
dataType: 'json',
success: function(done){
console.log(done)
},
error: function(error){
console.log(error);
}
});
});

How to send String data with formdata in ajax

<script type="text/javascript">
$(document).ready(function(){
$("#btnUpdate").click(function(){
alert($("#frm_data").serialize());
var formData = new FormData($("#frm_data")[0]);
var Desc= CKEDITOR.instances.editor1.getData();
$("#btnUpdate").attr('value', 'Please Wait...');
$.ajax({
url: 'update_job.php',
data: formData,
cache: false,
contentType:false,
processData:false,
type: 'post',
success: function(response)
{
$("#btnUpdate").attr('value', 'Update');
}
});
return false;
});
})
</script>
i use ckeditor for textarea field. but its can update value with new value, so i want to use another way with send textarea value with form data.
so how to send Desc data with fromData. in ajax.

To achieve this you can use the append() method of FormData to add whatever additional information you require:
$("#btnUpdate").click(function(e) {
e.preventDefault();
var $btn = $(this).attr('value', 'Please Wait...');
var formData = new FormData($("#frm_data")[0]);
formData.append('desc', CKEDITOR.instances.editor1.getData());
$.ajax({
url: 'update_job.php',
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'post',
success: function(response) {
$btn.attr('value', 'Update');
}
});
});

Send push notifications thorugh GCM in progessive web apps

this is my code to send push notification in progressive web app.It works property when i click on button sendRequest() function is called and notification sent properly. but push event is not fired.is there anything wrong in this code
function sendRequest(){
navigator.serviceWorker.ready
.then(function(registration) {
registration.pushManager.getSubscription()
.then(function (subscription) {
curlCommand(subscription);
var root = 'http://jsonplaceholder.typicode.com/posts';
var title="Push Notification";
$(document).ready(function () {
$.ajax({
url: root,
beforeSend: function(xhr) { xhr.setRequestHeader("Content-Type","application/json");},
type: 'POST',
contentType: 'application/json',
crossDomain: true,
dataType: 'json',
processData: false,
data: JSON.stringify(subscription),
success: function (data) {
reg.showNotification(title, {
body: 'Hello',
icon: 'images/icon.png',
tag: 'my-tag'
});
console.log(data);
},
error: function(){
alert("Cannot get data");
}
});
});
});
});
}

jQuery can't alert anything or redirect inside an plugin's callback function

I use a plugin to upload images which is working fine, the code is:
$('input[name=photo]').change(function(e) {
var file = e.target.files[0];
$.canvasResize(file, {
width: 600,
height: 500,
crop: false,
quality: 90,
callback: function(data, width, height) {
if(width > 100)
{
}
else
{
alert("this is not an image"); // this isn't working
return false;
}
var fd = new FormData();
var f = $.canvasResize('dataURLtoBlob', data);
f.name = file.name;
fd.append($('input[name=photo]').attr('name'), f);
$.ajax({
url: 'doupload.php',
type: 'POST',
data: fd,
dataType: 'json',
contentType: false,
processData: false,
success: function() {
window.location.href = "http://www.stackoverflow.com"; // THIS ISN'T WORKING TOO
}
})
}
});
});
Now after it's done I try to redirect to another page after AJAX is finished but it's not working, alerts are also not working. Any ideas?

$.ajax({
url: 'doupload.php',
type: 'POST',
data: fd,
dataType: 'json',
contentType: false,
processData: false,
success: function() {
location.href = "http://www.stackoverflow.com";
},
error: function() {
//handle errors here
},
complete: function() {
// this code is always executed
location.href = "http://www.stackoverflow.com";
}
})
Or
var jqXHR = $.ajax({...
});
jqXHR.always(function(){
location.href = "http://www.stackoverflow.com";
})