Question

I load a SELECT element via Ajax (list of brands), get its selected value (brand id) and load another SELECT via another Ajax URL (list of templates for currently selected brand).

Here’s my code:

$(document).ready( function() {


    // DO NOT cache Ajax calls
    $.ajaxSetup ({ cache: false });

    // loader
    var ajax_load = "Loading...";

    //  Brands List URL
    var loadBrandUrl = "getBrandsList.php";
    //  Templates List URL
    var loadTemplateUrl = "getTemplatesList.php";

    $("#brandslistSelect").html(ajax_load).load(loadBrandUrl)
        .ajaxComplete(function(){  // Brands select loaded

        /* Load Templates SELECT the first time since no .change() has happened */
            var selectedBrand = $("#brandslistSelect option:selected").attr("value");  // get the value
            console.log(selectedBrand);  // Log selected brand to console
            // get Templates select, commented for now since it does an infinite loop
            // $("#templateslistSelect").html(ajax_load).load(loadTemplateUrl, { BrandId: selectedBrand } );
        /* End initial load template */

        /* On interaction with the Brands SELECT */
        $("#brandslistSelect").change(function () {  // on interaction with select

            selectedBrand = $("#brandslistSelect option:selected").attr("value");  // get the value
            // get Templates SELECT
            $("#templateslistSelect").html(ajax_load).load(loadTemplateUrl, { BrandId: selectedBrand } )
        });
        /* End interaction with the Brands SELECT */

    });


});

It returns selectedBrand in the console 3 times :
selectedBrand = undefined
selectedBrand = undefined
selectedBrand = 101

Now, if I uncomment the following line, same output as above but it also loads the templates URL indefinitely :

// $("#templateslistSelect").html(ajax_load).load(loadTemplateUrl, { BrandId: selectedBrand } );

---

Any idea how I could modify this code to make it work as intended?

Thanks for your help stackOverflow community!

Answer 1

Do you get the same effect if you pass the function as the second argument of .load()? It sounds like for some reason the log code is being called before the HTML has finished loading, and that’s why it can’t find the select. It almost “feels” like the ajaxComplete() is being called each time a data chunk is downloaded, and not after the entire process.

$("#brandslistSelect").html(ajax_load);
$("#brandslistSelect").load(loadBrandUrl, function(){  // Brands select loaded

    /* Load Templates SELECT the first time since no .change() has happened */
        var selectedBrand = $("#brandslistSelect option:selected").attr("value");  // get the value
        console.log(selectedBrand);  // Log selected brand to console
        // get Templates select, commented for now since it does an infinite loop
        // $("#templateslistSelect").html(ajax_load).load(loadTemplateUrl, { BrandId: selectedBrand } );
    /* End initial load template */

    /* On interaction with the Brands SELECT */
    $("#brandslistSelect").change(function () {  
        // on interaction with select
        selectedBrand = $("#brandslistSelect option:selected").attr("value");  // get the value
        // get Templates SELECT
        $("#templateslistSelect").html(ajax_load);
        $("#templateslistSelect").load(loadTemplateUrl, { BrandId: selectedBrand } );
    });
    /* End interaction with the Brands SELECT */

})