Jquery Mobile page Anchor on page working inconsistently - javascript

I have a very simple page with two sections identified with a , and linked using a Jquery Mobile formatted link on the same page (Refresh Rate), and it doesn't seem to work consistently.
Although I am using this in a PhoneGap application, the same problem happens when I try to load the page locally in Chrome.
<head>
<title>TPS/TFS CAD Page</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/tfscad.mobile.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/js.cookie.js"></script>
<script src="cordova.js"></script>
<script type='text/javascript'>
function save_val(va) {
localStorage.setItem('refreshrate', va );
var refreshrate=localStorage.getItem('refreshrate');
alert('The refreshrate is set to ' + refreshrate);
}
</script>
</head>
<body>
<div id="options" data-role="page">
<!-- Start of first page -->
<div data-role="header">
Back
<h1>Options</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
Alerts
Filters
<a href="#refopt" class="ui-btn ui-icon-carat-r ui-btn-icon-right" >Refresh Rate</a>
</div><!-- /content -->
<div data-role="footer">
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="refopt">
<div data-role="header">
Back
<h1>Refresh Rate</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<fieldset data-role="controlgroup" data-iconpos="right">
<legend>The frequency that the application refreshes the dispatched events.
Increasing this may reduce data usage, but will slow down how quickly you are notified of a new event</legend>
<input type="radio" name="refreshtime" id="10" value="10000" checked="checked" onclick="save_val('10000')">
<label for="10">10 Seconds (Default)</label>
<input type="radio" name="refreshtime" id="20" value="20000" onclick="save_val('20000')">
<label for="20">20 Seconds</label>
<input type="radio" name="refreshtime" id="30" value="30000" onclick="save_val('30000')">
<label for="30">30 Seconds</label>
<input type="radio" name="refreshtime" id="60" value="60000" onclick="save_val('60000')">
<label for="60">1 Minute</label>
<input type="radio" name="refreshtime" id="120" value="120000" onclick="save_val('120000')">
<label for="120">2 Minutes</label>
</fieldset>
</div><!-- /content -->
<div data-role="footer">
<h4></h4>
</div><!-- /footer -->
</div>
<!-- /page -->
</body>
</html>

Related

ons-button onclick not Executing Javascript Function

I am building a mobile app and I'm using Angular JS for my UI.
There is an href element that executes a javascript whenever it is clicked. The problem is that the onclick event is not executing the function placed inside it, but if I put the function implementation directly inside the onclick event of the href element, it gets executed i.e. if I put alert('Alert!!'); in the onclick event, it gets executed but if I call the function callAlertFunc() which also performs alert, it doesn't get executed. what could be the problem?
My Codes are below.
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>xxxxx</title>
<!-- Stylesheets-->
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<link rel="stylesheet" href="styles/mapsed.css"/>
<link rel="stylesheet" href="styles/app.css"/>
<link rel="stylesheet" href="styles/fonts.css"/>
<!-- Stylesheets-->
<!-- Scripts-->
<script src="js/jquery-1.10.2.js"></script>
<script src="cordova.js"></script>
<script src="scripts/service-integrate.js"></script>
<!-- Scripts-->
<script>
function callAlertFunc()
{
alert('Alert!!');
}
</script>
</head>
<body>
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Get Details</div>
</ons-toolbar>
<ons-row style="padding: 0">
<ons-col align="center">
<ons-list>
</ons-list>
</ons-col>
</ons-row>
<br>
<br>
<div class="center"> <br>
<input class="text-input" type="text" modifier="large" name="id" placeholder="id">
<br>
</div>
<br>
<a href="#" id="hrefID" onclick="callAlertFunc();">
<ons-button class="home-btn" modifier="large">Get Details</ons-button>
</a>
<br></div>
<div class="center" id="DetailsDiv"> <br>
<u> Details</u>
<br>
<p class="service-data">Status: </p>
<br>
</div>
</ons-page>
</ons-navigator>
</body>
</html>

Changing .innerHTML after a button is clicked

