asp.net - Prevent consecutive button clicks

Question

asp.net - Prevent consecutive button clicks

Navigation

#1 by (1 votes)
#2 by (0 votes)

3

Good afternoon.

I have an asp.net webform application, and am having the following problem.

In a certain part of the system, the customer has two buttons to navigate between editions of a magazine, going to the next and previous. This works correctly, but sometimes the client clicks multiple times simultaneously until they get to the edition they want, instead of waiting to load one by one.

However, when it does this, every click it gives is called the event contained in the button click, and it is a time-consuming event, with database queries and multiple indexing.

I wanted to know if you have a way to prevent this from happening. From the client you can click several times fast until you get the edition you want, and then call the button event.

button:

<asp:Button ID="btnProximaEdicao" runat="server" onclick="btnProximaEdicao_Click" OnClientClick="return mudarEdicao('proxima');" Text="Próxima" Height="34px"/>

JS:

function mudarEdicao(acao) {
        if (!verificarColunas())
            return false;
        else {

            var filtro = $('select[name$="LstFiltros"]').find('option');

            $.each(filtro, function (key, value) {
                var coluna = $(value).val();
                if (coluna.indexOf('Edição') >= 0) {
                    var edicao = coluna.substr(7);
                    var proxEdicao;
                    if (acao == "anterior")
                        proxEdicao = parseInt(edicao) - 1;
                    else
                        proxEdicao = parseInt(edicao) + 1;

                    $('select[name$="LstFiltros"]').find('option[value^="Edição"]').val("Edição:" + proxEdicao);
                    $('select[name$="LstFiltros"]').find('option[value^="Edição"]').text("Edição:" + proxEdicao);
                }
            });
        }
        return true;
    }

Codebehind:

protected void btnProximaEdicao_Click(object sender, EventArgs e)
{
    for (var i = 0; i < LstFiltros.Items.Count; i++)
    {
        if (LstFiltros.Items[i].Text.Contains("Edição:"))
        {
            string edicao = LstFiltros.Items[i].Text.Substring(7);

            int proxEdicao = Convert.ToInt32(edicao) + 1;

            LstFiltros.Items.Remove(LstFiltros.Items[i].Text);

            ((List<DocumentoCamposDTO>)this.getParameter("CAMPOS_PESQUISA")).RemoveAll(p => p.TipoIndexacaoCampo.GUID.Equals(Functions.ConvertToGuid(LstGuidCampos.Items[i].Text)));

            LstFiltros.Items.Add("Edição:" + proxEdicao);

            InsereFiltrosPesquisa();
        }
    }

    preencherGridPesquisa();
}

Thank you very much.

c# asp.net

asked by anonymous 23.10.2015 / 21:31

2 answers

0

I was able to solve the problem, thank you very much.

After all, the first suggestion was the basis for me to solve, it just was not working because I was putting it in the wrong place.

I just can not block the button because it stops working, but I used the variable to indicate that I already clicked, so on the back of post zero the variable.

19.11.2015 / 17:32

Avoid button click effect without affecting other links What is the best way to reuse codes between modules

score 1 · Accepted Answer

You can disable the btnProximaEdicao button at the time of the click;

var btnProximaEdicao = document.querySelector('[id$="btnProximaEdicao"]');

function mudarEdicao(acao) {
    if (!verificarColunas())
        return false;
    else {
        btnProximaEdicao.disabled = true; //desativando o btnProximaEdicao
        ... // o resto do escrito permanece como estava.
    }
    return true;
}

If you are using an UpdatePanel, you need to disable btnProximaEdicao when the AJAX request starts, and re-enable it when it finishes, using the following script:

var btnProximaEdicao = document.querySelector('[id$="btnProximaEdicao"]');
var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
pageRequestManager.add_initializeRequest(InitializeRequest);
pageRequestManager.add_endRequest(EndRequest);

function InitializeRequest(sender, args) {
    btnProximaEdicao.disabled = true; //desativando o btnProximaEdicao
}
function EndRequest(sender, args) {
    btnProximaEdicao.disabled = true; //ativando o btnProximaEdicao
}