i'm doing and Ajax call to send parameters to one .php file, when the call is done, i want to popup a new window to the results page, but it doesn't work.
here is my ajax code
$.ajax({
type: "POST",
url: "pipeline2.php",
data: formData,
cache: false,
processData: false,
contentType: false,
//async: false,
}).done(function (data) {
$("#resultados_pipeline").append(data);
document.getElementById('Running').style.display = 'none';
window.open("results_page.php?jid="+job_id);
alert(job_id);
});
i first think that maybe the job_id is not set in ajax, but the alert show me the expected...
i also tried with the async: true, and it doesn't work either
Browsers don't allow window.open calls except when involved from a user triggered event.
An Ajax response event is not something triggered by the user, so popups are blocked at that point.
Related
I use (jQuery) ajax request to submit form for CRUD methods.
But I'm having this issue for a while.
Sometimes, one ajax request is received double in server, resulting duplicate data when adding new records.
I've checked using Inspect Element, to monitor the ajax request, it only show one request.
Here's the ajax request
$.ajax({
type: "POST",
data : data,
cache: false,
async: true,
processData: true,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
dataType: 'json',
url: setting.url,
Does anyone ever having similar issue ?
what caused this ?
If you fire ajax call through a element click event suggest you to disabling the button would be to use the .one() method and re-bind the event handler after callback:
var clickHandler = function(e){
$.ajax({
url: url,
type: 'POST',
async: true,
dataType: 'json',
enctype: 'multipart/form-data'
cache: false,
success: function(data){
$('#button1').one('click', clickHandler);
},
error: function(){}
});
e.stopImmediatePropagation();
return false;
}
$('#button1').one('click', clickHandler);
I have functionality in which it is required to open file upload dialog after Ajax call success event.
What I tried:
I tried applying below simple code in ajax success: and complete: event but it is not working.
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
data: { id: eoid },
contentType: 'application/json; charset=utf-8',
success: function (data) {
// some logic
$("#fileupload").click();
}
});
What is problem:
If I put simple button and try to execute above code, it is working fine and opening dialog - but it is not working in case of ajax post afterwards.
Any guesses or am I missing something?
Thank you.
The problem is at dataType: 'json' . You are loading html with your ajax request so you should change it to dataType: 'html' else in any other format it will not be considered success. Or you can delete this property as stated in Jquery doc that Jquery does default: Intelligent Guess (xml, json, script, or html).
I have a code that works like this:
$.ajax({
type: "POST",
url: url,
data: formData,
cache: false,
processData: false,
contentType: false,
dataType: 'html',
This loads:
Route::post('/local/pdf', 'LocalController#subirPDF');
Which loads the controller:
return View::make(Config::get('rv.paginasPDF'));
Which loads:
$.get("{{Request::root()}}/local/actualizar_paginas/9/2");
Which loads the route:
Route::get('/local/actualizar_paginas/{id}/{paginas}', 'LocalController#actualizarPaginas')->where('id', '[0-9]+')->where('paginas', '[0-9]+');
That loads:
Auth::user()->perfil='penadaaaaaafe';
Auth::user()->save();
Don't worry if you see that I don't use some variables, because I have simplified the code to make it easier to explain.
Basically, if I load directly the route from the url everything works fine:
{{Request::root()}}/local/actualizar_paginas/9/2"
But if I load it with the ajax method that I have devoloped it doesn't work. If I console.log the data I recieve the right html code of the $.get page, but It doesn't make the get request.
Any idea how to fix it?
Thanks.
I have an ajax call inside ajax. Problem is I have to wait second ajax finish because until that time browser freezes. Why is this happening if I set it to async true? I dont want to wait for any response from this second inner ajax and I dont need any response from it. It is just an email notification to some users based and needs parameters from first ajax.
$.ajax({
url: 'route_process.php',
cache: false,
async: true,
type: 'post',
data: {type: document.getElementById('type').value},
dataType: 'html',
success: function(data) {
data = data.split("brk");
$('.spinner').css({'display':'none'});
$('#save_button').prop("disabled",false);
$.ajax({
url: 'sent_hike_drive_notification.php',
cache: false,
type: 'post',
async: true,
data: {type: data[1], insert_id: data[2], date_search_array: data[3], from_city_lat: data[4], from_city_lng: data[5], to_city_lat: data[6], to_city_lng: data[7], counter: data[8], insert_id2: data[9], date_search_array2:data[10]},
dataType: 'html',
success: function(result) {
}
});
Drive.resetRoute();
alert(data[0]);
},
Thanks all, now I found out the problem is not maybe in those ajaxs. User wants to move to another webpage through load when click on menu icon.
$('.main_body').find('.container').load(url);
This dont works until those ajax finish. So not complete browser freezes only I cannot navigate to next page.
Common, Ajax is indeed async but You should remember that a success handler is called only when the ajax call is complete whether sync or async So this inner ajax call can be called only when the first is complete. There is no way you can access inner ajax call without first being completed. All you can do is make an ajax call via callback on the success handler of the outer ajax.
This is not an exact answer to your problem but only a help/checklist :
The most common causes of the UI freezing on making an ajax call when the call is async:true are as follows:
A lot of Dom manipulation taking place on response of the call.
A lot of data is being sent by the server and processing it requires time.
If a session is being maintained and it is not closed before multiple ajax callbacks (this happens to avoid race conditions).
Something on the server side goes wrong/extremely slow on the ajax call and the client side is stuck.
Network speed is too slow.
EDIT: Based on the response from asker , to help others if they face similar issue.
Is there a redirection involved which is locking up with ajax response.
It is highly unlikely that the UI freezes despite all the check points mentioned above taken care of.
In any case the solution might be one of the following approaches :
Try making a call to the second ajax after a timeout of like 5000 ms.
Try promises : how does jquery's promise method really work?
(worst way)Try using an iframe to make the requests.
try to use promise.
$.ajax({
url: 'route_process.php',
cache: false,
async: true,
type: 'post',
data: {type: document.getElementById('type').value},
dataType: 'html'
}).promise().then(function(data) {
data = data.split("brk");
$('.spinner').css({'display':'none'});
$('#save_button').prop("disabled",false);
$.ajax({
url: 'sent_hike_drive_notification.php',
cache: false,
type: 'post',
async: true,
data: {type: data[1], insert_id: data[2], date_search_array: data[3], from_city_lat: data[4], from_city_lng: data[5], to_city_lat: data[6], to_city_lng: data[7], counter: data[8], insert_id2: data[9], date_search_array2:data[10]},
dataType: 'html',
success: function(result) {
}
});
Drive.resetRoute();
alert(data[0]);
})
I have 3 $.ajax requests in a page that gets JSON content from the server and fills up three separate divs. The content in these three divs is pretty large so it takes a while to load all the content. Also these ajax calls are called on page load, so something like:
$(document).ready(function () {
$.ajax({
type: 'POST',
url: "/controller/action",
dataType: 'json',
traditional: true,
async: false,
success: function (data) {
//fill content in div 1
}
});
$.ajax({
type: 'POST',
url: "/controller/action2",
dataType: 'json',
traditional: true,
async: false,
success: function (data) {
//fill content in div 2
}
});
$.ajax({
type: 'POST',
url: "/controller/action3",
dataType: 'json',
traditional: true,
async: false,
success: function (data) {
//fill content in div 3
}
});
});
My big questions are:
How can I make the page load first (and elements such as links functional)
After that load these three ajax scripts at the same time. So instead of calling ajax1, ajax2, ajax3; it calls them all at the same time simultaneously.
Thanks a lot!
Clockwork
The page will load before the ajax calls are fired.
If you set async to true, they will all fire at the same time.
The page will load first, your function will be executed once it's ready.
To make the GUI responding and to do the ajax requests simultaneously, remove the async:false option.
You can move this code to $(document).load( .... ).
And the 3 calls will started at the same time. Their finish time is not guaranteed.