In which order do I exactly place the javascript files in order for swiper to load properly with jQuery Mobile and what page event should I use?

Question

I have asked this question before however, I'm adding more detail to the question this time because it applies to any javascript that I attempt to load into the DOM when using jQuery Mobile.

I have three pages built with jQuery Mobile 1.4.0 RC1. index.html is simply a single page template, I added the swiper to page 2 and the swiper and easytabs to page 3. You can see them here: http://builtformobile.com/demos/jquerymobile/swiper1/index.html

I have tried placing the jQuery and jQuery Mobile javascript files in several different ways, in the head, at the bottom, as for the additional javacript Swiper from idangero.us and Easytabs.js by Jango Steve outside and inside the data-role page.

Depending on where I place the javascript for easytabs and swiper, in or outside the DOM, using pagecreate or pageinit, I still get weird results when either loading or refreshing pages. I either have to refresh the page in order for the javascript to work or I see content from other pages load on pages that do not supposed to load it.

My questions are: Where do I place the javascript? Is it before or after loading jQuery Mobile? Where exactly do I place the javascript files and which page event is the correct one for my pages? Do I use a page event in order to display the content and another page event to stop that content before going into another page?

Thanks so much for your time.

    <div data-role="header">
        <h1>three</h1>
    </div><!-- /header -->

    <div data-role="navbar" class="navbar">
        <ul>
            <li><a href="index.html">Index</a></li>
            <li><a href="page-two.html">Page 2</a></li>
            <li><a href="page-three.html">Page 3</a></li>
        </ul>
    </div>

    <div data-role="content">       

        <a class="arrow-left" href="#"></a>
        <a class="arrow-right" href="#"></a>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide"> <img src="img/slider1-1.png"> </div>
            <div class="swiper-slide"> <img src="img/slider1-2.png"> </div>
            <div class="swiper-slide">
              <div class="content-slide">
                <p class="title">Slide with HTML</p>
                <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination"></div>


        <div id="tab-container" class="tab-container">
            <ul class="etabs">
                <li class="tab"><a href="#tab1">Tab 1</a></li>
                <li class="tab"><a href="#tab2">Tab 2</a></li>
                <li class="tab"><a href="#tab3">Tab 3</a></li>
            </ul>
            <div class="panel-container">
                <div id="tab1">
                    content 3
                </div>
                <div id="tab2">
                    content 2
                </div>
                <div id="tab3">
                    content 1
                </div>
            </div>
        </div>

    </div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->  


<script src="js/idangerous.swiper-2.1.min.js"></script>
<script>
$(function(){
    var mySwiper = $('.swiper-container').swiper({
        pagination: '.pagination',
        loop:true,
        grabCursor: true,
        paginationClickable: true
    })
})

$('.arrow-left').on('click', function(e){
    e.preventDefault()
    mySwiper.swipePrev()
})

$('.arrow-right').on('click', function(e){
    e.preventDefault()
    mySwiper.swipeNext()
})

</script>

<script src="js/jquery.easytabs.min.js"></script>
<script>
    $(function() {
        $('#tab-container').easytabs();
    });
</script>   

</div>

Answer 1

Every page should have all JavaScript, because:

• User may start on index , page1 or page2
• The first page loaded will be your "anchor page" (~ JQM calls it documentBase ).
• User will never leave this page, unless (one way) you add data-ajax="false" to a link
• Subsequent pages the user visits will be fetched by JQM via AJAx and added to the existing DOM
• When doing so, JQM only inserts what is inside the first <div data-role="page"></div> of the page being loaded

If you disable JQM hash-management you will see that going from:

/foo/bar/index.html > /foo/bar/page1.html

will switch the URL to

 /foo/bar/index.html#foo/bar/page1.html

which JQM masks to

  /foo/bar/page1.html

Thus all <script> tags you place on pageX will not be loaded unless the user starts on this page.

I suggest putting your js methods in a file and loading it along with the other JavaScript files you need. Put all files on all pages and you are good to go. Files will only be loaded on the first page, so the only problem will be how to mimimize first page load (when everything needs to be fetched - that's a different story)