CODEWITHSUNDEEP
javascriptjqueryibm-mobilefirstswiper.js
David
David

Reputation: 402

Why is my swiper 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 coming 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?

Upvotes: 0

Views: 9971

Answers (3)

David
David

Reputation: 402

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.

Upvotes: 0

Ashima
Ashima

Reputation: 4824

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

Upvotes: 2

Thom-x
Thom-x

Reputation: 866

reInitEmbedded is not returning any value.

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

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

==> undefined

Upvotes: 1

Related Questions