Ajax，DOM和submit =页面刷新

Question

I've have checked similar questions, do a lot of research, ask several people during 2 months but I still have a problem, I sometimes (not always, and I cant reproduce) get a page refresh when submitting the DOM form here in action Here you also have the link for the text website at the bottom. After clicking it should go to the payment gateway, not refreshing.

So in other posts I saw that it's a good idea to put e.preventDefault() and return false which I did, to avoid form refreshing, but I still get a refresh! Any idea what else to try? Did I do something wrong?

I think is something to do with the DOM, submit or ajax.

Non sense.. any tip of what should I do. And why is just to 10% of the users (with different explorers)

The first ajax output which it's read by the below code:

  'action' => 1,
  'url' => 'https://sis.redsys.es/sis/realizarPago',

$('#form-payment').submit(function(e) { e.preventDefault();

        var data = $('#form-payment').serialize();

        $.ajax({
            url: "{{ url('/pago') }}",
            data: data,
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            method: 'POST',
            timeout: 20000, // sets timeout to 5000 = 5 seconds
            retryCount: 0, // start retry count
            retryLimit: 1, //will let you retry a determined number of times
            beforeSend: function(data) {
                console.log(data);
            },
            success: function(data) {
                console.log(data);
                if (data.action == 1) {

                    //delete if the form it's already there
                    $('#TDCform').remove();

                    var form = $('<form id ="TDCform" action="' + data.url + '" method="post">' +
                        '<input type="hidden" name="Ds_MerchantParameters" value="' + data.params + '" />' +
                        '</form>');

                    $('#form-payment').after(form);

                    $('#TDCform').submit();
                    //$('#form-payment').off();
                } else {

                    var errorString = 'There's and error.';
                    (".taberrors").html(errorString).fadeIn(2000);
                    $('html, body').animate({
                        scrollTop: $('.taberrors:visible').offset().top - 100
                    }, 1000);

                }
            },
        });

        return false;
    });

Answer 1

Solution 1

Change this:

$('#form-payment').submit(function(e) { e.preventDefault();

To this:

$('#form-payment').on('submit', function(e) { e.preventDefault();

This have solved my similar problem with click event..

I've changed this:

$('#update').click(function(e) {

To this:

$('#update').on('click', function(e) {

And this have solved my problems

Solution 2

Add the code into this:

document.addEventListener("DOMContentLoaded", function(event) { 
    //INSERT CODE HERE
});