Formbuilder elements not scoped properly (multiple on one page)

[fazman]

It seems that when I initiate multiple formbuilders in one document, only the tabs (Add new field / Edit Field) for the first formbuilder works.

[ajb]

Thanks for opening. Not sure if I can provide an ETA on a fix, but I can confirm that this is definitely a bug :)

[fazman]

Made a hack to fix this. You simply need to edit two lines in the formbuilder.js

BuilderView.prototype.showTab = function(e) {
  var $el, first_model, target;
  $el = $(e.currentTarget);
  target = $el.data('target');
  $el.closest('li').addClass('active').siblings('li').removeClass('active');
  pr = $(e.delegateTarget); //obtain parent id //add this
  $("#"+pr.context.id+" "+target).addClass('active').siblings('.fb-tabpane').removeClass('active'); //edit this
  if (target !== '#editField') {
    this.unlockLeftWrapper();
  }
  if (target === '#editField' && !this.editView && (first_model = this.collection.models[0])) {
    return this.createAndShowEditView(first_model);
  }
};

Hope this helps.

[TarasHots]

fazman's fix is really helpful. As we both had noticed, this bug due to duplicate CSS identifiers(in case 2 or even more formbuilders on the same page). Maybe this can help you, ajb, to fix this bug. Or, maybe it's a Sizzle's problem.

[ajb]

Sorry for the delay, just posted a status update to the README: https://github.com/dobtco/formbuilder/commit/684a190ce6a37f57b50d81fe9beac068e3b8fc97

[spry-rproud]

Any update on when a solution for this might be available. Tried fazman's workaround, but it doesn't seem to work with unique http endpoints.