Multiple Tables and Local storage in Chrome and Safari

Discuss MySQL Ajax Table Editor Pro Version

Multiple Tables and Local storage in Chrome and Safari

Postby czoch » Tue Aug 27, 2019 7:04 pm

I have a page that pulls data from 8 different tables, similar to the example given in the Multiple Tables demo. It works perfect in Firefox and Edge. When I use Chrome or Safari, all eight tables will display perfectly the first time I access the page. If I refresh or leave the page and come back, it will only display the first table and the last table. If, however, I delete the local storage variables, all 8 tables will appear again.

Here's my code on the main page:

Code: Select all
class ExamineeDetails extends Common
{
    protected $mateInstances = array('mate1_','mate2_','mate3_','mate4_','mate5_','mate6_','mate7_','mate8_');

    protected function displayHtml()
    {
                <div class="content">
                    <main id="maincontent" role="main">
                        <div id="' . $this->mateInstances[0] . 'information" class="w3-overlay-color"></div>
                        <div id="container1" class="container" style="padding-top:0;">
                            <div id="' . $this->mateInstances[0] . 'titleLayer" class="mateTitleDiv"></div>
                            <div id="' . $this->mateInstances[0] . 'searchStringLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[0] . 'tableLayer" class="mateTableDiv"></div>
                            <div id="' . $this->mateInstances[0] . 'updateInPlaceLayer" class="mateUpdateInPlaceDiv" ></div>
                            <div id="' . $this->mateInstances[0] . 'searchButtonsLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[0] . 'recordLayer" class="mateRecordLayerDiv"></div>
                        </div><br/>
                        <div id="' . $this->mateInstances[1] . 'information"></div>
                        <div id="container2" class="container" style="padding-top:0;">
                            <div id="' . $this->mateInstances[1] . 'titleLayer" class="mateTitleDiv"></div>
                            <div id="' . $this->mateInstances[1] . 'searchStringLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[1] . 'tableLayer" class="mateTableDiv"></div>
                            <div id="' . $this->mateInstances[1] . 'updateInPlaceLayer" class="mateUpdateInPlaceDiv" ></div>
                            <div id="' . $this->mateInstances[1] . 'searchButtonsLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[1] . 'recordLayer" class="mateRecordLayerDiv"></div>
                        </div><br/>
                        <div id="' . $this->mateInstances[2] . 'information"></div>
                        <div id="container3" class="container" style="padding-top:0;">
                            <div id="' . $this->mateInstances[2] . 'titleLayer" class="mateTitleDiv"></div>
                            <div id="' . $this->mateInstances[2] . 'searchStringLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[2] . 'tableLayer" class="mateTableDiv"></div>
                            <div id="' . $this->mateInstances[2] . 'updateInPlaceLayer" class="mateUpdateInPlaceDiv" ></div>
                            <div id="' . $this->mateInstances[2] . 'searchButtonsLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[2] . 'recordLayer" class="mateRecordLayerDiv"></div>
                        </div><br/>
                        <div id="' . $this->mateInstances[3] . 'information"></div>
                        <div id="container4" class="container" style="padding-top:0;">
                            <div id="' . $this->mateInstances[3] . 'titleLayer" class="mateTitleDiv"></div>
                            <div id="' . $this->mateInstances[3] . 'searchStringLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[3] . 'tableLayer" class="mateTableDiv"></div>
                            <div id="' . $this->mateInstances[3] . 'updateInPlaceLayer" class="mateUpdateInPlaceDiv" ></div>
                            <div id="' . $this->mateInstances[3] . 'searchButtonsLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[3] . 'recordLayer" class="mateRecordLayerDiv"></div>
                        </div><br/>
                        <div id="' . $this->mateInstances[4] . 'information"></div>
                        <div id="container5" class="container" style="padding-top:0;">
                            <div id="' . $this->mateInstances[4] . 'titleLayer" class="mateTitleDiv"></div>
                            <div id="' . $this->mateInstances[4] . 'searchStringLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[4] . 'tableLayer" class="mateTableDiv"></div>
                            <div id="' . $this->mateInstances[4] . 'updateInPlaceLayer" class="mateUpdateInPlaceDiv" ></div>
                            <div id="' . $this->mateInstances[4] . 'searchButtonsLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[4] . 'recordLayer" class="mateRecordLayerDiv"></div>
                        </div>
                        <div id="' . $this->mateInstances[5] . 'information"></div>
                        <div id="container6" class="container" style="padding-top:0;">
                            <div id="' . $this->mateInstances[5] . 'titleLayer" class="mateTitleDiv"></div>
                            <div id="' . $this->mateInstances[5] . 'searchStringLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[5] . 'tableLayer" class="mateTableDiv"></div>
                            <div id="' . $this->mateInstances[5] . 'updateInPlaceLayer" class="mateUpdateInPlaceDiv" ></div>
                            <div id="' . $this->mateInstances[5] . 'searchButtonsLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[5] . 'recordLayer" class="mateRecordLayerDiv"></div>
                        </div>
                        <div id="' . $this->mateInstances[6] . 'information"></div>
                        <div id="container7" class="container" style="padding-top:0;">
                            <div id="' . $this->mateInstances[6] . 'titleLayer" class="mateTitleDiv"></div>
                            <div id="' . $this->mateInstances[6] . 'searchStringLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[6] . 'tableLayer" class="mateTableDiv"></div>
                            <div id="' . $this->mateInstances[6] . 'updateInPlaceLayer" class="mateUpdateInPlaceDiv" ></div>
                            <div id="' . $this->mateInstances[6] . 'searchButtonsLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[6] . 'recordLayer" class="mateRecordLayerDiv"></div>
                        </div>
                        <div id="' . $this->mateInstances[7] . 'information"></div>
                        <div id="container8" class="container" style="padding-top:0;">
                            <div id="' . $this->mateInstances[7] . 'titleLayer" class="mateTitleDiv"></div>
                            <div id="' . $this->mateInstances[7] . 'searchStringLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[7] . 'tableLayer" class="mateTableDiv"></div>
                            <div id="' . $this->mateInstances[7] . 'updateInPlaceLayer" class="mateUpdateInPlaceDiv" ></div>
                            <div id="' . $this->mateInstances[7] . 'searchButtonsLayer" class="mateSearchBtnsDiv"></div>
                            <div id="' . $this->mateInstances[7] . 'recordLayer" class="mateRecordLayerDiv"></div>
                        </div>                       
                        <div id="' . $this->mateInstances[0] . 'duplicateCustomButtonLayer" class="mateTitleDiv"></div>
                    </main>
                </div>
            </div>';
        echo $html;

// Set default session configuration variables here
        $defaultSessionData['orderByColumn'] = 'examinee_id';
        $defaultSessionData['displayNum'] = 5;
        $defaultSessionData = base64_encode(json_encode($defaultSessionData));

        $javascript = '   
<script type="text/javascript">
    var ' . $this->mateInstances[0] . ' = new mate("' . $this->mateInstances[0] . '");
    ' . $this->mateInstances[0] . '.setAjaxInfo({url: "protocol.php", history: false});
    ' . $this->mateInstances[0] . '.init("' . $defaultSessionData . '");
   
    var ' . $this->mateInstances[1] . ' = new mate("' . $this->mateInstances[1] . '");
    ' . $this->mateInstances[1] . '.setAjaxInfo({url: "caregiver.php", history: true});
    ' . $this->mateInstances[1] . '.init("' . $defaultSessionData . '");
            
    var ' . $this->mateInstances[2] . ' = new mate("' . $this->mateInstances[2] . '");
    ' . $this->mateInstances[2] . '.setAjaxInfo({url: "sibling.php", history: true});
    ' . $this->mateInstances[2] . '.init("' . $defaultSessionData . '");
   
    var ' . $this->mateInstances[3] . ' = new mate("' . $this->mateInstances[3] . '");
    ' . $this->mateInstances[3] . '.setAjaxInfo({url: "hospitalizations.php", history: true});
    ' . $this->mateInstances[3] . '.init("' . $defaultSessionData . '");
   
    var ' . $this->mateInstances[4] . ' = new mate("' . $this->mateInstances[4] . '");
    ' . $this->mateInstances[4] . '.setAjaxInfo({url: "medications.php", history: true});
    ' . $this->mateInstances[4] . '.init("' . $defaultSessionData . '");
   
    var ' . $this->mateInstances[5] . ' = new mate("' . $this->mateInstances[5] . '");
    ' . $this->mateInstances[5] . '.setAjaxInfo({url: "provider.php", history: true});
    ' . $this->mateInstances[5] . '.init("' . $defaultSessionData . '");
   
    var ' . $this->mateInstances[6] . ' = new mate("' . $this->mateInstances[6] . '");
    ' . $this->mateInstances[6] . '.setAjaxInfo({url: "referral.php", history: true});
    ' . $this->mateInstances[6] . '.init("' . $defaultSessionData . '");
   
     var ' . $this->mateInstances[7] . ' = new mate("' . $this->mateInstances[7] . '");
    ' . $this->mateInstances[7] . '.setAjaxInfo({url: "notes.php", history: true});
    ' . $this->mateInstances[7] . '.init("' . $defaultSessionData . '");

</script>';
        echo $javascript;
    }

    function __construct()
    {
       session_start();
        ob_start();
        $this->showBackLink = true;
        $this->displayHeaderHtml();
        $this->displayHtml();
        $this->displayFooterHtml();
    }
}

$page = new ExamineeDetails();
?>


What do I need to do to get this working in Chrome and Safari?

Thank you!

C Zoch
czoch
 
Posts: 15
Joined: Wed Aug 03, 2011 3:55 pm

Return to Pro Version

Who is online

Users browsing this forum: No registered users and 3 guests

cron