Question

So I have a function called submitEdit():

function submitEdit() {
    //var ffield = document.getElementById("form_eline");
    //ffield.submit();
    jQuery('#edit_line').css('visibility', 'hidden');

    var fieldName = jQuery('#form_eline input[name=efield]').val();
    var pageId = jQuery('#form_eline input[name=eid]').val();
    var fieldText = jQuery('#ve'+fieldName+'_'+pageId);
    var editBtn = fieldText.prev();
    var loading = document.createElement("img");
    loading.src = 'http://www.lookall.tv/html/res/img/loading.gif';
    loading.id = "loading";
    loading.width = 16;
    loading.height = 16;

    jQuery('#form_eline').ajaxSubmit({
        beforeSubmit: function() {
            editBtn.hide();
            fieldText.prepend(loading);
        },
        error: function(data) {
            jQuery('#edit_line').css('visibility', 'visible');
        },
        success: function(response) {
            fieldText.text(jQuery('#form_eline :text').fieldValue()[0]);
            editBtn.show();
            jQuery('img#loading').remove();

            return true;
        }
    });
}

Sadly this isn’t my work and I’m building on an already existing website. So the problem is that the server is slow to respond. Therefor in those few seconds it takes the server to send a response someone could edit another field thus overwriting the current values. Is there some way to instantiate the variables so they don’t overwrite?

Answer 1

The variables won’t be affected if the user will change the values of the HTML elements.

If you want the user to know the changes he will do won’t affect because the request ha been sent already. just disable the elements.

beforeSubmit: function() {
            editBtn.hide();
            fieldText.prepend(loading);
            $('#form_eline input, select, textarea').prop('disabled', true);
        },
complete: function (){
            editBtn.show();
            $('#form_eline input, select, textarea').prop('disabled', false);
        }