Add Steps after start

[ghost]

Hi everyone. Great library. I love it. I have question regarding a situation I'm facing. Is it possible to add intro steps after I have called introJs().start() so I can append them to the existing queue? For example let's say that I have a Menu Component and a Main Component. The Menu Component has been rendered to the screen and the intro has started, but the Main Component has not yet been rendered. It may also have other sub components that might render after a server response. So the Main Component might need to add it's own intro steps and also after a little while, it's subcomponents might need to add their own steps to the already started queue.

Can you please advice.

Thank you,

Andreas.

[pg1671]

I would also like to be able to do this. addStep when called prior to start() seems to replace all existing steps that have been defined as data attributes .. and when calling addStep after start() it does not add the step.

I also tried calling refresh() after adding the new step.

[afshinm]

I think the easiest fix for now is exiting and starting a new tour after adding the new steps. something like: https://jsfiddle.net/8dyxtyof/2/

But the correct solution is to be able to refresh the content of helper layer (buttons, bullets, etc).

[pg1671]

Hi .. thanks will see if this works. The main use case for me is to have a tour defined on elements using the data attributes and then be able to add a final closing step that is not attached to any element in javascript (appears centered in the screen) .. calling addStep seems to clear all the steps defined on the elements via data attributes.

[afshinm]

I will work on refactoring that method into a separate method so that we can refresh the content manually.

On Sun, Oct 8, 2017 at 8:53 PM, Paul notifications@github.com wrote:

Hi .. thanks will see if this works. The main use case for me is to have a tour defined on elements using the data attributes and then be able to add a final closing step that is not attached to any element in javascript (appears centered in the screen) .. calling addStep seems to clear all the steps defined on the elements via data attributes.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/usablica/intro.js/issues/717#issuecomment-335033288, or mute the thread https://github.com/notifications/unsubscribe-auth/AATL1vzFCA8Sk3-hZlWhE-vliwOarLT6ks5sqSgtgaJpZM4N0LAQ .

[Goddak]

Hi @afshinm

Did you ever get around to completing this?

[TahaMaqbool]

This trick here helped me to jump to a dynamic step after the start.

[Fakerhardcore]

I wrote a little workaround for this problem, maybe it helps someone:

introJs.onbeforechange(function(targetElement) {
      introJs._options.steps.forEach(function (step, key) {
        if(step.element){
          introJs._introItems[key].element = document.querySelector(step.element);
          introJs._introItems[key].position = step.position ? step.position : 'bottom';
        }
      });
    });

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[AILazerka]

The solution from the @Fakerhardcore doesn't work.

In my case I have a set of predefined elements with their IDs. Some of them are loaded not in place as the request processing on the backend takes a bit more time. It will be great if IntroJS will be able to take the options config and store it with possible elements. And then at least when switching the steps it will be checking for the list of elements which were not yet loaded at the time of the intro started. When finding the case with new element exists on the UI - just take it into consideration and show one more step. Here is a question about the logical positioning of steps, but it can be resolved differently: either having default behaviour or allowing user to configure with some options like user-based order (which you already have in step field) or appending the step to the end.

It is also related to the existing closed issue #328 and also the ongoing one #1215.

Thank you in advance for any progress on that.

[afshinm]

Just released v4. You can now call refresh(true) to refresh the internal cache as well. see https://introjs.com/docs/intro/api#introjsrefresh

[AILazerka]

Well, now it perfectly refreshing the internal cache but not the UI when the intro is in progress. If for instance we were having 5 steps 5 points representing the steps are shown on the UI. When new step was identified meanwhile - it will be just put into the cache with internal cache refreshing feature but UI will not correspond to the new steps, aka 5 points will still be shown.

[AILazerka]

@afshinm, can you, please, reopen the issue back? Or should I create a new one instead?

[afshinm]

right, we need a method to re-render the elements as well.

[afshinm]

@AILazerka can you please test this PR https://github.com/usablica/intro.js/pull/1307? We also need to update the progress-bar. I will update it later but just wanted to make sure you're happy with this change.

[AILazerka]

Thank you @afshinm. Going to try that in the nearest hours.

[afshinm]

I ran some tests and I'm happy with that PR. Will merge and release 4.1 in a few mins. Please let me know if you notice any issues.

[AILazerka]

Took a bit longer to check... Confirming. Works well 🎉