AnsweredAssumed Answered

Relate field not setting properly with backbone 7.6.0

Question asked by jclark@enhanced.co.uk on Oct 22, 2015
Latest reply on Nov 12, 2015 by jclark@enhanced.co.uk
I have two relate fields, the second should update based on the first.



I'm using JS to listen to the change event on the first, doing some api calls, and then inserting the name of the related field into the second box.  The problem is when I come to save it, it doesn't save!

Here's my code:

/custom/modules/[module]/clients/base/views/create-actions.js

({      // CustomCreate-actions View (base)         extendsFrom: 'RecordView',         /**       * Some extra functionality       */      initialize: function (options) {          this._super('initialize', [options]);          this.on('render', function () {              //render fires twice. The first time, the model is not completely              //populated. The second time it is which means that we can check              //for the attribute to be available before we set the handler              if (this.model.get('enh_so_pricematrix_c')) {                  this.model.on('change:enh_so_pricematrix_c', this.soClickHandler, this);              }          }, this);      },        _renderHtml: function(ctx, options) {          this._super('_renderHtml', [ctx, options]);      },         _dispose: function() {          //additional stuff before calling the core create _dispose goes here          this._super('_dispose');      },        soClickHandler: function() {          //get the value (which will be the name) of the SO Price Matrix drop down.          var sodropdown = this.model.get('enh_so_pricematrix_c');          var arg = '/price_pricematrix?filter[0][name][$equals]='+sodropdown;          var _this = this;          app.api.call('GET', app.api.buildURL(arg), null,           {               success: function (data) {                 if(data.records.length == 1) {                      //have lookup up the price matrix, so fill in the value for sales order price.                      if(data.records[0].enh_price_c > 0) {                           _this.model.set('enh_price_c', data.records[0].enh_price_c);                      }                      //call to the price matrix, but filter by the account id and product id, which should give us our price matrix                      var product_id = data.records[0].producttemplates_price_pricematrix_1producttemplates_ida;                      var arg = 'price_pricematrix?filter[0][producttemplates_price_pricematrix_1producttemplates_ida]='+product_id+'&filter[0][accounts_price_pricematrix_1accounts_ida]='+data.records[0].account_id_c;                      app.api.call('GET', app.api.buildURL(arg), null,                       {                           success: function(data) {                                if(data.records.length == 1) {                                     //now we should have the price matrix object of the purchase order, just fill in the name.                                     _this.model.set('enh_po_pricematrix_c', data.records[0].name);                                     $('[name="enh_po_pricematrix_c"]').data('id',data.records[0].id);                                     _this.model.set('enh_po_price_c', data.records[0].enh_po_price_c);                                }                           },                           error: function(XMLHttpRequest, textStatus, errorThrown) {                                console.log("Status: " + textStatus); console.log("Error: " + errorThrown);                            },                      });                  }              },              error: function(XMLHttpRequest, textStatus, errorThrown) {                   console.log("Status: " + textStatus); console.log("Error: " + errorThrown);               },          });      },  })

The important line is where the backbone is trying to set the second relate field:

_this.model.set('enh_po_pricematrix_c', data.records[0].name);

I noticed that in the HTML there is a hidden input to the relate field

<input type="hidden" name="enh_po_pricematrix_c" class="select2 inherit-width select2-offscreen" value="A.G. Parr PLC - Tyrone Gadget" data-id="" tabindex="-1" title="" aria-label="Purchase Order Price Matrix">  
The data-id field gets filled out with the id of the price matrix modulein the top box, but not the bottom box, hence my (somewhat hacky) attempt at updating this manually by doing:

$('[name="enh_po_pricematrix_c"]').data('id',data.records[0].id);

But this doesn't seem to "stick" to the element.  I seem to remember this working in the old 7.5 version, but can't say this for sure.  Any ideas?

Here's what happens when you click the first box if it helps: http://cl.ly/image/052E2N0O071R

Outcomes