I have an application using jquery 2.0.3 and a CakePHP 2.x back-end. It's a legacy application, which is why we're using those versions.
Part of the application features a <select id="orderTags"> which when changed fires an ajax request to an endpoint /get_tags. This returns a JSON-encoded response which is then used to update some list items in an element called #tags.
The code to make the request works by listening for changes to #orderTags:
$('#orderTags').change(function() {
var order = $('#orderTags option:selected').val();
$("#tags ul").html('');
get_tags(order);
});
This then executes get_tags() and passes in a string for ordering, which are set as follows:
- Order by date added (name:
"date") - Order by name ASC (name:
"name_asc") - Order by name DESC (name:
"name_desc")
I can see in my browser Network tab that requests are being made to the appropriate endpoint - giving a 200 status - and passing in the appropriate string as a $_GET parameter:
/get_tags?orderby=date/get_tags?orderby=name_asc/get_tags?orderby=name_desc
When viewing the Response in my Network tab, the endpoint is producing the correct (i.e. different order in each case) JSON. For example the screenshots below so the response from (2) and (3) above, and as you can see the order is alphabetical:

I'm using the $.each function in jquery to loop through the response. The following is the code inside get_tags() referenced above:
function get_tags(order) {
order = order || "date";
$.ajax({
url: '/get_tags',
dataType: 'json',
data: {'orderby': order},
cache: false
}).done(function (data) {
console.log(data);
var items = '';
$.each(data, function (key, val) {
items += '<li id="tag-' + key + '"><i class="fa-li fa fa-tags"></i>' + val + '</li>';
});
$("#tags ul").append(items);
});
The console.log(data) is giving a different output to the response from the script. I've used cache: false and can see jquery is appending the _ parameter in the URL.
So for example I've posted the console.log output from the above 2 screenshots. The same data - in totally the wrong order - is being presented in each case:
Why is this happening?




.done()? If you know the answer to this or have a link please post a solution.