A useful feature of jQuery

In one of the projects, I had the following task: there are several drop-down lists on the page, the contents of which are loaded using ajax and depend on the selected value in another drop-down list (I will call it “main”). Ajax requests are triggered at the change event of the main drop-down list.

With synchronous ajax requests, I ran through all the drop-down lists, ran the request and inserted the contents into the lists. But it caused some delay. When switching to asynchronous ajax requests, I ran into a problem: how to find out for which list this request was executed?

There may be other solutions for this, but I have come to the following:

')
For the sake of experiment, I tried to pass a new property to the jQuery.ajax () function in the options list. It turned out that it becomes available in the success function of the object referenced by the variable this.

Example:

// $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .

1. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
2. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
3. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
4. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
5. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
6. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
7. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
8. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
9. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
10. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
11. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
12. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
13. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
14. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
15. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
16. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .
17. // $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .

// $( "#order-otdel" ).change( function () { var otdel = $( "#order-otdel option:selected" ).val(); $( ".employee" ).each( function (i){ $.ajax({ idx: i, // <--- type: "GET" , url: "get.php" , data: "action=get_employee&oid=" + otdel + "&jid=" + $( this ).attr( 'job_id' ), success: function (options){ var cur = $( '.employee' ).eq( this .idx); // <--- cur.empty(); cur.append(options); //... }); }); }); * This source code was highlighted with Source Code Highlighter .