I'n having a web page with a html table. In every row i have a link to some restful service which is on another server.
When i press the button in one row the ajax call is executing just fine and i get the answer. I'm trying to call all the services from the table in a loop. I add the calls in javascript array and then use when and apply to execute them.
Only one of the calls executed and return data back. Checking the network in inspect i can see the results from restful services just fine but jquery keep returns callback was not called.
I know that i'm doing something wrong with deferred objects but i can't understand how to to use them correctly.
You can see the single call page at http://distml.kstergiou.net/single.html
and the batch version at http://distml.kstergiou.net/batch.html
Can you help me find what am i doing wrong?
The code in batch page (jquery and html) is
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script>
var response = [];
var restArray = [];
$(document).ready(function () {
$('#execBatch').click(function(){
$('#tblMethods tr').each(function(){
var self = $(this);
var inp = self.find('.execSingle');
var urlStr = inp.attr("data-exec");
var rowNum = inp.attr('data-rownum');
var clfData = '';
if (urlStr != undefined) {
restArray.push( $.ajax({
cache: true,
type: "GET",
url: urlStr,
data: clfData,
contentType: "application/javascript",
dataType: "jsonp",
crossDomain: true,
jsonp: 'callback',
jsonpCallback: 'callback',
success: function (data) {
response.push(data.strResult);
console.log('success');
},
error: function (xhr, status, error) {
console.log(error);
response[rowNum] = 'Error<br>Status<br>' + status + 'Error Message<br>' + error;
}
})
)
}
});
$.when.apply(null, restArray).done(function(){
console.log(arguments);
for(var i = 0; i < arguments.length; i++) {
console.log(arguments[i][0].strResult);
}
}).fail( function (jqXHR, status, error) {
console.log(status + ' --- ' + error);
});
});
$('.showSingle').click(function () {
var self = $(this);
var rowNum = self.attr('data-rownum');
$('#output').html('<pre>' + response[rowNum] + '</pre>');
});
}); // document.ready
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<table id="tblMethods" style="border:1px solid blue; width:100%" class="table">
<thead style="border:1px solid green; background-color: #e0e0e0">
<tr>
<th>#</th>
<th>Server</th>
<th>Classifier</th>
<th>Filter</th>
<th>DataFile</th>
<th>Evaluate</th>
<th>numFolds</th>
<th style="display:none">execute</th>
<th style="display:none">completed</th>
</tr>
</thead>
<tbody>
<tr><td>0</td><td>Server 1 - locahost</td><td>Naive Bayes</td><td>No Filter</td><td>Anneal</td><td>false</td><td>10</td><td><input type="button" value="Exec" id="execSingle0" data-rownum="0" data-exec="http://clouddom.ergologic.gr:8080/com.alchemist.ml/rowid/0/clfid/0/filterid/0/fileid/0/eval/false/numfolds/10/" class="btn btn-xs btn-success execSingle" style="display:none"></td><td><input type="button" value="Show" id="showSingle0" data-rownum="0" class="showSingle btn btn-xs btn-info"></td></tr>
<tr><td>1</td><td>Server 1 - locahost</td><td>SMO</td><td>No Filter</td><td>Anneal</td><td>false</td><td>10</td><td><input type="button" value="Exec" id="execSingle1" data-rownum="1" data-exec="http://clouddom.ergologic.gr:8080/com.alchemist.ml/rowid/1/clfid/1/filterid/0/fileid/0/eval/false/numfolds/10/" class="btn btn-xs btn-success execSingle" style="display:none"></td><td><input type="button" value="Show" id="showSingle1" data-rownum="1" class="showSingle btn btn-xs btn-info"></td></tr>
<tr><td>2</td><td>Server 1 - locahost</td><td>J48</td><td>No Filter</td><td>Anneal</td><td>false</td><td>10</td><td><input type="button" value="Exec" id="execSingle2" data-rownum="2" data-exec="http://clouddom.ergologic.gr:8080/com.alchemist.ml/rowid/2/clfid/7/filterid/0/fileid/0/eval/false/numfolds/10/" class="btn btn-xs btn-success execSingle" style="display:none"></td><td><input type="button" value="Show" id="showSingle2" data-rownum="2" class="showSingle btn btn-xs btn-info"></td></tr>
<tr><td>3</td><td>Server 1 - locahost</td><td>RandomForest</td><td>No Filter</td><td>Anneal</td><td>false</td><td>10</td><td><input type="button" value="Exec" id="execSingle3" data-rownum="3" data-exec="http://clouddom.ergologic.gr:8080/com.alchemist.ml/rowid/3/clfid/8/filterid/0/fileid/0/eval/false/numfolds/10/" class="btn btn-xs btn-success execSingle" style="display:none"></td><td><input type="button" value="Show" id="showSingle3" data-rownum="3" class="showSingle btn btn-xs btn-info"></td></tr>
<tr><td>4</td><td>Server 1 - locahost</td><td>RandomTree</td><td>No Filter</td><td>Anneal</td><td>false</td><td>10</td><td><input type="button" value="Exec" id="execSingle4" data-rownum="4" data-exec="http://clouddom.ergologic.gr:8080/com.alchemist.ml/rowid/4/clfid/9/filterid/0/fileid/0/eval/false/numfolds/10/" class="btn btn-xs btn-success execSingle" style="display:none"></td><td><input type="button" value="Show" id="showSingle4" data-rownum="4" class="showSingle btn btn-xs btn-info"></td></tr>
</tbody>
</table>
</div>
</div>
<br>
<input type=button name="BuildAll" id="execBatch" class="btn btn-xs btn-info execBatch" value="Build All"/>
<hr>
<div id="output" style="border:1px solid red"></div>
</body>
</html>
AS you use jsonp, the function
callbackis called on return of the ajax request. But this function is not defined in your code. You need to implement it.