I have several <select>
's on a page of which i'd like to populate using Ajax.
Problem Statement: Some ajaxcalls can take up to two minutes to execute. The result, causes the rest of the calls (which only take one second) to execute "after" the previous ajax calls.
On the network table, BSCS
is fetched, then EPCOMON
is fetched "after". Along down the line, each request is made only after the previous one has finished. I've done tests and validated that BSCS
indeed does return around 2 minutes, and SAP, for example, returns in 1 second.
How can I get these requests to be made truly asynchronously?
I started out with a simple jQuery $.get
call:
for select2 in $("select.select2-package[name^='component_bundle']")
product = select2.getAttribute('data-product')
$.get "/bundles/fetch_components.json?product=#{product}", (resp) ->
$(product).val(resp)
And eventually moved on to see if i could force async (in case something was overriding the default jQuery async true
value)
$.ajax
url: "/bundles/fetch_components.json?product=#{product}"
dataType: 'application/json'
cache: true
ifModified: false
async: true
success: (resp) ->
console.log(resp.responseText)
$("#component_bundle_#{product}").val(resp.responseText)
error: (resp) ->
console.log(resp)
portal.showErrorDialog("ERROR", resp.responseText)
Both attempts yield the same result. each ajax call is executed one after the other. How can I make these requests work truly asynchronously?