How to get Tour ID in postRideCallback in joyride

Question

I am using joyride plugin for guided tours. I need to get the Tour ID (ol tag id) on which the the joyride was initiated in postRideCallback function. This function only has index and current_tip as parameter and i have no idea how to get the ID in handlePostRideCall, i have studied the library and nothing works.

HTML:

/* Each tip is set within this <ol>. */
/* This creates the order the tips are displayed */
<ol id="joyRideTipContent">
  /* data-id needs to be the same as the parent it will attach to */
  <li data-id="newHeader">Tip content...</li>

  /* This tip will be display as a modal */
  <li>Tip content...</li>

  /* using 'data-button' lets you have custom button text */
  <li data-class="parent-element-class" data-options="tipLocation:top;tipAnimation:fade" data-button="Second Button">Content...</li>

  /* you can put a class for custom styling */
  <li data-id="parentElementID" class="custom-class">Content...</li>
</ol>

JS:

<script>
    $(window).load(function() {
        $('#joyRideTipContent').joyride({
            autoStart : true,
            postStepCallback : handlePostRideCall,
            modal:true,
            expose: true
        });
    });

    function handlePostRideCall(index, tip){
        // get ol ID here
    }
</script>

Answer 1

Create a variable

var joyride_parent_id;

Then in tip_template : function (opts) { function you can get the id of the parent ol and save it in the variable we defined above

 joyride_parent_id = $(opts.li).parent().attr('id');

Now we need to pass it to the callback function which gets called when the close event fires

end : function () {
        .......
        if (settings.$li) {
          settings.postStepCallback(settings.$li.index(), settings.$current_tip);
          settings.postRideCallback(settings.$li.index(), settings.$current_tip, joyride_parent_id);
        }
        $('.joyride-modal-bg').hide();
      },