Div Block call works perfectly on the first ajax call. After show/hides on divs it doesn't block during 2nd ajax call

[sarobinson9535]

I've been struggling with this for a bit and haven't been able to find a solution.

Scenario:
I have a page with multiple divs. The workflow has been built by "showing and hiding" the appropriate div.

The div level block call works perfectly the first time you select from the list page and the ajax call is made to retrieve the information for the entry selected. The callback function executes the unblock, again perfectly, and the first page of the workflow is shown.

If you navigate "back" to the original list page and select the same element again, the same calls are made, but this time the block command doesn't show anything on the list page. The only time you see the block is a split second AFTER the 1st page in the workflow is rendered.

Below are the two functions I am working with to solve this issue (which repeats in all the pages built in this fashion).

Hoping it is just something easy I'm missing.

Generic representation of Page Divs are:

<div id="edit">
    <div id="page1">
    </div>

    <div id="page2">
    </div>
    
</div>

Functions in question:

function editInformation(selectedId)
{
    selected = selectedId;
    var data = { token: token }

    $('#mainBox').block({ message: '<span class="ion-loading-c myIon"></span><h4 class="loadingMsg">Loading</h4>', css: { border: 'none', backgroundColor: 'transparent', display: 'block'} });

    $.post(url + '/info', data, function(resp)
    {
        $('#mainBox').unblock();

        if(resp['resflag'] == true)
        {
            $('#list').hide();
            $('#edit').show();
            $('#page1').show();   
        }
        else
        {
            //error logic
        }
    });
}

$('#backToListing').click(function()
{
    $('#edit').hide();
    $('#page1').hide();
    $('#list').show();
});