swisnl / jQuery-contextMenu

jQuery contextMenu plugin & polyfill
https://swisnl.github.io/jQuery-contextMenu/
MIT License
2.24k stars 744 forks source link

setInputValues in submenu #654

Open GiselleSerate opened 6 years ago

GiselleSerate commented 6 years ago

If I want to set the checkedness of a radio button that's in a submenu, the general events show and hide for the entire context menu doesn't seem to be able to set the data. I've also tried using getInputValues() to get the values once I've checked one of the radio buttons, but it's returning a blank object as well. What's the best way to do this?

It would be less nice, but is there a way of using each radio button's events to get the variable on show? What about checking on showing the submenu? (I tried using events > show for both of these, but perhaps I didn't do it properly.)

The structure of my context menu is replicated below. Thank you in advance.

// Context menu for other platforms.
$.contextMenu({
  selector: '#mySelector',
  callback: function(key) {
    myCallback();
  },
  items: {
    item1: {
      name: "Item 1"
    },
    hasSubItems: { 
      name: "Has SubItems",
      items: {
        rad0: {
          name: "Rad0",
          type: "radio",
          radio: "myRadio",
          events: {
            change: function(e) {
              console.log('changed 0');
            },
            show: function(e) {
              console.log('Not helpful');
            }
          }
        },
        rad1: {
          name: "Rad1",
          type: "radio",
          radio: "myRadio",
          events: {
            change: function(e) {
              console.log('changed 1');
            },
          }
        }
      },
      events: {
        show: function(opt) {
          console.log(opt);
          console.log('This function also never runs');
        }
      }
    },
  },
  events: {
    show: function(opt) {
      console.log(opt);
      var data = {};
      if(externalVar == 1) {
        data = {rad1: true};
      }
      else {
        data = {rad0: true};
      }
      console.log('Setting values.');
      console.log(data);
      $.contextMenu.setInputValues(opt, data);
    }, 
    hide: function(opt) {
      console.log('Getting values.');
      var data = {};
      $.contextMenu.getInputValues(opt, data);
      console.log(data);
    }, 
  }
});
GiselleSerate commented 6 years ago

I figured out that I can manually set the checkedness of each radio button with opt.inputs.rad0.selected = true in the show function for the entire context menu, but I would imagine that the setInputValues function should still work? I'm not sure if I'm missing something major here.

achilleus68 commented 6 years ago

Maybe related, maybe not Check out these fiddles

https://jsfiddle.net/xba5u4kf/ This one has NO events defined, and here the checkbox ('Boolean') and radiobutton ('Radio2') are selected as defined Changing the state of a checkbox or radiobutton has NO effect, after closing and opening the contextmenu, the default state is restored

https://jsfiddle.net/xpvt214o/659394/ This is the same set up, however WITH events defined. Now the checkbox ('Boolean') and radiobutton ('Radio2') AREN'T selected, although defined Changing the state of a checkbox or radiobutton HAS effect, after closing and opening the contextmenu, the changed state is maintained

achilleus68 commented 6 years ago

We were able to solve above issue by saving the state of the data, see https://jsfiddle.net/jm89vft5/