0

I have a group of select option and each are relational from top to bottom by ajax. This is works fine in insert mode. But in edit mode when i push data to perform ajax operation and set the selected value based on stored data, It sometime not setting the value though the data is loaded to DOM and sometime it's working.

Actually if any data would miss, all the next data won't be loaded. but here 3rd and 4th data missed but 5th data is loaded.

I can't figure it out what is the problem. Please help if possible.

3rd and 4th option not selected but 5th is selected

This is one of the ajax function to load data to district section

function loadDistricts(division1, distidentifier) {
            return $.ajax({
                type: 'post',
                url: 'GetDistricts',
                data: {
                    get_option:division1
                },
                success: function(response) {
                    $(distidentifier).html(response);
                }
            });
        }

This is the function to call the ajax function and select the proper value

function loadAdress(divi, diviselect, dist, distselect, upaz, upazselect, unio, unioselect, vill, villselect){      // Id of all address field and jquery selector pass here
            $(diviselect).val(divi).trigger('change');
            loadDistricts(divi, distselect).done(function() {
                $(distselect).val(dist).prop('selected', 'selected').trigger('change');
                loadUpazilla(dist, upazselect).done(function() {
                    $(upazselect).val(upaz).prop('selected', 'selected').trigger('change');
                    loadUnion(upaz, unioselect).done(function(){
                        $(unioselect).val(unio).prop('selected', true).trigger('change');
                        loadVillage(unio, villselect).done(function(){
                            $(villselect).val(vill).trigger('change');
                        });  
                    });
                });
            }); 
        }

And finally I called the function, with value and jqueryidentifire --

loadAdress(divipid, '#divisions', distpid, '#districts', upapid, '#upazila', unipid, '#allunions', villpid, '#villages');

Any suggestion is appreciated.

aziz
  • 326
  • 1
  • 20
  • 1
    Probably just because the ajax is async by default, try `async: false` to see what happens. – skobaljic Feb 15 '18 at 12:12
  • 1
    Well the url you are using for the ajax request is GetDistricts. It is not a correct url. Also you are loading the select boxes one after the other. You can load them in parallel. – Nadir Latif Feb 17 '18 at 05:05
  • GetDistrict giving data accurately, but problem when i tried to select the value on load. And every request need previous data, so before finish the previous request how could I load next one? Will you please explain, it will be very helpful. @NadirLatif – aziz Feb 17 '18 at 05:31
  • You might be using the wrong url for selecting the selectbox option: https://stackoverflow.com/questions/314636/how-do-you-select-a-particular-option-in-a-select-element-in-jquery – Nadir Latif Feb 17 '18 at 05:38
  • Sometimes it load data proplerly, and sometime it missed. How could it load if I put wrong URL? i cross checked and no problem in url, the problem with function efficiency :'( – aziz Feb 17 '18 at 05:46

0 Answers0