Question

I am validating an objects “name” to ensure it is unique. To perform this I am using the jQuery bassisstance validation plugin. I issue a SYNCHRONOUS ajax call during the validation method to verify uniqueness as follows

jQuery.validator.addMethod("new_user_role_name_unique", function(value) {
    var role_name_valid = true;
    jQuery.ajax(
    {
        type: "GET",
        async: false,
        data: "name=" + encodeURIComponent(value),
        url: '/user_roles/0/name_taken',
        success: function (result) {
            var taken = JSON.parse(result);
            role_name_valid = !taken
        }
    });
    return role_name_valid;
}, I18n.t('user_role_name_already_used'));

When I type a name in the “name” text field and then immediately click on the submit button defined below, I would expect the method addUserRole to be called:

      <button id='user_role_add_button' class='rounded green' type='button' onclick="addUserRole()" name='add' value='add'>
         <span><%= t(:user_role_add_button) %></span>
      </button>

However, the method addUserRole is not called. If I type a “name” however and then lose focus on the name text field, prior to clicking the button the method is called with no drama.

So in essence, my problem is when the name textfield has focus, I have to double click the save button to ensure addUserRole method is called.

Does anyone know why my click event seems to be lost on the first click under these circumstances, but not the second? I cant have the user double click on the button to save.

Answer 1

Synchronous ajax calls block UI events and you may lose some events when doing that. It would be much better to use an async ajax call and let the user events happen in real-time.

Without the actual relevant HTML from your page and all participating event handlers, it’s hard to follow the sequence you are describing to offer more info.