CODEWITHSUNDEEP
javascriptjqueryjquery-mobileswiper.js
GIJoeCodes
GIJoeCodes

Reputation: 1850

Need to refresh page when using iDangero.us Swiper with jQuery Mobile

I'm currently trying to add iDangerous Swiper to a page built with jQuery Mobile but in order to display the swiper I need to reload the page. I have seen a few instances where people have had some issues with these but their solutions have not work for my issue below.

I have tried several different things: pageshow, pageinit, pagebeforeshow, mobileinit. Also trigger("create"), trigger("refresh") and have tried adding the script before or after jQuery Mobile js.

I'm currently using jQuery Mobile 1.4.1 alpha 2 and Swiper 2.1.0.

My question: What would be the proper sequence for the scripts in order to make it work and which one of the page event above should do the trick? Thanks for your time.

My HTML for the swiper goes as follows:

<div class="swiper-container">
        <div class="swiper-wrapper">

        <div class="swiper-slide">
<div class="picture"><img src="image1.jpg" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket "  id="productImage" /></div>
        </div>
<div class="swiper-slide"><div class="picture">
      <img src="image2.jpj" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " />
      </div></div>
<div class="swiper-slide"><div class="picture">
      <img src="image3.jpg" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " />
      </div></div>
      </div>
    </div>

My jQuery and jQuery Mobile files are loaded at the bottom of the page.

    <script type="text/javascript" src="includes/templates/YOUR_TEMPLATE_mobile/jscript/jquery.min.js"></script>
<script>
    $(document).on('pagecreate', function(){
        $( "#leftPanel" ).trigger( "updatelayout" );

        $.mobile.defaultDialogTransition = 'slide';
        $.mobile.defaultPageTransition = 'slide';
        $.mobile.selectmenu.prototype.options.nativeMenu = false;

    });
</script>

<script src="/4.0/includes/templates/YOUR_TEMPLATE_mobile/jscript/idangerous.swiper-2.1.min.js"></script>


<script type="text/javascript" src="includes/templates/YOUR_TEMPLATE_mobile/jscript/jquery.mobile-1.4.0-alpha.2.min.js"></script>

<script src="/4.0/includes/templates/YOUR_TEMPLATE_mobile/jscript/boilerplate/helper.js"></script>
<script>
$('#productinfo').on('pageshow', function() {
  var mySwiper = new Swiper('.swiper-container',{
    centeredSlides: true,
    slidesPerView: 2,
    watchActiveIndex: true
  });
});
</script>

Upvotes: 0

Views: 2581

Answers (2)

GIJoeCodes
GIJoeCodes

Reputation: 1850

I came across a solution for this problem while trying to solve something else. The site I was building is generated using php. The html was already embedded therefore all product info pages had the same id of #product_info and the div that contained the swiper always had the id of #product_image. By adding a php function to the id #product_image for example:

#product_image<?php echo $product_id; ?>

and giving swiper the same as in 

var mySwiper = new Swiper('#product_image<?php echo $product_id; ?>',{

I was able to eliminate the need for reloading the page. Hope that helps someone.

Upvotes: 0

Oliver Marfin
Oliver Marfin

Reputation: 1

You may try this one:

$('#productinfo').live('pageinit',function(event){
    swiper function...
});

Upvotes: 0

Related Questions