How to handle steps that are not rendered on tour start?

[jduprey]

I have steps that will not be part of the DOM on tour start. For example, content (w/ tour-steps) rendered as the results of an async service call, modals that are displayed on next step. How can I get bs tour to re-check for these steps?

Thank you.

[benmarch]

Hey @jduprey, the steps should automatically be added to the tour once they are linked. Are you experiencing different behavior?

[jduprey]

Yes.:

Here is the step before the modal dialog is opened. This step asked them to click a button. Reflex=true should have it advance to the next step, even when I remove it the current step's "next" button is disabled.

Step prior to dialog box:

<div class="col-md-1 grokker-series-add" uib-tooltip="{{!isLoggedIn() ? 'Please Log In to' : ''}} Load or Begin New Series" tooltip-placement="top" >
  <span class="btn" ng-click="addSeries()" ng-disabled="!isLoggedIn()"><a class="bento-icon-add"
                                                                          tour-step="series-button" bs-tour-reflex="true" bs-tour-order="100" bs-tour-placement="bottom" bs-tour-content='Click the new Series button to define a new group of queries.'></a></span>
</div>

on click of the "serried-button", addSeries() opens the modal

$scope.addSeries = function () {

        var modalInstance = $uibModal.open({
          animation  : true,
          templateUrl: 'app/views/partials/page/series-crud.html',
          controller : 'AddSeriesCtrl',
          scope      : $scope,
          size       : 'lg',
          resolve    : {
            contentTypes : function () {
              return ContentType.query();
            },
            seriesForUser: function () {
              return Series.query({'uid': Auth.getCurrentUser()._id});
            }
          }
        });

and w/in series-crud.html:

<div class="panel-default">
  <div class="panel-heading series-panel-heading"
  tour-step="series-dialog" bs-tour-order="110" bs-tour-placement="top" bs-tour-content='Define your series!.'>Series Options</div>
  <div class="panel-body wrapper-add-series-panel-body">

[benmarch]

Ok it looks like there are two issues: the first is that the current step does not know about the next step when it is shown, so the "Next" button is disabled; and the second is that the navigation is happening before the next step loads. To fix both issues, try setting the "nextPath" and "nextStep" options on the tour step. Set the "nextPath" to the current Angular $location path (or "/" if you aren't using Angular router) and the "nextStep" to the name of the tour step in the modal. What this will do is tell the tour that there is another step, but it is not yet available, and then the tour will wait for that particular step to load before navigating to it.

I also noticed that you are using UI Bootstrap in your application. I highly recommend that you switch over to using Angular UI Tour instead of Angular Bootstrap Tour as it resolves many of the issues found in this library, and I expect to support it much longer.

[jduprey]

Yes. I came across "Angular UI Tour" yesterday when I was looking for a solution. Thank you.

[eliseguimaraes]

@benmarch I did the next path + next step on angular-ui-tour, but the "next" button is still hidden. I left 'tour-step-next-path=""', otherwise it would redirect me to a wrong page, and 'tour-ste-next-step="User data"', which is the title of the step inside the modal.