I am using jquery mobile and have a collapsible set.
When using a function to change its innerHTML it works just fine. Displaying the content inside as collapsibles.
<div id="doro" data-role="collapsibleset" data-iconpos="right" dir="rtl" align="right">
</div>
works when using:
document.getElementById("doro").innerHTML ='<div data-role="collapsible">
<h3>Click me - Im collapsible!</h3>
<p>I'm the expanded content.</p>
</div>'
but when i try:
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" onClick="refreshPage();">
while:
function refreshPage(){
var text = "<div data-role='collapsible'><h1>Click me - I'm collapsible!</h1><p>I'm the expanded content.</p></div>";
document.getElementById("doro").innerHTML = text;
}
It changes the collapsible set I have into just text without the jqueryMobile css and javascript attached.
That's sort of what it looks like
function refreshPage()
{
var text = "<div data-role='collapsible'><h1>Click me</h1><p>I'm the new expanded content.</p></div>";
document.getElementById("doro").innerHTML =text;
}
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!doctype html>
<html><head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="panel" id="left-panel" data-display="overlay">
<h2></h2>
<form id="checkuser" name="checkuser" method="post" class="ui-body ui-body-a ui-corner-all">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Enter your username:</label>
<input type="text" value="" name="username" id="username"/>
</div>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" onClick="refreshPage();">
</fieldset>
</form>
</div>
<div data-role="header">
<h1></h1>
        Add
</div><!-- /header -->
<div data-role="content">
Star button
<p id="demo">
<div id="doro" data-role="collapsibleset" data-iconpos="right" dir="rtl" align="right">
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
</div></p>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
this is a simplified example that won't work aswell, and I don't get why
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Sets</h1>
</div>
<div data-role="main" class="ui-content" id="name"> </div>
<script>
document.getElementById("name").innerHTML ='<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible!</h3><p>Im the expanded content.</p></div>';
function refreshPage(){ document.getElementById("name").innerHTML ='<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible!</h3><p>Im the expanded content.</p></div>';}
</script>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" onClick="refreshPage();">
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>

When you are dynamically creating jQuery mobile widgets after the page has already been enhanced, you have to initialize the widgets yourself in one of the following ways:
Call .enhanceWithin() on the container element.
Call the individual widget intializer, e.g. .colapsibleset(), .collapsible(), etc.
For your example, you could do the following. Given a button and a container DIV with id="name":
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Sets</h1>
</div>
<div data-role="main" class="ui-content" >
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" />
<div id="name"></div>
</div>
</div>
On pagecreate, dynamically add the collapsibleset to the container and call enhanceWithin(). Also add a click handler to the button which calls refreshPage(). refreshPage() replaces the html in the container and again calls enhanceWithin().
$(document).on("pagecreate", "#pageone", function(){
$("#name").html('<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible!</h3><p>Im the expanded content.</p></div>').enhanceWithin();
$("#submit").on("click", function(){
refreshPage();
});
});
function refreshPage(){
var text = '<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible 2!</h3><p>Im the expanded content from button.</p></div>';
$("#name").html(text).enhanceWithin();
}
Working DEMO
Also, in your second code snippet, you are loading 2 different versions of jQuery. Use either 2.1 or 1.11 but not both.

Jquery mobile panel with google maps as content does not hide content

I have this problem, which had been working in previous versions, and I dont know what happend since its not working now.
The problem is that only the header and footer in jqm is "sliding/showing".
I've included the problem visually:
My code is:
<!DOCTYPE html>
<html>
<head>
<title>AP</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="js/jqm/jquery.mobile-1.4.3.min.css" rel="stylesheet" />
<style>
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
</head>
<body id="body">
<!-- LOGIN -->
<div data-role="page" id="loginPage" data-theme="a">
<!-- HEADER -->
<div data-role="header" data-theme="b">
<h3>AP</h3>
</div>
<!-- CONTENT -->
<div data-role="content">
<form id="check-user" class="ui-body ui-body-a ui-corner-all">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Username:</label>
<input type="text" value="" name="username" id="username" />
</div>
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" value="" name="password" id="password" />
</div>
<input type="button" data-theme="b" name="submit" id="loginSubmit" value="Log ind">
</fieldset>
</form>
</div>
<!-- FOOTER -->
<div data-theme="b" data-role="footer" data-position="fixed">
<h3>Version KICK-ASS</h3>
</div>
</div>
<!-- MAP -->
<div data-role="page" id="mapPage">
<!-- PANEL LEFT -->
<div data-role="panel" id="mapPanel">
<ul data-role="listview" data-inset="true" id="mapPanelList"></ul>
</div>
<!-- HEADER -->
<div data-theme="b" data-role="header" id="mapHeader">
Menu
<h3 id="headerTitle"></h3>
<a id="logout" data-icon="delete">Exit</a>
</div>
<!-- CONTENT -->
<div data-role="content" style="margin: 0; padding: 0;" id="mapContent">
<div id="map" class="ui-panel-wrapper"></div>
</div>
<!-- FOOTER -->
<div data-theme="b" data-role="footer" data-position="fixed">
<h3>Version KICK-ASS</h3>
</div>
</div>
<script type="text/javascript" charset="utf-8" src="js/googlemaps3.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-migrate-1.2.1.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="js/jqm/jquery.mobile-1.4.3.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="georescue.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</body>
</html>
Same code works without googlemaps..
Any help appreciated.

