My .on Swipe only works once before it breaks and have to refresh everything - JQuery Mobile / Javascript
Question
So i managed to put together a script for my when i click on my image, it shows a popup and when i swipe left or right on the image, it shows the hidden images in my javascript. However when i got to my index page and i go to the house html. When i click on the photo, the swipe functions do not work before i have to go into my javascript file and basically rewrite the swipe function before it works again, but then break after i go back to my index page.
here is the index page to my site: http://titan.dcs.bbk.ac.uk/~aaldib01/mad/madfma/index.html
Then Houses > 2 Bedroom terraced > house1.html
Is there a way for me to either fix the problem or to improve my javascript for this to not be a problem again?
Thank you.
*note the problem i think lies where the image code is placed. (i have deleted the majority of the other code as that does not affect it)
i've tried using the .bind("swiperight", function() but it gives me the same result. It working once then not work after i go to index.html > > house1.html
Here's the house1.html code (the data-role="content":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="css/themes/blue.min.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="images.js"></script>
<title>House 1</title>
</head>
<body>
<div data-role="page" id="house1" data-theme="a" data-dom-cache="true">
<div data-role="content">
<a href="#popupImg" data-rel="popup" data-position-to="window" data-transition="pop">
<img src="pictures/houses/house1/image1.PNG"/ style="width: 50%;"/>
<div data-role="popup" id="popupImg" data-theme="a" class="ui-corner-all">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="pictures/houses/house1/image1.PNG" style="width: 100%;" />
</a>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-id="footernav">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="">Favourites</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
And here's the javascript file:
$(document).ready(function () {
var i = 0;
var imgURL = [];
imgURL.push('pictures/houses/house1/image1.PNG');
imgURL.push('pictures/houses/house1/image2.PNG');
imgURL.push('pictures/houses/house1/image3.PNG');
imgURL.push('pictures/houses/house1/image4.PNG');
$("#house1").on("swiperight",function () {
if (i < (imgURL.length - 1)) {
i++
} else {
i = 0;
}
var imgStr = "<img src=" + imgURL[i] + " style='width:100%'>";
$('#popupImg').html(imgStr);
});
$("#house1").on("swipeleft",function () {
if (i > 0) {
i--
} else {
i = (imgURL.length - 1);
}
var imgStr = "<img src=" + imgURL[i] + " style='width:100%'>";
$('#popupImg').html(imgStr);
});
});
1 answers
solution1
0 ACCPTED 2019-04-09 16:10:52
The issue is that your image.js script isn't loaded if you start on the index page and navigate to House 1. You can check this by viewing the source of your site when you load House 1 directly (it'll be there) versus starting on index and browsing to House 1 (it'll be missing from <head> ).
The reason for this is that jQuery Mobile uses AJAX for navigating between pages. By default, each page request will only update the <body> element, but not the <head> (more info can be found on this jQuery Mobile demo page ).
There are a few solutions referenced on that page:
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the
pageinitevent (details below) to run necessary code when a specific page is created (which can be determined by itsidattribute, or a number of other ways).Another approach for page-specific scripting would be to include scripts at the end of the
bodyelement when nodata-role=pageelement is defined, or inside the firstdata-role=pageelement.
Ultimately it will be up to you to decide which of these methods makes the most sense for your specific use-case.
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.