Capture more than one click from a button

Question

Capture more than one click from a button

Navigation

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

0

I have the following code.

This is the HTML code.

<form action="" method="post">            
        <div class="row">
            <article class="col-lg-9 col-md-9 col-sm-9 aboutBox">
                <div class="form-group">
                    <div class="form-div-2 clearfix col-lg-3">
                        <h7><b>Contraseña </b></h7>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input type="password" class="form-control" name="tx_Kzk2NUQtQyxWODYtQyxWJGAKYAo=" id="id-psw" placeholder="Contraseña"  maxlength="100" autofocus   > 
                            <input type="hidden" class="form-control" name="hd_index_objElement" id="id-hd-index"  value="tx_Kzk2NUQtQyxWODYtQyxWJGAKYAo=,tx_Kzk2OUI4MzhULTMlQS1DJGAKYAo=" maxlength="100" autofocus   > 
                        </div>
                    </div>
                    <div class="form-div-1 clearfix col-lg-3">
                        <h7><b>Re Contraseña </b></h7>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input type="password" class="form-control" name="tx_Kzk2OUI4MzhULTMlQS1DJGAKYAo=" id="id-repsw" placeholder="Re Contraseña"  maxlength="100" autofocus   > 
                        </div>
                    </div>
                    <div class="form-div-1 clearfix col-lg-2">
                        <h7><b>&nbsp;</b></h7>
                        <div id="generar">
                            <input type="button" class="btn btn-primary btn-generar" name="btn-generar" id="id-btn-generar" value="Generar" />
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </form>

<script>
    $(document).ready(function () {
        $("#id-btn-generar").on('click', function (e) {
            $.ajax({
                url: "/admin/jq/get-jq-pswd-generar.html/",
                dataType: 'JSON',
                async: false,
                success: function (data) {
                    $("#generar").html(data['html']);
                    $("#id-psw").val(data['psw']);
                    $("#id-repsw").val(data['psw']);
                }
            });
        });
    });
</script>

The problem is that after the 1st click, the event is no longer captured. Doing tests I remove the ajax code where I execute the script that returns the generated password. I do not understand how just loading that script disables the capture of the event.

Some help.

Greetings.

jquery php ajax

asked by a.xcibo 19.07.2018 в 19:16

source

2 answers

1

The problem is not the event, but the ajax is called Synchronically (that is, it will wait until the request is finished).

If you want to send multiple requests (asynchronously) with the click you must change.

async: false,

for

async: true,

With which you can make the clicks you want

answered by 19.07.2018 в 19:23

How to collect data in a form with ASP .NET Webforms? Read a .json from python

score 1 · Accepted Answer

It is already solved. Note that once the first click was launched, the Element of the DOM was reloaded from the php script. Change the js in the following way:

<script>
$(document).ready(function () {
    $(document).on('click', '#id-btn-generar', function (e) {
        $.ajax({
            url: "/admin/jq/get-jq-pswd-generar.html/",
            dataType: 'JSON',
            success: function (data) {
                $("#generar").html(data['html']);
                $("#id-psw").val(data['psw']);
                $("#id-repsw").val(data['psw']);
            }
        });
    });
});
</script>