Refresh the tooltip list with ajax loaded pages (AngularJS)

[tristanfrn]

Hi,

I'm loading ajax pages with the tooltip lists (ol > li), it works well for the first page, but if I change page it's always the first tooltip list that is displayed.

To detail, this script is called when the user clicks on the help button :

function() { $("#helpme").joyride({ 'tipLocation': 'top' }); $("#helpme").joyride(); };

and there is a different <ol id="helpme"> on each page, but only the first is displayed, and is not overwrited by the others #helpme.

I am using AngularJS.

Any idea ?

[amit-coditas]

were you able to solve this?

[Chilo92]

I am having the exact problem were you able to solve?

[PaoloFalomo]

I think that happens because u loading it on document ready. You should try to wrap it in a function (and adding the (document).find() )like this:

function loadJoyride() { 
   $(document).find("#helpme").joyride({ 
      'tipLocation': 'top' 
   }); 
}

Then on .done() callback of your ajax request execute it each time.

Let me know if this fixes - i hope i have understood the issue 👍

[Chilo92]

I dont load joyride on document ready. I load joyride on a help button click. I have had a look at some of the other issues listed and i have found a solution here https://github.com/zurb/joyride/issues/82 As shown in the comments i simply just added $('#my-id').joyride('destroy'); when the page loads. So when my button is clicked it generates the new tips hope it helps you.

[PaoloFalomo]

Hey @tfarneau i confirm that the solution purposed by @Chilo92 it works.

I've done a jsfiddle for you. here's my updated function with that lifesaver line !

  function loadJoyride() {
    $(document).find("#helpme").joyride('destroy'); //this is the lifesaver line
    $(document).find("#helpme").joyride({
      'tipLocation': 'top',
      autoStart: true
    });
  }