Can I dynamically change field options before calling the bubble editor?

Can I dynamically change field options before calling the bubble editor?

seiser01seiser01 Posts: 17Questions: 9Answers: 0

I have a table that opens a bubble editor when the user clicks on a cell contained in specific columns.

Currently, the bubble editor opens with a single radio button field listing options that were specified during the initialization of the field.

I would like to dynamically modify the options based on other data contained in the same row. Is it possible to do this?

I thought that perhaps I could modify the field when the user clicked upon the cell before calling bubble editor but I'm not sure how to positively identify the row_id. Is there a way to do this?

Current Bubble Editor

**Initialization **

                                                    aoObsEditorFields.push( 
                            {
                            label: "Observation Value " + (col + 1),
                            name: "OBSVALUE" + (col + 1),
                            group: "NONE",
                            type:  "radio",
                                options: [
                                    { label: "Much less than expected (-2)", value: "-2" },
                                    { label: "Less than expected (-1)", value: "-1" },
                                    { label: "Expected outcome level (0)", value: "0" },
                                    { label: "Better than expected (+1)", value: "1" },
                                    { label: "Much better than expected (+2)", value: "2" }

                                 ]
                           });  

Click Event
// Activate an bubble edit on click of a table cell

$('#tblEditGoalObs').on( 'click', 'tbody td', function (e) {

      // This section captures the name of the field associated with the cell that the user clicked on
      //  This is used when edit results are returned to the "edit" ajax function to ensure the correct value is updated

      obs_editor.one( 'initEdit', function ( e, node, data, items, type ) {
        obs_editor.one('open', function () {
          obs_editor.displayed().forEach(function(a) {
            obs_editor.editFieldName = a;   // Set the field name in the editor object for later retrieval

          });
        } );   

          } );   

    if (this.className.match(/pros-obs-value/i)== "pros-obs-value") {

  // This is the location in which I would like dynamically reset the labels that were originally set during initialization
  //  The values of the new labels are contained in hidden collumns of the same row of the table 

        obs_editor.bubble( this, {
            submit: 'changed',
            buttons: { label: '<b>Save</b>', fn: function () { 
                    this.submit(); 
                } 
            }
        }  );

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,213Questions: 1Answers: 10,415 Site admin
    Answer ✓

    but I'm not sure how to positively identify the row_id. Is there a way to do this?

    row().data() will give you the row’s data, so you can base any changes you need off that.

    You can change somethings about the field dynamically, e.g. the field().update() method can be used to change the options. But you also can’t change some other aspects - such as the field name. If you wanted to do that, you’d need to use add() to create a new field (and clear() to remove the old one).

    Allan

  • seiser01seiser01 Posts: 17Questions: 9Answers: 0

    Yup, that works.

    Thanks Allan

This discussion has been closed.