Jquery mobile tab not working when link to other page

Hi I am new for jquery mobile.I gt two page in my application. Please c the code below
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Smart Realtor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/smartrealtor-theme.css" />
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.4.2.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.icons-1.4.2.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<!-- <script src="js/jquery.js"></script>-->
<!-- <script src="js/globalsetting.js"></script>-->
<!-- <script src="js/jquery.mobile-1.4.2.min.js"></script>-->
<!-- <script src="js/cordova.js"></script>
<script src="js/Calendar.js"></script>
<script src="js/Message.js"></script>-->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" data-title="Panel fixed positioning" class=" signupBG" id="landingPage">
<div data-role="content">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<div id="logoCenter">
<img src="images/smartrealtor_logo_large#x2.png" alt="" width="300" height="310" class="scale-with-grid" />
</div>
<div class="ui-grid-a">
<!-- Click here to register page -->
<a href="register.html" class="ui-btn ui-corner-all ui-shadow" >Register</a>
</div>
<div class="ui-grid-a">
Sign in
</div>
</div>
<!-- /login/register -->
</div>
</div>
<!-- Login Screen -->
<!-- /login screen -->
<!-- Forget Password Screen -->
<!-- /forget pass screen -->
<!-- Register Screen -->
<!-- /register screen -->
<!-- Team Leader Register Screen -->
<!-- /register screen -->
</body>
</html>
Register.html
<div data-role="page" data-title="Panel fixed positioning" class=" signupBG" id="loginPage">
<div data-role="content">
<div data-role="tabs" id="tabs" class="transparentBg">
<div data-role="navbar" data-grid="a" class="topNav topfilter">
<ul id="navfilter">
<li>Agent</li>
<li>Team Leader</li>
</ul>
</div>
<div id="nAgent" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="nTeamleader">
<ul data-role="listview" data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>
</div>
</div>
My tabpanel in inside the register.html . But it not working nw. The tab panel doesn't refresh the content. anyone gt solution?

Jquery Mobile Ajax Issue

