jQuery css(“display”,“table-cell”) isn't immediately applied

Question

<table style="border: none; margin-top: 40px; width: 100%;">
    <tr>
        <td id="adparser" style="width: 74.5%;"/>
        <td id="thumbnailsSection" style="border: 2px solid black; display: none;">
            <div style="text-align: center;">
                <img src="arrow-right.png" style="border: 1px solid black; float: left; width: 16px; height: 16px;"/>
                Identified Ads
            </div>
            <ol id="thumbnailsList" style="list-style-type: none;">
                <div class="thumbnail">
                    <img src="https://s3.amazonaws.com/hiro-marketplace/thumb/413ce7c54ae87f9644b27a6d38790c2a.png"
                            style="width: 256px; height: 256px;"/><br/>
                    More Details<span><img src="play.png" style="width: 24px; height: 24px;"/></span>
                </div>
                <!-- More items... -->
            </ol>
        </td>
    </tr>
</table>

Ok, so #thumbnailsSection starts with "display: none". Later:

function requestChainsButtonClicked()
{
    $.ajax(
    {
        type: "GET",
        url: "json_simple.json" + queryString,
        success: function(data,status,XMLHttpRequest)
        {
            if (($.isArray(data))&&(data.length>0)&&($.isPlainObject(
                    data[0])))
            {
                nodeID=0;
                chartConfig.nodeStructure=buildTreeNode(data[0]);
            }
            new Treant(chartConfig);
            $(".viewCell").click(viewThumbnailsClicked);
        }
    });

So when the user clicks a button, the content of the first table cell is built, and when the user clicks one of the .viewCell buttons (which are part of the tree in the first cell):

function viewThumbnailsClicked()
{
    $.ajax(
    {
        type: "GET",
        url: "thumbnails.json",
        error: function(XMLHttpRequest,status,message)
        {
            $("#thumbnailsSection").css("display","none");
            alert(status + ": " + message); 
        },
        success: function(data,status,XMLHttpRequest)
        {
            var thumbnailsListSelector=$("#thumbnailsList");
            thumbnailsListSelector.empty();
            if ($.isArray(data))
            {
                for (var index=0;index<data.length;index++)
                {
                    var thumbnailHTML="<div class=\"thumbnailItem\">";
                    thumbnailHTML+="<img class=\"thumbnail\" src=\"";
                    thumbnailHTML+=data[index].thumbUrl + "\"/><br/>";
                    thumbnailHTML+="More Details<span><img src=\"";
                    thumbnailHTML+="play.png\" class=\"details\"/>";
                    thumbnailHTML+="</span></div>";
                    thumbnailsListSelector.append(thumbnailHTML);
                }
            }
            $("#thumbnailsSection").css("display","table-cell");
        }
    });

So, I would expect the second table cell (#thumbnailsSection) to appear immediately when I click the button, but it doesn't happen! Only after I click again the button that builds the first table cell, the second one is displayed.

What's actually the issue? Do I need to do some refresh on the table to see the second cell? Thanks.

Answer 1

Try It on ajax success but I am not sure

$("#thumbnailsSection").css("display","table-cell");
var thumbnailsListSelector=$("#thumbnailsList");
thumbnailsListSelector.empty();
if ($.isArray(data))
{
    for (var index=0;index<data.length;index++)
    {
        var thumbnailHTML="<div class=\"thumbnailItem\">";
        thumbnailHTML+="<img class=\"thumbnail\" src=\"";
        thumbnailHTML+=data[index].thumbUrl + "\"/><br/>";
        thumbnailHTML+="More Details<span><img src=\"";
        thumbnailHTML+="play.png\" class=\"details\"/>";
        thumbnailHTML+="</span></div>";
        thumbnailsListSelector.append(thumbnailHTML);
    }
}