I am having a div
that shows a loader image while sending ajax requests
I attached the div in the beforeSend attribute of ajax. The issue is if I send serialize() data then the beforeSend works but doesn't work when I send formData
Works
$.ajax({
url: 'centre-basic-process.php',
type: 'post',
data: $('#centreform').serialize(),
beforeSend: function() {
$('.displayLoader').show();
},
success: function(response) {
console.log(response);
$('#centreformupload').show();
$('#centreform').hide();
$('html, body').animate({
scrollTop: 0
}, 0);
}
});
Doesn't work
$.ajax({
url: 'centre-upload-process.php',
type: 'POST',
data: formData,
async: false,
beforeSend: function() {
$('.displayLoader').show();
},
success: function(response) {
alert("You have succesfully submitted the form. Please complete the payment method");
document.location.href = "dashboard.php";
},
cache: false,
contentType: false,
processData: false
});
I even tried ajaxStart() but facing same issue. Can anyone help me?
Related
How do I make autoload/reload in every 5 seconds in ajax?
This is the code I use. The problem is new data doesn't appear, unless I reload it.
$(document).ready(function(){
// temp
$.ajax({
url : 'assets/php/act_now/module_loadChat.php',
type: 'POST',
async: false,
success: function(show_chat) {
$('#direct-chat').html(show_chat);
},
cache: false,
contentType: false,
processData: false
});
// temp
$("#text-on-it").submit(function(event){ // when send message
event.preventDefault();
var formData = new FormData(this);
$.ajax({
url: 'assets/php/act_now/module_loadChat.php',
type: 'POST',
data: formData,
async: false,
success: function(data) {
$('#direct-chat').html(data);
$("#text-on-it")[0].reset();
},
cache: false,
contentType: false,
processData: false
});
});
});
setInterval(function(){
// this will run after every 5 seconds
}, 5000);
I've got simple file upload form. Form works on desktop PC/Mac but doesn't work on iOS devices.
On submit event I make call like this:
var form_data = new FormData(this);
$.ajax({
url: "api/register",
method: "POST",
type: "POST",
headers: {
"cache-control": "no-cache"
},
cache: false,
data: form_data,
contentType: false,
processData: false,
async: true
}).success(function (res) {
alert ('uploaded');
}).error(function (res) {
alert('not uploaded')
});
After 60 seconds error is returned nad I get 'not uploaded' alert.
I am passing the value of the radio button to the controller when it is selected through ajax. The validation in the controller fails saying the field is required. I logged the dataString which carries the value in beforeSend. It logged the value of the selected of radio button. I also checked the network tab's requests which has the data in the request payload. I don't understand what causes the error here.
<input type="radio" name="port_type" id="low-risk" value = "low-risk" >
if ($('#low-risk').is(":checked")) {
var p_type = $(this).val();
console.log(p_type);
showFunds(p_type);
}
Here is the function that has ajax function
function showFunds(p_type){
var hello = p_type;
//console.log(p_type);
var dataString = 'p=' +hello;
//console.log(dataString);
$.ajax({
type: "POST",
url: "/showFunds",
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
data: dataString,
cache: false,
contentType: false,
processData: false,
beforeSend : function(){
console.log('logging BS');
console.log(dataString);
},
success: function(data) {
console.log(data);
},
error : function(xhr ,status ,error)
{
console.log(xhr);
},
});
}
Here is my controller
public function showFunds(Request $request){
$validator = \Validator::make($request->all(),[
'p' => 'required',
]);
if ($validator->fails()) {
//return response()->json(['msg'=>'val_fail']);
return response()->json(['msg'=>$validator->errors()]);
}
else{ }
The validator failing sending the errors "The p field is required."
Try this:
function showFunds(p_type){
var hello = p_type;
//console.log(p_type);
var dataString = JSON.stringify({p: hello});
//console.log(dataString);
$.ajax({
type: "POST",
url: "/showFunds",
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
data: dataString,
cache: false,
contentType: false,
processData: false,
beforeSend : function(){
console.log('logging BS');
console.log(dataString);
},
success: function(data) {
console.log(data);
},
error : function(xhr ,status ,error)
{
console.log(xhr);
},
});
}
i'm having a problem sending the option selected with ajax.
Code:
$("#editarConta").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "includes/php/class_conta.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(resultado){
$("#accountEdit_result").html(resultado);
}
});
}));
Sending this data i can't see what option was selected. Is any way i can send this data, plus the selected option like:
data: { new FormData(this) , optionSelected: $( "#linguagem_favorita option:selected" ).val() },
My select HTML code:
<select name="linguagem_favorita" id="linguagem_favorita" class="form-control">
If i send with my code i get NULL when i var_dump the variable
var_dump($_POST["linguagem_favorita"]);
Append to the form data:
$("#editarConta").on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
formData.append("optionSelected", $("#linguagem_favorita option:selected" ).val() );
$.ajax({
url: "includes/php/class_conta.php",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData:false,
success: function(resultado){
$("#accountEdit_result").html(resultado);
}
});
}));
Here is my form
<form name="uploadImg" id="uploadImg" class="profile-image" enctype="multipart/form-data">
<input type="file" name="profile" id="updProfileImg">
</form>
Here is my jquery event
$("#updProfileImg:file").change(function() {
$('#uploadImg').submit(function() {
var queryString = new FormData($('form')[0]);
$.ajax({
type: "POST",
url: 'index.php?route=account/edit/upload',
data: queryString,
contentType: false,
processData: false,
beforeSend: function() {
},
success: function() {
}
})
})
})
But the change event is not triggering form submit so I tried trigger('submit') but the page is refreshing instead of submitting in ajax.
You are binding the events incorrectly. As you currently have it, changing the field will trigger the binding of the submit. It need to be like this:
// bind the submit event
$('#uploadImg').submit(function() {
var queryString = new FormData($('form')[0]);
$.ajax({
type: "POST",
url: 'index.php?route=account/edit/upload',
data: queryString,
contentType: false,
processData: false,
beforeSend: function() {
},
success: function() {
}
});
});
// bind the change event to trigger a submit
$("#updProfileImg:file").change(function() {
$("#uploadImg").submit();
});
A simple modification works
$("#updProfileImg:file").change(function() {
//$('#uploadImg').submit(function() {
var queryString = new FormData($('#uploadImg')[0]);
$.ajax({
type: "POST",
url: 'index.php?route=account/edit/upload',
data: queryString,
contentType: false,
processData: false,
beforeSend: function() {
},
success: function() {
}
})
//})
})
you should try this code:
$("#updProfileImg:file").on("change", function(){
var queryString = new FormData($('#uploadImg')[0]);
$.ajax({
type: "POST",
url: 'index.php?route=account/edit/upload',
data: queryString,
contentType: false,
processData: false,
beforeSend: function() {},
success: function() {}
})
});
because i expect the ".change()" will be fired one time in the first change.