dependent fields updating correctly, but not registering when updating form

dan@19ideas.com

I am using the dependency() editor field, which makes an ajax call to the server as follows:

  _editor.dependent('FieldA', function (val, data, callback) {
      $.ajax({
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        url: '/api/CondField/FieldARefs',
        type: 'GET',
        datatype: 'JSON',
        data: {
          val: val
        },
        success: function (json) {
          //update FieldB
          var retVal = JSON.parse(json);
          callback(retVal);
        }
      });
  });

This successfully returns back the data for FieldB and updates it accordingly when I press the TAB button, or lose focus of FieldA. Then when I hit the UPDATE button, the form closes, and the record on the table shows FieldA and FieldB with the new values.

However, if I edit FieldA, and I go straight to the UPDATE button (without tabbing), I see the FieldB update to the new value before the form closes, but when I see record on the table, it shows FieldA with the new value, but FieldB has the old value.

Here's what happens.. when you click the UPDATE button, the dependency field function executes the ajax, and on success, it updates the fields, but before the editor updates whatever internal structure with the new values, the UPDATE button gets triggered, which then submits the data to the server with the new Pout value and the older values that were supposed to be updated. So is there a way to ensure that when the success callback of the dependency fields is finished, to then make the UPDATE to the editor? Because right now I have competing conditions.

allan

I think what you might need to do here is use preSubmit to cancel the submission:

var ajaxing = false;

_editor.dependent('FieldA', function (val, data, callback) {
    ajaxing = true;

    $.ajax({
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      url: '/api/CondField/FieldARefs',
      type: 'GET',
      datatype: 'JSON',
      data: {
        val: val
      },
      success: function (json) {
        //update FieldB
        var retVal = JSON.parse(json);
        callback(retVal);
        ajaxing = false;
      }
    });
});

_editor.on('preSubmit', function () {
  if ( ajaxing ) {
    _editor.field('FieldA').message('Submit again please');
    return false; // cancel submission
  }
} );

What would be neat would be to have it automatically submit in the success Ajax callback if preSubmit had been executed. I'll leave that as an exerise for you .

Allan

dan@19ideas.com

Hi Allan,

I'm trying to have a visual of what happens to the pop up editor using the posted logic you're providing.

Wouldn't this force the user to press the UPDATE button twice, if the user intended to edit the textbox, and went straight to the UPDATE button? Since ajaxing is set to true, on preSubmit, it will always be true, when the user does that.

Personally, I prefer not allowing users to UPDATE yet, because I do want them to see the related fields change, but some of my users want immediately update the text, and see the changes on the table after the update.

Also, if I went to through the automatic submission in the success of the ajax callback, would the pop up disappear if I "TAB" out?

dan@19ideas.com

Wait.. I think I understand.. you want me to prevent the preSubmit, which fires off before the "success" callback. Then on "success", to then submit it. I just realized the preSubmit is the first thing that gets fired, then the success callback gets called. Heh.

This will solve it, but the problem is, then I lose the "TAB" functionality, which I don't want the data to submit if the user tabs out or loses focus.

dan@19ideas.com

TAB and losing focus of the field works:

_editor.dependent('FieldA', function (val, data, callback) {
    ajaxing = true;

    $.ajax({
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      url: '/api/CondField/FieldARefs',
      type: 'GET',
      datatype: 'JSON',
      data: {
        val: val
      },
      success: function (json) {
        //update FieldB
        var retVal = JSON.parse(json);
        _editor.field('FieldB').set(retVal.values.FieldB);
                    _editor.submit();
        ajaxing = false;
      }
    });
});

Now I have to press UPDATE twice. No way around this right? Unless there's some way for the dependent field to capture the event that triggered it.. then I could just change the ajaxing variable on the fly.

allan

Wouldn't this force the user to press the UPDATE button twice

With my code above - yes. Noted you can detect that and then submit it with the API.

Set a flag in the preSubmit event handler to know that a submit was cancelled (instead of setting the message), and then when ajaxing is set back to false check if your flag was set. If it was, call submit().

Allan