J'ai le menu de sélection suivant:

<select name="period" id="stats-period">
        <option value="all">All time</option>
        <option value="360">12 months</option>
        <option value="270">9 months</option>
        <option value="180">6 months</option>
        <option value="90">3 months</option>
        <option selected="selected" value="30">30 days</option>
        <option value="7">7 days</option>
    </select>

Lorsque je sélectionne une option dans la liste déroulante, je fais un appel ajax afin d'obtenir les enregistrements corrects de la base de données, voici donc mon script:

function timePeriod(changePeriod) {

                var url = '<?= admin_url('reports/change_period') ?>';

                $.post(url, {period: changePeriod}, function (response) {

                    var json = $.parseJSON(response);

                    if (json.error == true) {
                        $('#reports').hide();
                        $('#no-reports').show();
                    } 
                    else {
                        $('#reports').show();
                        $('#no-reports').hide();

                        $('#numprojects').text(json.projects);
                        $('#average-cost').text(json.average_cost.toFixed(2));
                        $('#over-budget').text(json.over_budget);
                        $('#average-client-flags').text(json.average_client_flags);
                        $('#average-delayed').text(json.average_delayed.toFixed(1));
                    }
                });
            }

            $('#stats-period').on('change', function(){
                var selected = $(this).val();
                timePeriod(selected);
            });

Ce que je ne veux pas faire, c'est d'afficher un symbole de chargement lorsque vous modifiez la valeur sélectionnée de la liste déroulante, jusqu'à ce que l'appel ajax soit terminé, comment puis-je faire cela?

1
ltdev 9 août 2016 à 15:03

3 réponses

Meilleure réponse

En supposant que votre gif de chargement se trouve dans une div avec ID = #myDiv

function timePeriod(changePeriod) {

    var url = '<?= admin_url('reports/change_period') ?>';

    $('#myDiv').show();

    $.post(url, {period: changePeriod}, function (response) {

        $('#myDiv').hide();

        var json = $.parseJSON(response);

        >SNIP<
0
cssyphus 9 août 2016 à 12:09

Vous pouvez créer l'élément de chargement s'il n'existe pas encore, afficher sa position par rapport à votre option de sélection. Une fois que vous avez obtenu la réponse du serveur, vous pouvez la masquer:

function timePeriod(changePeriod) {
    var url = '<?= admin_url('reports/change_period') ?>';
    if ($('#loading').length == 0) {
        loading = $('<img src="loading.gif" alt="" id="loading" />')
        $('body').append(loading)
        loading.hide();
    } else {
        loading = $('#loading');
    }
    loading.position({
      my: "left top",
      at: "right top",
      of: "#stats-period"
    }).show();
    $.post(url, {period: changePeriod}, function (response) {
        loading.hide();

        var json = $.parseJSON(response);
        if (json.error == true) {
            $('#reports').hide();
            $('#no-reports').show();
        } 
        else {
            $('#reports').show();
            $('#no-reports').hide();

            $('#numprojects').text(json.projects);
            $('#average-cost').text(json.average_cost.toFixed(2));
            $('#over-budget').text(json.over_budget);
            $('#average-client-flags').text(json.average_client_flags);
            $('#average-delayed').text(json.average_delayed.toFixed(1));
        }
    });
}

$('#stats-period').on('change', function(){
    var selected = $(this).val();
    timePeriod(selected);
});
0
Dekel 9 août 2016 à 12:13

Affichez le symbole de chargement au début de la fonction qui effectuera l'appel Ajax. Et supprimez le symbole de chargement à l'intérieur du success: de l'appel Ajax.

0
Vicente Olivert Riera 9 août 2016 à 12:08