Disable form/button while select field options being updated by ajax

morpheas

Hello,

I have configured an Editor form with 2 select fields:
when a value is chosen for the first select field, the list of options for the 2nd select field is updated through an ajax call to a script.

It works perfectly.
However, there is a (short) processing time, during which it's possible for a quick user to press the create/update button of the editor form before the 2nd field is updated with adequate values.
In that case, the database is updated with erroneous values.

In order to prevent that, I'm trying to disable the form's create/update button during the processing.

I have several questions in order to achieve that, which are more javascript questions than actual questions about Database & Editor:

1) How do I retrieve the button object?
document.getElementsByClassName("btn")[0] works, but it doesn't seem a clean way to get it.
Is there a better way?

2) Where should I place the .setAttribute("disabled","disabled") and enabled calls?
I have tried various locations:
- inside the change function: in "beforeSend", in "success"
- in an "editor.on('open')" function
But I don't manage to set the attributes at the right moment with them.

Here is the ajax call done to update the second select field:

$('select', editor.field('units.IDAge').node()).change( function () {
    var val = editor.field('units.IDAge').val();

    $.ajax ({
        url: "DataTables-1.10.4/server_side/get_age.php",
        data: {IDAge: val},
        dataType: 'json',
        beforeSend: function () {
            //document.getElementsByClassName("btn")[0].setAttribute("disabled","disabled");
        },
        success: function (json) {
            editor.field('usersunits.IDUnit').update( json.refageunit );
        }
    })
    } );

3) Alternately, is there a way to disable the form itself?

Do you have any advice on how I should proceed?

allan

Excellent question - thank you for posing it. Currently, no, there is no API to access the buttons (other than the direct DOM approach as you have done).

What you could do however is use the preSubmit event:

editor.field('units.IDAge').input().change( function () {
  editor.on( 'preSubmit.tmp', function () {
    return false;
  } );

  $.ajax( {
    ...,
    success: function () {
       ...
      editor.off( 'preSubmit.tmp' );
    }
  } );
} );

There is unfortunately a catch... There is a bug in preSubmit for the main form in 1.4.0 where it can't cancel the submit. Editor 1.4.1 will be released later today with a fix for this.

That is probably the cleanest way of doing it at the moment!

Allan

morpheas

Thanks Allan, this method seems to be working!