jQuery Ajax Failure Handler Called, but Form Data Posted Twice, Successfully

Question

I have a prog-enhanced form that posts (when javascript is enabled) using jQuery.

When javascript is disabled, everything works fine.

<form class="clearfix" action="https://examples.com/api/rest/members/memberidnotshownforsecurity/examples/?on_success=https://examples.com/account/examples?alerts=inserted&amp;on_failure=https://examples.com/error" method="POST" onsubmit="return false;">
    <input id="url" type="text" name="example_url" placeholder="paste a link to example it"><br>
    <button id="insertExample" type="button">create</button>
</form>

When the #insertExample button is clicked, jQuery handles the request.

<script type="text/javascript">
    $(document).ready(function() {
        var insertExampleMutex = false;
        $("#insertExample").on('click', null, function(event) {
            if ( insertExampleMutex == false ) {
                insertExampleMutex = true;
                var reference = $(this);
                var progsubmit = reference;
                var progform = progsubmit.parents('form');
                var progmethod = progform.attr('method');
                var progaction = progform.attr('action').substring( 0, progform.attr('action').indexOf('?') );
                var progdata = progform.serialize();
                var inventory = reference.parents('#core').find('#inventory');
                progsubmit.html('loading...');
                $.ajax({
                    type: progmethod,
                    url: progaction,
                    data: progdata,
                    dataType: 'json'
                }).done(function(data) {
                    if ( data.status == '1' ) {
                        inventory.prepend('<div style="cursor: pointer;" id="selectExample" href="' + "https://examples.com" + '/api/rest/members/' + data['data']['member_examples']['member_id'] + '/examples/' + data['data']['member_examples']['example_id'] + '" class="alert bgsuccess"><center><p class="psmall">A new example was created. Click to here display.</p></center></div>');
                    } else {
                        inventory.prepend('<div style="cursor: pointer;" onclick="window.location.reload();" class="alert bgfailure"><center><p class="psmall">An error occurred.</p></center></div>');
                    }
                }).fail(function() {
                    inventory.prepend('<div style="cursor: pointer;" onclick="window.location.reload();" class="alert bgfailure"><center><p class="psmall">An error occurred.</p></center></div>');
                }).always(function() {
                    progform[0].reset();
                    progsubmit.html('create');
                    inventory.children('p').remove();
                    insertExampleMutex = false;
                });
            }
        });
    });
</script>

The problem is that the .failure() request handler is triggered... even though the post is successful. The second issue is that it's not only successful once, but TWICE.

Two entries are created in the db with identical data, except for the id of course.

I've searched a bit, but found nothing conclusive.

• I'm already using a mutex variable that ignores multiple requests.

• The form is not being submitted by the browser, and javascript. Both originate from the ajax call (which seems to be impossible because of the mutex variable)

• I read that Ajax might be getting a 301, which would cause it to post again to the redirected url, but that doesn't seem to be the case.

Answer 1

In my experience, the failure handler will fire if the javascript that handles successful responses from the server fails. In other words, the server can be successful, but the error event is triggered if the client fails to handle it correctly. You can try to debug the javascript that fires on the response using chrome or firebug or something.

I have encountered double-hit issues when the $(document).ready function fires more than once. For example, if the script block you posted is in some HTML that is included more than one time, that would cause your code to be wired up more than once.

Again, you could stick a breakpoint in the document.ready function to see whats happening.