I'm have a Jquery Mobile page where I'm using AJAX to pull data into listviews that are inside of collapsible widgets. In many cases, I have 10+ collapsible widgets each containing a listview.
When I open a collapsible widget, the AJAX function is called and the data is pulled in. This works just fine.
However, I'm experiencing a problem when I open 2 collapsible widgets without closing one of them:
1) When the second collapsible widget is opened, the AJAX function fires for both widgets. I don't want the AJAX function to fire on the first-opened widget.
Thanks in advance for your help. My code is below.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Edit Kits</title>
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" />
<link rel="stylesheet" href="themes/Auer.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>
<div data-role="page" id="editkits" class="type-interior">
<div data-role="header">
<h1>Edit Kits</h1>
Home
<a data-rel="back" data-icon="back" class="ui-btn-right">Back</a>
<div class="header-sub">
<div class="ui-bar center-text"><img src="images/logo.png" id="logo" alt="spi_Cname"/></div>
</div>
<div data-role="navbar" class="navbar">
<ul>
<li>TOC</li>
<!-- SPI_HTML_ShowSearchMenu -->
<li>Search</li>
<!-- SPI_HTML_ShowSearchMenu -->
<!-- SPI_HTML_AllowKits -->
<li>Kits</li>
<!-- SPI_HTML_AllowKits -->
<!-- SPI_HTML_AllowSales -->
<li>SPI_SalesMenuText</li>
<!-- SPI_HTML_AllowSales -->
<!-- SPI_HTML_AllowOrderPlacement -->
<li>Cart</li>
<!-- SPI_HTML_AllowOrderPlacement -->
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<!-- SPI_No_Kit_Message -->
<div class="ui-grid-a">
<div class="ui-bar ui-bar-e center-text">
<br>
<h2>You have no saved Kits.</h2>
<p>To create a kit, add products to your shopping
cart and click "save as kit" on the menu at the bottom of your display.</p>
</div>
</div>
<!-- SPI_No_Kit_Message -->
<!-- SPI_HTML_HdrOnlyKit -->
<div data-role="collapsible" data-collapsed="true" data-content-theme="d">
<h3 id="SPI_KitId" class="kit">SPI_KitName SPI_KitNote</h3>
<div class="kitid"></div>
</div>
<!-- SPI_HTML_HdrOnlyKit -->
<!-- SPI_HTML_Kit -->
<form name="SPI_KitFormName" method="post" action="WebCatPageServer.exe">
<input name="Action" type="hidden" value="Not_Set" />
<input name="IsAjax" type="hidden" value="Yes" />
<input name="KitId" type="hidden" value="SPI_KitId" />
<input name="SearchTerm" type="hidden" value="Not_Set" />
<ul data-role="listview" id="list" data-inset="true" data-split-icon="delete" data-split-theme="d">
<!-- SPI_HTML_Kit_Product1 -->
<li><a href="javascript:document.ShoppingCart.Action.value='ItemLookup';document.ShoppingCart.SearchTerm.value='SPI_CartLookupPartNum';document.ShoppingCart.submit();">
<!-- SPI_KitProdItemNum -->
<h2>SPI_KitProdPartNum</h2>
<!-- SPI_KitProdItemNum -->
<p class="description">SPI_KitProdDesc</p>
<p><input type="text" name="SPI_KitOrdQtyFieldName" onBlur="clickrecall(this,'0')" tabindex="SPI_KitOrdQtyTabIndex" value="SPI_KitProdQty" onfocus="document.SPI_KitFormName.Action.value='Recalc_Kit';SPI_KitOrdQtyFieldName.select()"/></p>
<p>Unit Price: SPI_KitProdPrice</p>
<p>Ext. Price: <span class="price">SPI_KitProdExtPrice</span></p>
</a>
<!-- SPI_HTML_KitsAllowEdit -->
Delete
<!-- SPI_HTML_KitsAllowEdit -->
</li>
<!-- SPI_HTML_Kit_Product1 -->
<!-- SPI_HTML_Kit_Product2 -->
<li><a href="javascript:document.ShoppingCart.Action.value='ItemLookup';document.ShoppingCart.SearchTerm.value='SPI_CartLookupPartNum';document.ShoppingCart.submit();">
<!-- SPI_KitProdItemNum -->
<h2>SPI_KitProdPartNum</h2>
<!-- SPI_KitProdItemNum -->
<p class="description">SPI_KitProdDesc</p>
<p><input type="text" name="SPI_KitOrdQtyFieldName" onBlur="clickrecall(this,'0')" tabindex="SPI_KitOrdQtyTabIndex" value="SPI_KitProdQty" onfocus="document.SPI_KitFormName.Action.value='Recalc_Kit';SPI_KitOrdQtyFieldName.select()"/></p>
<p>Unit Price: SPI_KitProdPrice</p>
<p>Ext. Price: <span class="price">SPI_KitProdExtPrice</span></p>
</a>
<!-- SPI_HTML_KitsAllowEdit -->
Delete
<!-- SPI_HTML_KitsAllowEdit -->
</li>
<!-- SPI_HTML_Kit_Product2 -->
</ul>
<div data-role="controlgroup" data-type="horizontal">
Delete Kit
<!-- SPI_HTML_KitsAllowEdit -->
Save Kit
<!-- SPI_HTML_KitsAllowEdit -->
Clear Qty's
<!-- SPI_HTML_AllowOrderPlacement -->
Add to Cart
<!-- SPI_HTML_AllowOrderPlacement -->
</div>
</form>
<!-- SPI_HTML_Kit -->
</div><!-- /content -->
<div data-role="footer" id="footer" data-position="fixed">
<h4>© Auer Steel 2011</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Jquery
$("h3.kit").live('click', function () {
$(".kitid").empty().html('<img src="images/load.gif" />');
var kitid = this.id;
var url = 'http://68.188.40.182/WebCat/WebCatPageServer.exe?AJAX&Action=Open_Kit&KitID=' + kitid;
$.ajax({
url: url,
dataType: "html",
cache: false,
success: ajaxCallDone,
complete: function () {},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error type :" + errorThrown + " Error message :" + XMLHttpRequest.responseXML + " textStatus: " + textStatus);
}
});
function ajaxCallDone(data) {
$(".kitid").html(data);
try {
$('ul#list').listview('refresh');
} catch (e) {
$('ul#list').listview();
}
jQuery('#editkits').page("destroy").page();
}
});

Your selectors are always global, i.e. $(".kitid") will always select ALL elements with a class of kitid.
What you want is to limit the scope of your ajax to the currently clicked item, passed by the this property (you already get it's id but that's about it!).
You need to use that to then only clear/ajax/update the one content the user clicked on, instead of acting on all of them...

Categories

Resources