Hello i'm kinda confused with ajax POST method, i try to make api request and since the respond have a similar parameter i make it as one global function so it can be use by my other html / js in other page, i know that the ajax post will make the function required to refreshed. but i don't know how to use my ajax function on html form and since that i directly using button to call the request function but it will end up blocked the next request call (GET/PUT/DELETE become not executable), since i'm not using the html form can i refresh the function without refreshing the whole page or i will need to use html form insteed? any explain or response will be grateful
here my example code of js
document.getElementById('confirmSubmit').addEventListener('click', function(){
var query = {};
query['a'] = 'a';
query['b'] = 'b';
query['c'] = 'c';
request(url, query, 'POST');
});
function request(url, query, method){
if (method == 'POST'){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
processData: false,
contentType: false,
cache: false,
});
}
else{
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
});
}
document.getElementById("div-overlay-w-100-h-100").style.display = 'block';
$.ajax({
url: url,
method: method,
dataType: "text json",
type: method,
data: query,
timeout: 900000,
success: function(response){
// LONG PROCESS HERE
},
error:function(rr){
console.log(rr);
}
});
}
here is my html
<div style="margin-left: 10%;">
<div style="margin-top: -10px;">
<label for="id" style="font-size: 16px;"><strong>ID*:</strong></label>
<input type="text" name="id" id="id" style="max-width: 88%; cursor: text;" autocomplete="off">
</div>
<div style="margin-top: -10px;">
<label for="nama" style="font-size: 16px;"><strong>Name*:</strong></label>
<input type="text" name="nama" id="nama" style="max-width: 88%; cursor: text;" autocomplete="off">
</div>
<div style="margin-top: -10px;">
<label for="desc" style="font-size: 16px;"><strong>Desc*:</strong></label>
<input type="text" name="desc" id="desc" style="max-width: 88%; cursor: text;" autocomplete="off">
</div>
<div style="margin-top: -10px;">
<label for="info" style="font-size: 16px;"><strong>Info:</strong></label>
<input type="text" name="info" id="info" style="max-width: 88%; cursor: text;" autocomplete="off">
</div>
<div style="margin-top: -10px;">
<label for="order" style="font-size: 16px;"><strong>Order:</strong></label>
<input type="text" name="order" id="order" style="max-width: 88%; cursor: text;" autocomplete="off">
</div>
</div>
<div>
<button id="confirmSubmit" style="margin-bottom: 20px; height: 40px; width: 130px; margin-left: 10px; font-size: 16px; border-radius: 5px;">Submit</button>
</div>
EDIT: thanks to @Ravi Makwana awesome answer make me got the exactly problem i'm looking for, i edit some line to make it more perfect since my if else method function will keep the ajax not override. so rather than setup the ajaxsetup directly i added it inside the array as suggested by @Ravi Makwana
var ajaxSetup = {
url: url,
method: method,
dataType: "text json",
type: method,
data: query,
timeout: 900000,
success: function(response){
// LONG PROCESS HERE
},
error:function(rr){
console.log(rr);
}
};
if (method == 'POST'){
ajaxSetup.headers= {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
};
ajaxSetup.processData= false;
ajaxSetup.contentType= false;
ajaxSetup.cache= false;
}
else {
ajaxSetup.headers= {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
};
}
change above code to
var ajaxSetup = {
url: url,
method: method,
dataType: "text json",
type: method,
data: query,
timeout: 900000,
success: function(response){
// LONG PROCESS HERE
},
error:function(rr){
console.log(rr);
}
};
if (method == 'POST'){
ajaxSetup['processData'] = false;
ajaxSetup['contentType'] = false;
ajaxSetup['cache'] = false;
}
CodePudding user response:
Here's Maybe this work
It's possible that you $.ajaxSetup
is not overriding your setup
so just try to create variable and set all settings into variable
function request(url, query, method){
var ajaxSetup = {
url: url,
method: method,
dataType: "text json",
type: method,
data: query,
timeout: 900000,
success: function(response){
// LONG PROCESS HERE
},
error:function(rr){
console.log(rr);
}
};
if (method == 'POST'){
ajaxSetup.headers= {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
};
ajaxSetup.processData= false;
ajaxSetup.contentType= false;
ajaxSetup.cache= false;
}
else {
ajaxSetup.headers= {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
};
}
document.getElementById("div-overlay-w-100-h-100").style.display = 'block';
$.ajax(ajaxSetup);
}