问题
I have a select list. Each option is a bundle of short texts. When a specific bundle is selected, the texts are displayed in two tables. Each row has a "Delete" icon, so that a text can be removed from the bundle. I want both the tables and the select list to refresh after deletion. There are three chained calls:
delete text from db >>
refresh select list and dump some data in a custom tag >>
get data from custom tag and rebuild tables
But they seem to be firing in the order 3 >> 1 >> 2. The solution I am trying to reproduce is this. What am I doing wrong?
Thank you for your help!
~~~~~~~~~~~~~
UPDATE
1 and 2 are definitely executing sequentially (see screenshot). The problem is with 3 ('createSegTableRows'). This is the one that does NOT make a call to the server.
~~~~~~~~~~~~~
Here's the code. (The broken bit is the last block in the first snippet.)
snippet 1: This fires when an option is selected from the select list:
// This fires when a bundle is selected.
function selectBundle() {
createSegTableRows();
rowIconActions();
// this creates some rows for a couple of tables
function createSegTableRows() {
// get "value" from the currently selected option
var bundle_id = $('select#bundleSelector').find(':selected').prop('value');
// get some strigified JSON data stored in a custom tag
var inTagData = $('select#bundleSelector').find(':selected').attr('data');
// convert back to a JSON object
var inTagData_parsed = JSON.parse(inTagData);
// convert some data from inside the JSON object to HTML table rows
var st_table_contents = tableRows(inTagData_parsed.st);
var tt_table_contents = tableRows(inTagData_parsed.tt);
// populate the tables
$('#st_seg_table').html(st_table_contents);
$('#tt_seg_table').html(tt_table_contents);
// this converts JSON data into table rows
function tableRows(rObj) {
// map to array and sort
var rArray = $.map(rObj, function(el) {
return el;
});
rArray.sort(function(a, b) {
return a.join_id > b.join_id;
});
// create rows
var rows = ""
for (i = 0; i < rArray.length; i++) {
var segment_id = rArray[i]['segment_id'];
var join_id = rArray[i]['join_id'];
var segment_text = rArray[i]['seg_text'];
// each row has some text and Up/Down/Delete buttons
rows += "<tr><td class='sid tt'>" + segment_id + " <a title='Up' jid='" + join_id + "'>▲</a><a title='Down' jid='" + join_id + "'>▼</a> <a title='Remove' jid='" + join_id + "'>✕</a> </td><td>" + segment_text + "</td></tr>";
}
return rows;
}
console.log("some table rows");
}
// actions fired by Up/Down/Delete in each row
function rowIconActions() {
// find selected option in a <select> list
var bundle_id = $('select#bundleSelector').find(':selected').prop('value');
// attach an action to the Delete buttons in each table row
$('td.sid>a[title="Remove"]').click(function() {
var join_id = $(this).attr('jid');
var role = $(this).parent().prop('className').split(" ")[1];
// THIS IS THE BIT THAT DOESN'T WORK
if (join_id && bundle_id) {
$.post(
// delete record in db
'ajax/bundle_delete_join.php', {
bid: bundle_id,
jid: join_id
// rebuild <select> list
}).then(function() {
return bundleSelector();
console.log("some stuff");
// rebuild tables
}).done(function() {
createSegTableRows();
console.log("done");
});
}
});
}
}snippet 2: This repopulates the select list:
// This repopulates the select list.
function bundleSelector() {
if ($("#pairButton").text("Unpair")) {
var pid = $("#pairButton").attr("pairid");
}
$.post(
// collect some criteria and retrieve stuff from db
'ajax/bundle_selector.php', {
st: $("#txtId_left").html(),
tt: $("#txtId_right").html(),
pair: pid,
filter_st: $('#bundleFilterCheck_st').prop('checked'),
filter_tt: $('#bundleFilterCheck_tt').prop('checked'),
filter_pair: $('#bundleFilterCheck_pair').prop('checked')
},
function(data) {
if (data) {
// convert results to a JSON object
var dataObj = JSON.parse(data);
// create a variable for the options
var options = '';
if (dataObj != "") {
// loop through the JSON object...
Object.keys(dataObj).forEach(key => {
var bundle_id = key;
var role = dataObj[key];
options = options + "<option value='" + bundle_id + "' data='" + JSON.stringify(role) + "'>bundle " + key;
// loop some more...
Object.keys(role).forEach(key => {
if (role[key] && key != 'comment' && JSON.stringify(role[key]) != '[]') {
options = options + " | " + key + ":";
var segment_id = role[key];
// convert to an array for sorting
var joinDataArray = $.map(segment_id, function(el) {
return el;
});
// sort the array
joinDataArray.sort(function(a, b) {
return a.join_id > b.join_id;
});
// loop through the array
for (i = 0; i < joinDataArray.length; i++) {
var sid = joinDataArray[i]['segment_id'];
options = options + " " + sid;
}
}
});
// add a closing tag to each option
options = options + "</option>";
});
// populate parent element
$('select#bundleSelector').html(options);
console.log("some select options");
} else {
// if there are no results...
$('select#bundleSelector').html("");
$('table#st_seg_table').html("");
$('table#tt_seg_table').html("");
$('textarea#bundle_comment').html("");
}
} else {
// and again
$('select#bundleSelector').html("");
$('table#st_seg_table').html("");
$('table#tt_seg_table').html("");
$('textarea#bundle_comment').html("");
}
}
);
}回答1:
The key here lies in understanding that bundleSelector() is asynchronous.
In "THE BIT THAT DOESN'T WORK" you correctly return bundleSelector(); but that function returns undefined. In order for something to run after bundleSelector() has completed, it must return a promise and, for createSegTableRows() to work as expected, that promise must fulfill not only when its $.post() has returned but also when all the option-building is complete.
To achieve that, bundleSelector()'s $.post(..., fn) call must be modified to return $.post(...).then(fn), otherwise the caller will not wait for the option-building to complete before proceeding to createSegTableRows(); hence the 3-1-2 execution order you report.
来源：https://stackoverflow.com/questions/46381648/chained-jquery-ajax-calls-firing-in-wrong-order