Response title
This is preview!
JQtouch problem with buttons being clicked on another page
in jQuery Mobile
•
11 years ago
I am working on building an app with JQtouch. The home page has a list of items with the "rounded" class. when i tap on one of these buttons, it takes me to the next page as it should, but if there is a button on that next page at the same location where i tapped on the first page, it gets tapped too. even though i didn't tap the button on the second page.
I cant figure out why this is happening.
is this a common problem with jqTouch? any idea how to resolve it?
Here is the code that I am using. When i run it, if i go to devices and then tap on the left side of "globe light" it takes me to the globe light page and taps the 40% dim button.
I cant figure out why this is happening.
is this a common problem with jqTouch? any idea how to resolve it?
Here is the code that I am using. When i run it, if i go to devices and then tap on the left side of "globe light" it takes me to the globe light page and taps the 40% dim button.
- <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.3.2"); </script>
<script src="jquery.blockUI.js" type="text/javascript"></script>
<!-- import JQTouch -->
<script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<!-- Import JQTouch default style (iPhone look). Replace the string "themes/apple" with "themes/jq" for a neutral (black) theme -->
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen" href="themes/apple/theme.css">
<!-- JavaScript goes here -->
<script type="text/javascript">
// Fire up JQTouch
var jQT = $.jQTouch({
statusBar: 'black',
icon: 'apple-touch-icon.png',
startupScreen: 'splash.png',
preloadImages: [
'themes/apple/img/backButton.png',
'themes/apple/img/activeButton.png',
'themes/apple/img/chevron.png',
'themes/apple/img/toolButton.png',
'themes/apple/img/pinstripes.png',
'themes/apple/img/toolbar.png',
'themes/apple/img/listGroup.png'
]
});
function ajaxCall(passedObjectID, eventName)
{
$("#" + passedObjectID).block({ message: "working... <img src='loading-small.gif'>" });
//$("#" + passedObjectID).block({ message: null });
$.ajax({
url: "iphone_event_process.asp?eventName="+ eventName +"",
success: function(){
$("#" + passedObjectID).unblock();
}
});
}
function ajaxCallDevice(passedObjectID, deviceCode, action, dimlevel, statusDiv, deviceName)
{
$("#" + passedObjectID).block({ message: "working... <img src='loading-small.gif'>" });
//$("#" + passedObjectID).block({ message: null });
$.ajax({
url: "iphone_device_process.asp?deviceCode=" + deviceCode + "&action=" + action + "&dimlevel=" + dimlevel,
success: function(){
$("#" + statusDiv).load("iphone_device_status.asp?deviceCode=" + deviceCode + "&deviceName=" + deviceName );
$("#" + deviceName + "icon").load("iphone_device_status.asp?deviceCode=" + deviceCode + "&deviceName=" + deviceName + "&icon=true" );
$("#" + passedObjectID).unblock();
}
});
}
function updateDeviceStatus(statusDiv, deviceCode, deviceName)
{
//alert(statusDiv);
$("#" + statusDiv).load("iphone_device_status.asp?deviceCode=" + deviceCode + "&deviceName=" + deviceName )
}
</script>
</head>
<body>
<!-- **************************************** -->
<!-- BEGIN HOME PANEL -->
<!-- **************************************** -->
<div id="home">
<div class="toolbar">
<h1>Home Controls</h1>
<a class="button slideup" href="#deviceHome">Devices</a>
</div>
<h2>Event Groups</h2>
<!-- Now loop through the groupArray and output a <li> for each one -->
<ul class="rounded">
<li class='arrow'><a class='slide' href='#GlobeLight'>GlobeLight</a></li><li class='arrow'><a class='slide' href='#Decorations'>Decorations</a></li>
</ul>
<!-- Get the user's IP address - this might be helpful later -->
<!-- To determine if its coming from inside or outside the network -->
<br>IP Address: 192.168.1.3<br>
</div>
<!-- **************************************** -->
<!-- BEGIN EVENT PANELS -->
<!-- **************************************** -->
<!-- Now we have to loop through the groups again and create a "Panel" for each one-->
<div id="GlobeLight">
<div class="toolbar">
<h1>GlobeLight</h1>
<a class="button back" href="#">Back</a>
</div>
<div class="info">GlobeLight</div>
<ul class='individual'>
<li id="GlobeLight_Off" onClick="ajaxCall('GlobeLight_Off', 'GlobeLight_Off');"><a href="#GlobeLight">OFF</a></li>
<li id="GlobeLight_40%" onClick="ajaxCall('GlobeLight_40%', 'GlobeLight_40%');"><a href="#GlobeLight">40%</a></li>
</ul>
<ul class='individual'>
<li id="GlobeLight_On" onClick="ajaxCall('GlobeLight_On', 'GlobeLight_On');"><a href="#GlobeLight">ON</a></li>
<li id="GlobeLight_80%" onClick="ajaxCall('GlobeLight_80%', 'GlobeLight_80%');"><a href="#GlobeLight">80%</a></li>
</ul>
</div>
<div id="Decorations">
<div class="toolbar">
<h1>Decorations</h1>
<a class="button back" href="#">Back</a>
</div>
<div class="info">Decorations</div>
<ul class='individual'>
<li id="Decorations_80%" onClick="ajaxCall('Decorations_80%', 'Decorations_80%');"><a href="#Decorations">80%</a></li>
<li id="Decorations_On" onClick="ajaxCall('Decorations_On', 'Decorations_On');"><a href="#Decorations">ON</a></li>
</ul>
<ul class='individual'>
<li id="Decorations_Off" onClick="ajaxCall('Decorations_Off', 'Decorations_Off');"><a href="#Decorations">OFF</a></li>
<li id="Decorations_40%" onClick="ajaxCall('Decorations_40%', 'Decorations_40%');"><a href="#Decorations">40%</a></li>
</ul>
</div>
<!-- **************************************** -->
<!-- BEGIN MAIN DEVICE PANEL -->
<!-- **************************************** -->
<div id="deviceHome">
<div class="toolbar">
<h1>Devices</h1>
<a class="button back" href="#home">Home</a>
</div>
<div class="info">This is a listing of the devices from Homeseer</div>
<!--<h2>Device List</h2>-->
<ul class="edgetoedge">
<li class="arrow"><a class="slide" href="#elliot_lamp" onclick="updateDeviceStatus('elliot_lampStatus', 'A1', 'elliot_lamp');"><span id="elliot_lampicon"><img src="led-gray.gif"align="absmiddle"></span>elliot lamp</a></li>
<li class="arrow"><a class="slide" href="#globe_light" onclick="updateDeviceStatus('globe_lightStatus', 'C2', 'globe_light');"><span id="globe_lighticon"><img src="led-gray.gif"align="absmiddle"></span>globe light</a></li>
<li class="arrow"><a class="slide" href="#Z-Wave_Pumpkin" onclick="updateDeviceStatus('Z-Wave_PumpkinStatus', 'Q2', 'Z-Wave_Pumpkin');"><span id="Z-Wave_Pumpkinicon"><img src="led-gray.gif"align="absmiddle"></span>Z-Wave Pumpkin</a></li>
<li class="arrow"><a class="slide" href="#Z-Wave_Xmas_Lights" onclick="updateDeviceStatus('Z-Wave_Xmas_LightsStatus', 'Q1', 'Z-Wave_Xmas_Lights');"><span id="Z-Wave_Xmas_Lightsicon"><img src="led-gray.gif"align="absmiddle"></span>Z-Wave Xmas Lights</a></li>
<li class="arrow"><a class="slide" href="#Ghost" onclick="updateDeviceStatus('GhostStatus', 'C8', 'Ghost');"><span id="Ghosticon"><img src="led-gray.gif"align="absmiddle"></span>Ghost</a></li>
</ul>
</div>
<!-- **************************************** -->
<!-- BEGIN DEVICE PANELS -->
<!-- **************************************** -->
<div id="elliot_lamp">
<div class="toolbar">
<h1>elliot lamp</h1>
<a class="button back" href="#">Back</a>
</div>
<div>
<div class="info" id="elliot_lampStatus">
elliot lamp is OFF
</div>
</div>
<ul class="individual">
<li id="elliot_lampOn" onClick="ajaxCallDevice('elliot_lampOn', 'A1', 'ON', 100, 'elliot_lampStatus', 'elliot_lamp');"><a href="#elliot lamp">ON</a></li>
<li id="elliot_lampOff" onClick="ajaxCallDevice('elliot_lampOff', 'A1', 'OFF', 0, 'elliot_lampStatus', 'elliot_lamp');"><a href="#elliot lamp">OFF</a></li>
</ul>
<ul class="individual">
<li id="elliot_lamp40" onClick="ajaxCallDevice('elliot_lamp40', 'A1', 'DIM', '40', 'elliot_lampStatus', 'elliot_lamp');"><a href="#elliot lamp">40% DIM</a></li>
<li id="elliot_lamp80" onClick="ajaxCallDevice('elliot_lamp80', 'A1', 'DIM', '80', 'elliot_lampStatus', 'elliot_lamp');"><a href="#elliot lamp">80% DIM</a></li>
</ul>
</div>
<div id="globe_light">
<div class="toolbar">
<h1>globe light</h1>
<a class="button back" href="#">Back</a>
</div>
<div>
<div class="info" id="globe_lightStatus">globe light is OFF</div>
</div>
<ul class="individual">
<li id="globe_lightOn" onClick="ajaxCallDevice('globe_lightOn', 'C2', 'ON', 100, 'globe_lightStatus', 'globe_light');"><a href="#globe light">ON</a></li>
<li id="globe_lightOff" onClick="ajaxCallDevice('globe_lightOff', 'C2', 'OFF', 0, 'globe_lightStatus', 'globe_light');"><a href="#globe light">OFF</a></li>
</ul>
<ul class="individual">
<li id="globe_light40" onClick="ajaxCallDevice('globe_light40', 'C2', 'DIM', '40', 'globe_lightStatus', 'globe_light');"><a href="#globe light">40% DIM</a></li>
<li id="globe_light80" onClick="ajaxCallDevice('globe_light80', 'C2', 'DIM', '80', 'globe_lightStatus', 'globe_light');"><a href="#globe light">80% DIM</a></li>
</ul>
</div>
<div id="Z-Wave_Pumpkin">
<div class="toolbar">
<h1>Z-Wave Pumpkin</h1>
<a class="button back" href="#">Back</a>
</div>
<div>
<div class="info" id="Z-Wave_PumpkinStatus">Z-Wave Pumpkin is OFF</div>
</div>
<ul class="individual">
<li id="Z-Wave_PumpkinOn" onClick="ajaxCallDevice('Z-Wave_PumpkinOn', 'Q2', 'ON', 100, 'Z-Wave_PumpkinStatus', 'Z-Wave_Pumpkin');"><a href="#Z-Wave Pumpkin">ON</a></li>
<li id="Z-Wave_PumpkinOff" onClick="ajaxCallDevice('Z-Wave_PumpkinOff', 'Q2', 'OFF', 0, 'Z-Wave_PumpkinStatus', 'Z-Wave_Pumpkin');"><a href="#Z-Wave Pumpkin">OFF</a></li>
</ul>
<ul class="individual">
<li id="Z-Wave_Pumpkin40" onClick="ajaxCallDevice('Z-Wave_Pumpkin40', 'Q2', 'DIM', '40', 'Z-Wave_PumpkinStatus', 'Z-Wave_Pumpkin');"><a href="#Z-Wave Pumpkin">40% DIM</a></li>
<li id="Z-Wave_Pumpkin80" onClick="ajaxCallDevice('Z-Wave_Pumpkin80', 'Q2', 'DIM', '80', 'Z-Wave_PumpkinStatus', 'Z-Wave_Pumpkin');"><a href="#Z-Wave Pumpkin">80% DIM</a></li>
</ul>
</div>
<div id="Z-Wave_Xmas_Lights">
<div class="toolbar">
<h1>Z-Wave Xmas Lights</h1>
<a class="button back" href="#">Back</a>
</div>
<div>
<div class="info" id="Z-Wave_Xmas_LightsStatus">Z-Wave Xmas Lights is OFF</div>
</div>
<ul class="individual">
<li id="Z-Wave_Xmas_LightsOn" onClick="ajaxCallDevice('Z-Wave_Xmas_LightsOn', 'Q1', 'ON', 100, 'Z-Wave_Xmas_LightsStatus', 'Z-Wave_Xmas_Lights');"><a href="#Z-Wave Xmas Lights">ON</a></li>
<li id="Z-Wave_Xmas_LightsOff" onClick="ajaxCallDevice('Z-Wave_Xmas_LightsOff', 'Q1', 'OFF', 0, 'Z-Wave_Xmas_LightsStatus', 'Z-Wave_Xmas_Lights');"><a href="#Z-Wave Xmas Lights">OFF</a></li>
</ul>
<ul class="individual">
<li id="Z-Wave_Xmas_Lights40" onClick="ajaxCallDevice('Z-Wave_Xmas_Lights40', 'Q1', 'DIM', '40', 'Z-Wave_Xmas_LightsStatus', 'Z-Wave_Xmas_Lights');"><a href="#Z-Wave Xmas Lights">40% DIM</a></li>
<li id="Z-Wave_Xmas_Lights80" onClick="ajaxCallDevice('Z-Wave_Xmas_Lights80', 'Q1', 'DIM', '80', 'Z-Wave_Xmas_LightsStatus', 'Z-Wave_Xmas_Lights');"><a href="#Z-Wave Xmas Lights">80% DIM</a></li>
</ul>
</div>
<div id="Ghost">
<div class="toolbar">
<h1>Ghost</h1>
<a class="button back" href="#">Back</a>
</div>
<div>
<div class="info" id="GhostStatus">Ghost is OFF</div>
</div>
<ul class="individual">
<li id="GhostOn" onClick="ajaxCallDevice('GhostOn', 'C8', 'ON', 100, 'GhostStatus', 'Ghost');"><a href="#Ghost">ON</a></li>
<li id="GhostOff" onClick="ajaxCallDevice('GhostOff', 'C8', 'OFF', 0, 'GhostStatus', 'Ghost');"><a href="#Ghost">OFF</a></li>
</ul>
<ul class="individual">
<li id="Ghost40" onClick="ajaxCallDevice('Ghost40', 'C8', 'DIM', '40', 'GhostStatus', 'Ghost');"><a href="#Ghost">40% DIM</a></li>
<li id="Ghost80" onClick="ajaxCallDevice('Ghost80', 'C8', 'DIM', '80', 'GhostStatus', 'Ghost');"><a href="#Ghost">80% DIM</a></li>
</ul>
</div>
</body>
</html>
1
