Wie die Anzeige "loading" - Symbol über dem Tisch während der Wartezeit für den AJAX-request abgeschlossen ist?

Ich habe eine Seite, die macht eine ajax-Anfrage an den server. der server return "Tabellenzeilen" html-code, dann habe ich Platz, dass code in die Tabelle.

hier ist ein Beispiel für die server-Antwort

<tr>
<td>This is a cell</td>
<td>this is a second cell</td>
<td>this is a third cell</td>
</tr>

Meiner Seite, wenn ich laden will, die Ergebnisse, die kommen wieder aus hier server habe ich diesen code

<table id="main">
<tbody id="results">
</tbody>
</table>

dies ist ein Beispiel meiner jquery

$(function(){
$('#results').html('');
        $.getJSON("ajax/loader-display-previos-calls.php", {
            account_id: <?php echo $account_id; ?>
        },function (data) {

            if ( ! data) 
            return; 
            $('#results').html(data.msg);


            }

        ).done( function(){

            $('.sub_note').shorten({
                moreText: 'read more',
                lessText: 'read less',
                showChars: '100'
            }); 
        });

});

Was ich versuche zu tun, hier ist die Anzeige ein laden-Symbol über die vorhandene Tabelle.
Ich bin auf der Suche nach
1) legen Sie ein transparentes block auf die gesamte Tabelle
2) legen Sie eine laden-Symbol in der Mitte dieser transparenten block.

Habe ich versucht, dieses

$('#results').html('<img src="images/ajaxSpinner.gif" alt="please wait..." style="width: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px;display: block;"/>');

dies zeigt eine spinner-Symbol in der Mitte der Seite.

grundsätzlich habe ich sill zeigen die aktuellen Ergebnisse mit einem laden-Symbol, bis der server schickt die Anfrage.

Wie kann ich die Tabelle und Ihr Inhalt transparent dann das laden-Symbol in der Mitte?

InformationsquelleAutor Jaylen | 2013-11-18

  1. 7

    Ich glaube, Sie suchen nach ajaxStart() und ajaxComplete()

    Fügen Sie diese zu Ihrem Skript innerhalb:

    $(document).ready(function(){
  ajaxStart(){
    $('.mask').addClass('ajax');
  }
  ajaxComplete(){
    $('.mask').removeClass('ajax');
  }
})

    Und fügen Sie dieses HTML-tag überall:

    <div class="mask">

    Und fügen Sie diese in Ihre CSS:

    .mask{
  display: none; /*This hides the mask*/
}

.mask.ajax{
  display: block;
  width: 100%;
  height: 100%;
  position: relative; /*required for z-index*/
  z-index: 1000; /*puts on top of everything*/
  background-image: url (loading-icon.png);
}
    Sie bemerken, ich bin mit $.getJSON() und nicht ajaxStart() ajaxComplete(). aber das Problem, dass ich habe und brauche Hilfe mit css. wie man eine Klasse, die angewendet auf eine Tabelle. so wie eine Tabelle transparent und legen Sie ein Symbol in der Mitte des Tisches.
    Sorry, habe ich falsch verstanden, aber die gleichen Prinzipien gelten. Hier ein fiddle: jsfiddle.net/j56yH
    Vielen Dank. Perfekte Antwort

    InformationsquelleAutor Geoffrey Burdett

Schreibe einen Kommentar