3

JsFiddle: JsFiddle

I have a bootstrap popover window and a button to call the popover out.

My goal is: I want to have Intro.js feature to introduce:

step 1: click the button;

step 2:Here is the popover window.

Intro.js provides an option that can pre-define the steps programmically. So here's my code of introjs:

var intro2 = introJs();
  intro2.setOptions({
      exitOnOverlayClick: true,
      showBullets: false,
      //showStepNumbers: false,
      steps: [
      {
        element: document.querySelector('#saveSelection'),
        intro: "Click this button to call popover window.",
        position: 'top'
      },
      {
        element: document.querySelector('.popover.fade.top.in'),
        intro: "popover windown",
        position: 'top'
      }, 
      ],
  }).setOption('doneLabel', 'Close').start();
  });

But my problem is that while I was in the introJs layout(step1), it located the button but this time popover window wasn't called out. Then I went ahead to click the button, popover called out, then I click next on Introjs, it couldn't locate my popover window.

The reason probably is because when introJs was initialized at the first time. it has already scanned those elements in the steps I defined in intro2.setOptions, but since the popover is a dynamic element so introJs couldn't find a popover named class="popover fade top in" at the initial stage.

Same issue happened for bootstrap Modal.

Any solutions?

QIWEN HU
  • 169
  • 5
  • 17
  • Did you ever find the solution to this problem? I would also like to dynamically load the steps in intro.js – Special Character Jul 08 '16 at 16:56
  • @Brandon Roberts I used alternative solution and fixed it. Popover window doesn't generate into DOM in `document.ready()` state. So I put a button inside of popover window. So every time when it displays on the page, I click that button to call intro.js, then introjs will find where the popover window is and display correctly. – QIWEN HU Jul 08 '16 at 21:00

2 Answers2

0

If I'm not mistaken, you have the same problem as asked Event binding on dynamically created elements?

On that case you have to bind a function to the dinamic created element.

Community
  • 1
  • 1
ygorazevedo
  • 475
  • 4
  • 13
  • Okay, if this is the only way to ideally solve this issue, which is the least expectation I'd like to go with... – QIWEN HU Apr 15 '16 at 16:09
0

If anyone is still looking for a solution on google, I figured out a working solution that can be applied to other cases of attaching a step's element to dynamic objects.

On the intro object init, add the following to enable step-specific function calls before loading the step. (function creds)

intro2.onbeforechange(function(){
  if (this._introItems[this._currentStep].preChange) {
    this._introItems[this._currentStep].preChange();
  }
});

Within the popover step, use the preChange attribute to call a function and dynamically set the element and position of that step.

  {
    intro: "popover windown",
    preChange: function(){
      this.element = document.querySelector('.popover.fade.top.in');
      this.position = "top";
    }
  },

Note that the code in general will break if the popover is not active when moving onto to the popover step, so you would want to enforce/check if the popover is open before moving onto that step. Otherwise, assuming that the popover is visible in this example, it functions as expected

JSFiddle

chriskruki
  • 1