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

Question

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.

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>

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?

for single page model JS libraries and code should be placed inside page div. Move swiper JS library and code inside page div of sub.html. — Omar
– Omar, Commented Jan 14, 2014 at 11:26
@Omar I moved it. But it doesn't work..(mbtistudy.cafe24.com/index.html) — velmont
– velmont, Commented Jan 14, 2014 at 11:32
Dont use .ready() instead use $(document).on("pagecreate", function () { swipre code });. pageinit is deprecated in jQM 1.4 and replaced with pagecreate. — Omar
– Omar, Commented Jan 14, 2014 at 11:34
it works with pagecontainershow jsfiddle.net/Palestinian/mH4YW — Omar
– Omar, Commented Jan 14, 2014 at 16:14

Bryce · Accepted Answer · 2014-01-14 11:32:54Z

2

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.

answered Jan 14, 2014 at 11:32

Bryce

6,68010 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kjell · Accepted Answer · 2014-01-14 07:51:55Z

0

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.

answered Jan 14, 2014 at 7:51

Kjell

8327 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related