I cannot understand why this is happening. I have a swiper nested in another swiper (one for vertical scrolling, the other for horizontal. What is driving me nuts is the nested swiper is not defined when I need to destroy it. Here is what I am doing:

function embedSwiper(){
var embeddedEcosystem = new Swiper('.swiper-nested', {
    //Styling set in bootstrap.min.css for pagination
    mode: 'vertical',
    pagination: '.pagination-nested',
    paginationClickable: true,

    simulateTouch : true,

});

embeddedEcosystem.swipeTo(0, 500, false);
return embeddedEcosystem;
}

That creates the swiper, and returns it to this function:

function reInitEmbedded(){
    setTimeout(function(){
        embed = embedSwiper();
        $(".swiper-nested").css({"height" : "0px"});
        $(".swiper-nested").css({"height" : $(".internal-relations").height()});
        useLocalImg();
        embed.reInit();
        //Set the slide height properly since it never works as intended
        return embed;
    }, 600);
}

I need to set the height here otherwise the slide is not properly fitted (and yes I have tried calculate height, but that was giving me issues on mobile since I am using worklight)

Now, here is where stuff gets wonkey. I am testing this in chrome (sorry, no link that I can provide you with at the moment).

//Resize cards
             swiper =  reinitSwiper();
             innerSwiper = reInitEmbedded();

             //Show info 
             detailsTransition();

             //Hides the overlay, and empties the panels to be filled next time
             //Bound calls for use when needed
             $(".back-button.btn.btn-primary.pull-left").on('click', function(){
                 goBack(lookUpName);
                 innerSwiper.destroy();
                 swiper.destroy();
             });

As you can see, I have the swiper variable, which works, and can be destroyed normally, and I have the innerSwiper. The rest is irrelevant because it was working prior to this. What is driving me nuts is that innerSwiperkeeps ing up as undefined, but it shouldn't be because I have traced the stack call in chrome's debugger and the returns all have the swiper variable for the inner swiper. So my question is: What am I doing wrong that I keep getting undefined?

I cannot understand why this is happening. I have a swiper nested in another swiper (one for vertical scrolling, the other for horizontal. What is driving me nuts is the nested swiper is not defined when I need to destroy it. Here is what I am doing:

function embedSwiper(){
var embeddedEcosystem = new Swiper('.swiper-nested', {
    //Styling set in bootstrap.min.css for pagination
    mode: 'vertical',
    pagination: '.pagination-nested',
    paginationClickable: true,

    simulateTouch : true,

});

embeddedEcosystem.swipeTo(0, 500, false);
return embeddedEcosystem;
}

That creates the swiper, and returns it to this function:

function reInitEmbedded(){
    setTimeout(function(){
        embed = embedSwiper();
        $(".swiper-nested").css({"height" : "0px"});
        $(".swiper-nested").css({"height" : $(".internal-relations").height()});
        useLocalImg();
        embed.reInit();
        //Set the slide height properly since it never works as intended
        return embed;
    }, 600);
}

I need to set the height here otherwise the slide is not properly fitted (and yes I have tried calculate height, but that was giving me issues on mobile since I am using worklight)

Now, here is where stuff gets wonkey. I am testing this in chrome (sorry, no link that I can provide you with at the moment).

//Resize cards
             swiper =  reinitSwiper();
             innerSwiper = reInitEmbedded();

             //Show info 
             detailsTransition();

             //Hides the overlay, and empties the panels to be filled next time
             //Bound calls for use when needed
             $(".back-button.btn.btn-primary.pull-left").on('click', function(){
                 goBack(lookUpName);
                 innerSwiper.destroy();
                 swiper.destroy();
             });

As you can see, I have the swiper variable, which works, and can be destroyed normally, and I have the innerSwiper. The rest is irrelevant because it was working prior to this. What is driving me nuts is that innerSwiperkeeps ing up as undefined, but it shouldn't be because I have traced the stack call in chrome's debugger and the returns all have the swiper variable for the inner swiper. So my question is: What am I doing wrong that I keep getting undefined?

• javascript
• jquery
• ibm-mobilefirst
• swiper.js

Share Follow asked Jul 29, 2014 at 17:33 DavidDavid 40233 gold badges99 silver badges2222 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

This is because of scoping issue.

inside the click handler, the scope is changed and it does not have access to innerSwiper. So, do this instead:

         this.swiper =  reinitSwiper();
         this.innerSwiper = reInitEmbedded();
         var self = this; // HOLD REFERNECE TO THIS AS SELF  


         //Show info 
         detailsTransition();

         //Hides the overlay, and empties the panels to be filled next time
         //Bound calls for use when needed
         $(".back-button.btn.btn-primary.pull-left").on('click', function(){
             goBack(lookUpName);
             self.innerSwiper.destroy(); // here you use self that has reference to swiper
             self.swiper.destroy();
         });

One more mistake as Thom x pointed out. fix it like this:

// Make sure self is defined be before this function

function reInitEmbedded(){
    setTimeout(function(){
        embed = embedSwiper();
        $(".swiper-nested").css({"height" : "0px"});
        $(".swiper-nested").css({"height" : $(".internal-relations").height()});
        useLocalImg();
        embed.reInit();
        //Set the slide height properly since it never works as intended
        self.innerSweeper =  embed; // change this
    }, 600);
}

reInitEmbedded is not returning any value.

function reInitEmbedded(){
    setTimeout(function(){
       return true;
    }, 600);
}

var a = reInitEmbedded();
console.log(a);

==> undefined

Ok, so I figured out what I was doing wrong. Due to the fact that swiper and innersSwiper were global, and I didn't realize that setTimeout can't return anything, I had to access the global variables directly. And since i wasn't using the word innerSwiper in the reInitEmbedded, it wasn't referencing properly.