use intro.js on bootstrap dropdown element

Question

I cannot figure out how to use intro.js on dropdown elements.

I found a similar question with no answer there: IntroJS Bootstrap Menu doesnt work

If you want to reproduce the error, follow these steps:

http://recherche.utilitaire.melard.fr/#/carto

You have to click on "Aide" (The green button on the top right), the problem occurs for the second step. on the change event, I do:

$scope.ChangeEvent = function (e) {      if (e.id === 'step2') {         document.getElementById('step1').click();     }      console.log("Change Event called");  }; 

When debugging, everything is working like a charm until that function end: _showElement After that, I get lost in JQuery events, and the dropdown is closed...

If you want to reproduce, just add a breakpoint at the end of the _showElement function and you will understand what I mean...

Answer 1

Here a clearer solution

 function startIntro(){     var intro = introJs();       intro.setOptions({         steps: [           {             element: "#mydropdown",             intro: "This is a dropdown"           },           {             element: '#mydropdownoption',             intro: "This is an option within a dropdown.",             position: 'bottom'           },          ]       });        intro.onbeforechange(function(element) {         if (this._currentStep === 1) {           setTimeout(function() {             $("#mydropdown").addClass("open");           });         }       });       intro.start();   };    $(document).ready(function() {     setTimeout(startIntro,1500);   }); 

Note the setTimeout with no second argument (milliseconds) allows you to queue the function on event loop and run it after all events were processed (including the click closing the dropdown), also, it is better to add the class open to the dropdown if you want to set it to open state

Answer 2

In your template i.e. in

/views/nav/body-create.html

You have a code where ng-disabled is based on !currentPath.name. And the value of currentPath.name is null. Try inspecting the value on the following element. You will see that it is null.

<button class="dropdown-toggle btn btn-sm btn-default no-radius" ng-disabled="!currentPath.name">                 Niveau{{currentPath.level?": "+currentPath.level:""}} <strong><b class="caret"></b>                                                           </strong> </button> 

Make sure you have proper name or use different condition - I am not sure what you are trying to do with the condition.

Proof: Inspect the above element in chrome debugger at your recherche.utilitaire.melard.fr/#/carto link. Type the following in console and hit enter.

$scope.currentPath.name='Hello You'; 

And your "Niveau" menu starts working.