javascript not working after jquery ajax call
Question
i am developing my first mobile web app using jquery,
When i press a button to go to the next page it does but the javascript on the page doesnt work.
Here is my code , As before my header is a php doc so i dont have to recall all the time header.php
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">-->
<!DOCTYPE html>
<html manifest="cache.manifest">
<!--<html>-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Balti Tandoori</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="iphone.png" />
<link rel="apple-touch-startup-image" href="startup.png" />
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black" />-->
<link rel="stylesheet" href="js/jquery.mobile-1.1.0.min.css" />
<!-- App custom styles -->
<link rel="stylesheet" href="js/balti.min.css" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>
<style type="text/css" media="screen">
h2 {
margin: 0;
}
.drawers-wrapper {
position: relative;
width: 100%;
}
.drawer {
background-color:#ffffff;
color:#ffffff;
font-size:20px;
line-height:1.3em;
}
<!-- NO REQUIRED -->
.boxcap {
height:5px;
left:0pt;
position:absolute;
width:100%;
z-index:100;
background:transparent url(http://images.apple.com/downloads/images/sidenav_capbottom.png) no-repeat scroll 0%;
margin-top:-5px;
}
.captop {
background-image:url(http://images.apple.com/downloads/images/box_188captop.png );
bottom:auto;
top:0pt;
margin-top:0;
}
<!-- END JUST DOES CORNERS -->
.drawers {
margin-bottom:15px;
color:#76797C;
font-size:11px;
line-height: 18px;
}
.drawers A {
color:#666666;
text-decoration:none;
font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}
.drawer li {
border-bottom:1px solid #E5E5E5;
line-height:16px;
padding:6px 0pt;
}
UL {
list-style: none;
padding: 0;
}
UL.drawers {
margin: 0;
}
.drawer-handle {
background-color:#000000;
color:#ffffff;
cursor:default;
font-size:20px;
font-weight:normal;
height:50px;
line-height:25px;
margin-bottom:0pt;
text-indent:15px;
width:100%;
border:1px solid #ffffff
}
.drawer-handle.open {
background:transparent url(css/body.gif) no-repeat;
}
.drawer UL {
padding: 0 12px;
padding-bottom:0pt;
}
.drawer-content UL {
padding-top: 7px;
}
.drawer-content LI A {
display:block;
overflow:hidden;
}
.alldownloads li {
border:0pt none;
line-height:18px;
padding:0pt;
}
</style>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.accordion.js" type="text/javascript"></script>
<!-- link to allow bookmark website -->
<link rel="stylesheet" href="bookmark/add2home.css">
<script type="text/javascript">
var addToHomeConfig = {
animationIn: 'bubble',
animationOut: 'drop',
lifespan:10000,
expire:2,
touchIcon:true,
message:'Add Our Mobile App To Your <strong>%device</strong> Home Page. Available Anytime `%icon`.'
};
</script>
<script type="application/javascript" src="bookmark/add2home.js"></script>
<!-- bookmark end -->
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script type="text/javascript">
$(function () {
$('UL.drawers').accordion({
// the drawer handle
header: 'H2.drawer-handle',
// our selected class
selectedClass: 'open',
// match the Apple slide out effect
event: 'mouseover'
});
});
</script>
</head>
this is my index.php
<?
require_once("header.php");
?>
<!-- do not touch above -->
<body>
<div data-role="page" id="page1" data-theme="f">
<div data-theme="f" data-role="header">
<img src="css/logo.gif"width="100%" style="border-bottom :1px solid white" alt="" />
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme="b">
<a href="menu.php" data-transition="flip">
Menu
</a>
</li>
<li data-theme="b">
<a href="#page1" data-transition="flip">
Opening Times
</a>
</li>
<li data-theme="b">
<a href="#page1" data-transition="flip">
How To Find Us
</a>
</li>
</ul>
<a data-role="button" data-transition="pop" href="page1" data-theme="b" data-icon="tel" data-iconpos="left">
Call Us
</a>
<!-- </div>-->
</div>
<!-- do not touch below -->
<div data-theme="b" data-role="footer">
<h3>
© Balti Tandoori
</h3>
</div>
</div>
<script>
//App custom javascript
</script>
</body>
</html>
this is the page the index calls where the javascript does not run, It will run if i disable the ajax call from the button like this But i want the ajax to work as well, How do i recall the javascript on load etc
<a href="javascript:window.location.href='menu.php'" data-ajax='false'
menu.php
<?
require_once("header.php");
?>
<!-- do not touch above -->
<body>
<div data-role="page" id="page1" data-theme="f">
<div data-theme="f" data-role="header">
<img src="css/logo.gif"width="100%" style="border-bottom :1px solid white" alt="" />
</div>
<div data-role="content">
<a href="index.php" data-role="button" data-transition="flip" data-icon="back" data-theme="b">Back</a>
<a data-role="button" data-transition="pop" href="page1" data-theme="b" data-icon="tel" data-iconpos="left">
Call Us
</a>
<!-- </div>-->
<div class="drawers-wrapper">
<!--<div class="boxcap captop"></div>-->
<ul class="drawers">
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle open">Starters</h2>
<!-- removes under border-->
<!-- <ul class="alldownloads">-->
<!--removed above -->
<ul>
<li id="sn-downloadsmacosx">All Categories <div style="text-align:right;">£2.50</div></li>
<li id="sn-aperture">Big dish<div style="text-align:right;">£2.50</div></li>
<li id="sn-apple"><a href="/downloads/macosx/apple/">Apple</a></li>
<li id="sn-video"><a href="/downloads/macosx/video/">Video</a></li>
<li id="sn-dashboard"><a href="/downloads/dashboard/" class="bottom">Widgets</a></li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Tandoori</h2>
<ul>
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
<li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
<li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Traditional</h2>
<ul>
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
<li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
<li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Originals</h2>
<ul>
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
<li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
<li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Specials</h2>
<ul>
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
<li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
<li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
</ul>
</li>
<li class="drawer last">
<h2 class="drawer-handle">Fish</h2>
<ul>
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
<li><a title="Security Update 2007-009 1.1 (10.4.11 Universal)" href="/downloads/macosx/apple/security_updates/securityupdate20070091110411universal.html">13. Security Update 20</a></li>
<li class="last"><a title="Security Update 2007-009 1.1 (10.5.1)" href="/downloads/macosx/apple/security_updates/securityupdate2007009111051.html">14. Security Update 20</a></li>
</ul>
</li>
</ul>
<!--<div class="boxcap"></div>-->
</div>
</div>
<!-- do not touch below -->
<div data-theme="b" data-role="footer">
<h3>
© Balti Tandoori
</h3>
</div>
</body>
</html>
Many thanks for your help
added for clarity to header.php
<script type="text/javascript">
$(document).bind('pageinit', function(){ //new bit added in script
$(function () {
$('UL.drawers').accordion({
// the drawer handle
header: 'H2.drawer-handle',
// our selected class
selectedClass: 'open',
// match the Apple slide out effect
event: 'mouseover'
});
});
}); //new bit added in script
</script>
1 answers
solution1
1 2012-05-04 18:48:42
Which JavaScript isn't working? I'm having a hard time getting exactly what it is that you mean, but I'm willing to take a hunch that none of your event handlers are getting bound. You don't show what the contents of all those external script files contain, so I can't say that for sure, but just a quick breakdown:
All of your JavaScript tags are in the head of your document. That means that they get loaded up before the body tag has been processed. Additionally, jQuery Mobile creates a great deal of the DOM dynamically. Nowhere do I see a call to $(document).ready() , which is fine because this has been sort of "phased out" in jQuery Mobile, nor do I see a call to $(document).bind("pageinit", function()) , which is the preferred way to bind event handlers to DOM elements after the page has loaded in jQuery Mobile.
I see you bind a callback to the document's mobileinit event, but per the jQuery Mobile documentation, this is called long before the DOM is built up.
Let's say that your accordion function is what isn't working. The pattern you're looking for is something like:
$(document).bind('pageinit', function(){
$('UL.drawers').accordion({
// the drawer handle
header: 'H2.drawer-handle',
// our selected class
selectedClass: 'open',
// match the Apple slide out effect
event: 'mouseover'
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript/Jquery stops working after Ajax call
JQuery draggable and Javascript stop working after ajax call
jquery not working after ajax call?
JavaScript not working after AJAX call - AJAX tabs
JQuery call not working after Ajax call succeeds
jquery ajax call after javascript validation function
JQuery Ajax call working but not native JavaScript
Called a jquery after javascript ajax call
after second ajax call jquery not working
jQuery each function not working after ajax call
Related Tags