sorich87 / bootstrap-tour

Quick and easy product tours with Twitter Bootstrap Popovers
http://bootstraptour.com
MIT License
4.44k stars 942 forks source link

Current step not working with reflex and goTo() method #625

Open anshumansahu143 opened 7 years ago

anshumansahu143 commented 7 years ago

Im trying to fetch steps with ajax calls coz I need to check some conditions based on user settings before showing next step . Im fetching next step on onShown method and returning promise in onNext() method . I defined first step and then next one's has to come up with ajax : Here is my js :

var flag  = 1;
if(typeof course_pursue_object === "undefined" ){
    var course_pursue_object = new Tour({
        name: "course_pursue",
        container: "body",
        keyboard: true,
        onShown:function(tour){
                    console.log('current_step'+tour._current);
                        if(tour._options.steps.length <= (tour._current+1)){
                            if(jQuery('body').find(tour._options.steps[tour._current].element).length > 0){
                                jQuery('body').find(tour._options.steps[tour._current].element).addClass('disabled');

                            }
                            return promisetype = jQuery.ajax({
                                type: "POST",
                                dataType:'json',
                                url: ajaxurl,
                                data: { action: 'tour_next_step', 
                                        tour:tour._options.name,
                                        step:tour._current
                                    },
                              cache: false,
                              success: function (step) {
                                if(step){
                                    tour.addStep(step);
                                    tour.goTo(tour._current);
                                    jQuery('body').find(tour._options.steps[tour._current].element).removeClass('disabled');
                                }
                                 //tour.goTo(tour._current);
                              }
                            }).done();
                        }
                    },
                    onNext: function(tour){

                        var step_resolved  = new Promise(function(resolve){

                            if(tour._current+1 > tour._options.steps.length)
                                return;

                            tour.goTo(tour._current+1);
                            //tour.setCurrentStep(tour._current+1);
                            console.log((tour._current+1));

                            if(jQuery('body').find(tour._options.steps[(tour._current)].element).length > 0){
                                console.log('#3');
                                resolve(tour);
                            }
                        });

                        return step_resolved;
                    }
                    ,

        steps:[
            {
                    "element":".unit_prevnext .col-md-6 .unit_button:first",
                    "title":"Course introduction page",
                    "content":"Read the instructions and start the course",
                    "backdrop":true,
                    "backdropContainer":".unit_prevnext:first",
                    "smartPlacement":null,
                    "ajax":false,
                    'reflex':true,
                    "path":"\/wplms\/course-status\/",
                    "placement":"top",
                    "delay":false,
                    "backdropPadding":15,
            },      
    ],
        onEnd: function (tour) {
            end_tour_wplms("course_pursue");
        },
    });
    course_pursue_object.init();
    course_pursue_object.start(); 
}
setInterval(function(){ 
    if(jQuery.active == 0){
        if(flag){
            jQuery('body').removeClass('disable_wplms_tour_popup');
            jQuery(window).trigger("resize");
            flag=0;
        }
    }else{
        jQuery('body').addClass('disable_wplms_tour_popup');

        flag=1;
    }
}, 500);

Now problem im facing here after step 2 is executed it shows step 2 again .It does not increment to step 3 and all of this happen when Im using reflex .In case of "reflex " it is executing next step quickly and does not wait for anything . Even when Im returning promise to it in onNext method . In onShown method it is not returning correct step and is showing step 1 even on step 2 . (staring from step based on tour object in which steps start from 0) . What could be wrong with current step in onShown method ? Also can you please suggest other ways on how to get step and add it in tour and also enable the next button with reflex mode on .

IGreatlyDislikeJavascript commented 5 years ago

https://github.com/sorich87/bootstrap-tour/issues/709