Jquery PageWalkthrough Multiple Walk-through's on Same Page

Question

I'm working on an interactive training course and due to the number of subjects covered in the training course, I'm trying to break up the monotony and insert some "walk-through's" to help explain concepts. My question is how to insert multiple walk-through's on the same page and have them fire the correct walk-through when the specific button is clicked.

I'm using this plugin: https://github.com/jwarby/jquery-pagewalkthrough. While I can get each walk-through to work independent of each other, if I combine the code in any way on the same page, inevitably the second walk-through never fires.

The following code blocks currently reside in the file main.js. This is the code for the first walk-through:

$('#division').on('click', function(e){
    $('#division').pagewalkthrough('show');
    $('#division').pagewalkthrough({
        name: 'division',
        steps: [{
            wrapper: '#slide12 ftop',
            popup: {
                content: '#dividewalkthrough-1',
                type: 'modal'
            }
        }],
        onLoad: true
    });
});

And the second walk-through:

$('#multiply').on('click', function(e){
    $('#multiply').pagewalkthrough('show');
    $('#multiply').pagewalkthrough({
        name: 'multiply',
        steps: [{
            wrapper: '#slide10 .ftop',
            popup: {
                content: '#walkthrough-1',
                type: 'tooltip',
                position: 'bottom'
            }
        }, {
            wrapper: '#slide10 .fsol',
            popup: {
                content: '#walkthrough-2',
                type: 'tooltip',
                position: 'bottom',
            },
            onEnter: function(){
                $('#slide10 .fsol').show();
                return true;
            },
            onLeave: function(){
                var bcol3 = $('#slide10 .fsol .bcol3').val(),
                bcol4 = $('#slide10 .fsol .bcol4').val(),
                bcol5 = $('#slide10 .fsol .bcol5').val(),
                bcol6 = $('#slide10 .fsol .bcol6').val();
                if(bcol3 != "" && bcol4 != "" && bcol5 != "" && bcol6 != ""){
                    return true;
                }else{
                    alert('You must fill in each column');
                    return false;
                }
            }
        }, {
            wrapper: '#slide10 .ssol',
            popup: {
                content: '#walkthrough-3',
                type: 'tooltip',
                position: 'bottom'
            },
            onEnter: function(){
                $('#slide10 .ssol').show();
                return true;
            },
            onLeave: function(){
                var bcol3 = $('#slide10 .ssol .bcol3').val(),
                bcol4 = $('#slide10 .ssol .bcol4').val(),
                bcol5 = $('#slide10 .ssol .bcol5').val();
                if(bcol3 != "" && bcol4 != "" && bcol5 != ""){
                    return true;
                }else{
                    alert('You must fill in each column');
                    return false;
                }
            }
        }],
        onLoad: true
    });
});

I've tried completely separating the code and placing the code blocks in different .js files. I've tried calling the click function from the page instead of within the .js file. The closest that I've gotten to both firing correctly is when the button for 'division' is pressed (it's the second button in the hierarchy), the 'multiply' walk-through shows, but if I press the 'division' button again after closing the 'multiply' walk-through, then the 'division' walk-through shows correctly.

Any thoughts?

Hi Michael. Did it work? I am also facing the same issue. – AeJey Apr 18 '17 at 13:04 — AeJey, Apr 18 '17 at 13:04

score 1 · Answer 1 · answered Sep 23 '14 at 12:23

Doing more reading and research I came across this note: https://github.com/jwarby/jquery-pagewalkthrough#showname.

By changing the way that I called the walk-through's they now appear correctly. I now call the walk-through's like this:

$('#multiply').on('click', function(){
    $.pagewalkthrough('show', 'multiply');
});

Instead of the old way:

$('#division').on('click', function(e){
    $('#division').pagewalkthrough('show');
});

Hope this helps someone else later.

Jquery PageWalkthrough Multiple Walk-through's on Same Page

1 Answers1