CODEWITHSUNDEEP
javascriptjqueryajaxjquery-mobile
velmont
velmont

Reputation: 35

Can't use Javascript when using AJAX (jQuery Mobile)

I want to use Swiper Javascript Api(http://www.idangero.us/) in Jquery Mobile.. But because Jquery Mobile uses ajax, my javascript doesn't work.. Example sources are like that.

  1. index.html

    <head>
<link href="./scripts/jquery.mobile-1.4.0.css" rel="stylesheet" type="text/css"/>
<script src="./scripts/jquery-1.10.2.min.js"></script>
<script src="./scripts/jquery.mobile-1.4.0.js"></script>
<link rel="stylesheet" href="./scripts/idangerous.swiper.css"/>
<script src="./scripts/idangerous.swiper.2.4.1.js" defer="true"></script>
</head>

<body>
<div data-role="page">
    <div data-role="header"></div>
    <div role="main" class="ui-content page_content"><a href="sub.html">go sub page</a></div>
    <div data-role="footer"></div>
</div>
</body>

  2. sub.html 

    </head>

<body>
<div data-role="page">
    <div data-role="header">
    </div>
    <div role="main">

    <!-- using swipe javascript source-->
<script defer="true">
$(document).on('pagecreate', function() {
  var mySwiper = new Swiper('.swiper-container',{
    //Your options here:
    mode:'horizontal',
    loop: true
    //etc..
  });  
})
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!--First Slide-->
            <div class="swiper-slide" style="background:white;">
                <center><font color="black">1</font></center>
                <center><font color="black">page1</font></center>

            </div>
            <!--Second Slide-->
            <div class="swiper-slide" style="background:white;">
                <center><font color="black" >2</font></center>
                <center><font color="black" >page2</font></center>

            </div>
            <!-- Third Slide-->
            <div class="swiper-slide" style="background:white;">
                <center><font color="black">3</font></center>
                <center><font color="black">page3</font></center>

            </div>
        </div>
    </div>
    </div>
    </div data-role="footer"></div>
</div>
</body>

I used Swiper api(javascript) at sub.html. But when I access index.html page and click sub link, sub page's Swiper api doesn't work. When I refresh that page, it work.. How can I view the Swiper api even I do not refresh it?

Upvotes: 0

Views: 1955

Answers (2)

Bryce
Bryce

Reputation: 6640

jQuery Mobile uses AJAX to load in your new page. However, it strips out the head--as well as anything outside a container with data-role="page" (or body if not provided).

The solution is to move your script so it appears within the section of the page that jQuery Mobile injects into the page, so it doesn't get removed.

Then, if you want to execute javascript on $.ready(), you'll need to bind to jQuery Mobile's onPageInit event like so:

$( document ).on( "pageinit", function( event ) {
    alert( "This page was just enhanced by jQuery Mobile!" );
});

In the real world, I've noticed that pageinit sometimes doesn't solve the problem, so if all else fails, try binding to pagebeforeshow and see if that does the trick.

Upvotes: 2

Kjell
Kjell

Reputation: 832

My guess is that the document.ready is only fired once - when your page has initially been loaded and DOM is ready. You can put your code directly into a tag in the loaded sub.html. No need to use the $(document).ready event handler.

Upvotes: 0

Related Questions