Question

I’m trying to show <div> depending on the operation chosen. I have put a list in the database that coordinates between the operation and the class of the <div>. When testing the code, it works several times, then randomly stops working. I verified the content; it’s okay. It seems to be a problem or a bug when using .show() after .hide().

Any idea how to fix it?

$("#ddlOperation").change(function() {
    var idState = $(this).val();

    // get the name of all classes and hide it
    $.getJSON("/Trademark/hideFirst", function(fiData) {
        $.each(fiData, function (index, itemData) {
            $('.' + itemData.Text).hide("slow");
        });
    });

    // get the class that must be shown
    $.getJSON("/Trademark/LoadFieldByOperation", { id: idState }, 
        function(fData) {   
            $.each(fData, function (index, itemData) {
                $('.' + itemData.Text).show("slow");     
    // doesn't work always even the itemData.Text contains the suitable string!
        });
});

Answer 1

The two requests are async, so there is no guarantee, that the firtst callback, which hides the items, runs before the second callback. To ensure this, you can do the following:

    // get the name of all classes and hide it
    $.getJSON("/Trademark/hideFirst", function (fiData) {
        $.each(fiData, function (index, itemData) {
            $('.' + itemData.Text).hide("slow");
        });
        // get the class that must be shown
        $.getJSON("/Trademark/LoadFieldByOperation", { id: idState }, function (fData) {   
            $.each(fData, function (index, itemData) {
                $('.' + itemData.Text).show("slow");
            });
        });
    });