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>
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();
},