CODEWITHSUNDEEP
jquery
Yasminette
Yasminette

Reputation: 55

.show() after .hide() doesn't always display

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!
        });
});

Upvotes: 2

Views: 1267

Answers (5)

Andre Loker
Andre Loker

Reputation: 8408

$.getJson() works asynchronously so it could be that the function that shows items is called before the function that hides items.

Either change the code that the order doesn't matter or don't apply the results of the second getJson until the results of the first getJson have been applied. For example, you can use variables to track whether items have already been hidden, like so:

var secondResults;
var firstReceived;

// first
$.getJson(..., function(fData) { 

    // hide stuff

    if(secondResults){
      //show stuff
    }
    firstReceived = true;
});


// second
$.getJson(...., function(fData) {
    ....
    if(!firstReceived){
       secondResults = fData;
    } else {
       // show stuff
    }
});

Or you could chain the two getJson calls synchronously by calling the second getJson in the success function of the first getJson call.

Upvotes: 0

Marius Ilie
Marius Ilie

Reputation: 3323

these two ajax calls are executed at the same time so it's possible for the second one to finish the call first. This means that when first call finishes, your div will be actually hidden

Upvotes: 0

istvan.halmen
istvan.halmen

Reputation: 3350

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");
            });
        });
    });

Upvotes: 3

deadrunk
deadrunk

Reputation: 14125

I guess that first block of code is still working when you try to show content. Try to remove "slow" in order to get tweens faster.

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71908

You are firing two ajax requests in sequence. Since they are asynchronous, there is no guarantee that the first response will arrive before the second one. Since you are calling .show() and .hide() from the response callbacks, that may be the cause of your issue.

Upvotes: 1

Related Questions