Loading Screen - I can’t get javascript to hide the "Loading." screen to work

Asked

Viewed 40 times

0

Dear friends, good afternoon.

I have this part that works well when the link is clicked:

<div class="input-group">
    <input type="text" id="txtVenda" class="form-control" />
    <span class="input-group-btn">
        <a href="javascript:void(null);" class="btn btn-primary" id="btnPesquisar" onclick="showProgress();">Pesquisar</a>
    </span>
</div>

who calls this function:

<script type="text/javascript">
    function showProgress() {
        var updateProgress = $get("<%= UpdateProgress1.ClientID %>");
        updateProgress.style.display = "block";
    }

So far so good... The problem is that after clicking the link, data is read in the comic to populate a table... and anyway, I do not know at what time, or place I will be able to call the function below:

    function hideProgress() {
        var updateProgress = $get("<%= UpdateProgress1.ClientID %>");
        updateProgress.style.display = "none";
    }
</script>

Can someone give me a hand? tks!

follows here the page that was to have the effect "Wait Loading...":

            <div class="input-group">
                <input type="text" id="txtVenda" class="form-control" />
                <span class="input-group-btn">
                    <a href="javascript:void(null);" class="btn btn-primary" id="btnPesquisar" onclick="showProgress();">Pesquisar</a>
                </span>

                <%--<a href="javascript:void(null);" class="btn btn-primary" type="button" onclick="javascript:wassamaraShow('#resultados-div');">Pesquisar</a>--%>
                <%--<a href="javascript:void(null);" runat="server" id="btnPesquisar" class="btn btn-primary" type="button" onclick="onSearch">Pesquisar</a>--%>
                <%--</span>--%>
            </div>
        </div>
    </div>

    <div id="noResult" style="display: none;">
        <hr />
        <h3>Resultados da Pesquisa</h3>
        <!-- sem resultado -->
        <div class="alert alert-warning" runat="server" visible="true">Nenhum item localizado.</div>
        <!-- sem resultado -->
    </div>
    <!-- resultados -->
    <div id="resultados" style="display: none;">
        <!-- com resultado -->
        <div>
            <table class="table table-hover" id="tableVendas" style="display: none;">
                <thead>
                    <tr class="active">
                        <th>Empreendimento</th>
                        <th>Tipo de Pagamento</th>
                        <th>Dados da Conta</th>
                        <th>Data Agendamento</th>
                        <th>Status</th>
                        <th>Valor</th>
                        <th style="text-align: right;">Ações</th>
                    </tr>
                </thead>
                <tbody id="vendaBody">

                </tbody>
            </table>

        </div>
        <!-- com resultado -->
javascript

  • Where is the call to your backend? There must be some callback from the server... this is all code involved?

  • so... I think the problem is this...he mounts a table after clicking on the link and consults the comic... what kind of callback I could implement?

  • With few details it is difficult to tell you something right, but in your callback function you should hide your loading... It is possible to post what function $get ago?

  • I’ll enter more details

  • in despair I even tried to put in the table tag the following: onload = "hideProgress();"

  • needed a hint for when the table is displayed ( ie, no longer processing data in the database), trigger this function hideProgress that will make the screen "Wait for loading" disappear.

Show 1 more comment

1 answer

0

Solved in that way:

        $('#btnPesquisar').click(function () {
            $.when(
                $.ajax({
                    method: 'GET',
                    url: '<%= ResolveUrl("LiberarBoleto.aspx/onSearch") %>',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    data: { pv: JSON.stringify($('#txtVenda').val()), imob: JSON.stringify($('#drpDownImob').val()) },
                    success: function (result) {
                        //console.log('Passo 1')
                        ////showProgress();
                        //// console.log ('Sleep')


                        //console.log('Passo 2')
                        ProcessVendas(result)

                        //console.log('Sleep')
                        sleep(1000);


                    }
                }).then(showProgress())).done(function () { hideProgress() })



        });

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.