CODEWITHSUNDEEP
javascriptjquery
Code_Ed_Student
Code_Ed_Student

Reputation: 1190

Load page show Ajax loader gif

I have a basic footable that I am loading on page startup. In combination with the table I am using an ajax loader to display. The ajax loader will display and the table will remain hidden till the page is fully loaded. Once page fully loaded the table will show and the ajax loader will hide. I am having a little luck in getting the procedure correct. The table is not hiding and the loading gif is showing up incorrectly. JSFIDDLE 

$(window).load(function(){
    var toLoad = $('table');
    $('table').hide('fast',loadTable);
    $('#load').remove();
    $('#output').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    function loadTable() {
      $('table').load(toLoad,'',showNewTable())
    }
    function showNewTable() {
      $('table').show('normal',hideLoader());
    }
    function hideLoader() {
      $('#load').fadeOut('normal');
    }
    return false;
  });

Upvotes: 0

Views: 972

Answers (2)

Idkt
Idkt

Reputation: 2996

Try this fiddle, if I'm not wrong about what you want to go for, more precisely;

$(document).ready(function () {
    $('.footable').footable();
    var toLoad = $('table');
    // $('table').hide('fast', loadTable);
    $('span#load').hide();
    // $('#output').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    loadTable();

    function loadTable() {
        $('table').load(toLoad, '', showNewTable())
    }

    function showNewTable() {
        $('table').show('normal', hideLoader());
    }

    function hideLoader() {
        $('#load').slideUp('fast');
    }
    return false;
});

And some changes to the HTML;

<div id="output">
    <span id="load">Loading…</span>
    <table class="footable" style="display:none;">
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th data-hide="phone, tablet">Head 3</th>
                <th data-hide="phone, tablet">Head 4</th>
                <th data-hide="phone, tablet">Head 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Content 1</td>
                <td>Content 2</td>
                <td>Content 3</td>
                <td>Content 4</td>
                <td>Content 5</td>
            </tr>
            <tr>
                <td>Content 6</td>
                <td>Content 7</td>
                <td>Content 8</td>
                <td>Content 9</td>
                <td>Content 10</td>
            </tr>
            <tr>
                <td>Content 11</td>
                <td>Content 12</td>
                <td>Content 13</td>
                <td>Content 14</td>
                <td>Content 15</td>
            </tr>
            <tr>
                <td>Content 16</td>
                <td>Content 17</td>
                <td>Content 18</td>
                <td>Content 19</td>
                <td>Content 20</td>
            </tr>
        </tbody>
    </table>
</div>

Upvotes: 0

Lian
Lian

Reputation: 1629

Hi I try to provide some example.... you can try this

$(window).load(function () {
        $('#output').append('<span id="load">LOADING...</span>');
        $('.footable').hide();

    setTimeout(function(){
        $('#load').fadeOut('normal');      
        $('.footable').fadeIn('normal');
        $('.footable').footable();
    }, 5000); //Timeout 5 seconds
});

Or you can view here... http://jsfiddle.net/zylar23/DLpaf/

Upvotes: 1

Related Questions