Jquery Mobile Ajax Issue - javascript

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...

Related

Jquery Mobile page Anchor on page working inconsistently

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>

Ajax request doesn't work when called inside Bootstrap Navbar

So I'm learning JS/Ajax and I wanted to try to load html content into my page with the click of a button. Everything works as long as I call the function outside of my Navbar and I cant figure out why?
I'm trying to load html content from "bestellung.html" into a div with the id of "main-well". Everything works fine except when I want to call the ladeBestellung() function from within my Navbar... the content gets loaded but is instantly overwritten and disappears... why??
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QR2BUY Bestellübersicht</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Eigene Styles -->
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container"><!-- Haupt-Container -->
<!-- Haupt-Navigationsleiste -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><!-- Anfang Navigationsleiste-Header -->
<!-- Button für die mobile Ansicht -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Navigation aufklappen</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-qrcode"></span> QR2BUY
</a>
</div><!-- Ende Navigationsleiste-Header -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Hilfe</li>
<li class="dropdown">
Konto <span class="caret"></span>
<ul class="dropdown-menu">
<li>Einstellungen</li>
<li>Bestellhistorie</li>
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right"><!-- Anfang Suchfeld -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Bestell-Nr. eingeben...">
<div class="input-group-btn">
<button class="btn btn-default" onClick="ladeBestellung()"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form><!-- Ende Suchfeld -->
</div>
</div>
</nav><!-- Ende Haupt-Navigationsleiste -->
<div class="row"><!-- Start Main-Row -->
<div class="col-xs-12"><!-- Start Main Col -->
<div class="well" id="main-well">
</div><!-- Ende Well -->
</div><!-- Ende Main-Col -->
</div><!-- Ende Main-Row -->
</div><!-- Ende Haupt-Container -->
<footer class="footer"><!-- Anfang Footer -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<p class="text-center">
<span>© 2016 QR2BUY</span> - Impressum - Kontakt
<p>
</div>
</div>
</div><!-- Ende Haupt-Container -->
</footer><!-- Ende Footer -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
document.getElementById('main-well').innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'bestellung.html');
function ladeBestellung() {
xhr.send();
}
</script>
</body>
</html>

Default type of <button> is "submit" which reloads the page and overrides the javascript-generated html - so the solution is to use <button type="button"></button>

Angular Injector error

I keep getting an error trying to inject angular into my application. I get an error that says Error: $injector:modulerr Module Error. Below is my code:
admin-index.html:
<!DOCTYPE html>
<html lang="en" ng-app="app" class="no-js" ng-jq> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>AdminLTE 2 | Dashboard</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- Bootstrap 3.3.2 -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- Font Awesome Icons -->
<link href="../components/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<!-- Ionicons -->
<link href="../bower_components/ionicons/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
<!-- Theme style -->
<link href="../bower_components/adminlte/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css"/>
<!-- AdminLTE Skins. We have chosen the skin-blue for this starter
page. However, you can choose any other skin. Make sure you
apply the skin class to the body tag so the changes take effect.
-->
<link href="../bower_components/adminlte/dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css"/>
<!--<link rel="stylesheet" href="../bower_components/html5-boilerplate/css/normalize.css">-->
<!--<link rel="stylesheet" href="../bower_components/html5-boilerplate/css/main.css">-->
<link rel="stylesheet" href="admin-app.css">
<link rel="stylesheet" href="reportview/report-view.css">
<script src="../bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<script>
var locale = 'zh-CN';
document.write('<script src="../bower_components/angular-i18n/angular-locale_'+locale+'.js"><\/script>');
</script>
<![endif]-->
</head>
<body class="skin-blue">
<div class="wrapper">
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a ng-click="$event.stopPropagation()" class="logo"><b>ZAN Admin</b></a>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="left-side main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- search form (Optional) -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- Sidebar Menu -->
<ul class="sidebar-menu">
<li class="header">Header</li>
<!-- Optionally, you can add icons to the links -->
<li class="treeview">
<i class="fa fa-circle-o"></i>Report Views<i class="fa fa-angle-left pull-right"></i>
<ul class="treeview-menu" ng-cloak>
<li ng-repeat="dsm in dsmeta">
<a ng-href="admin-index.html#/admin/reportview/{{dsm.name}}">{{dsm.name}}</a>
</li>
</ul>
</li>
</ul><!-- /.sidebar-menu -->
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" ng-view>
<!-- Content Header (Page header) -->
</div><!-- /.content-wrapper -->
<!-- Main Footer -->
<footer class="main-footer" ng-controller="AdminSyncConsole">
<!-- To the right -->
<!-- <div class="pull-right hidden-xs">
Anything you want
</div> -->
<!-- Default to the left -->
<!-- <strong>Copyright © 2015 Company.</strong> All rights reserved. -->
<!-- Apply any bg-* class to to the info-box to color it -->
<div class="info-box bg-green">
<span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Current Sync Status</span>
<span class="info-box-number">{{syncStatus}}</span>
<!-- The progress section is optional -->
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div><!-- /.info-box-content -->
</div><!-- /.info-box -->
<div class="box box-solid box-default">
<div class="box-header">
<h3 class="box-title">Sync Sessions</h3>
</div>
<div class="box box-default collapsed-box">
<div class="box-header with-border">
<h3 class="box-title">Expandable</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div class="box-body">
The body of the box
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
</footer>
</div><!-- ./wrapper -->
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 2.1.3 -->
<script src="../bower_components/adminlte/plugins/jQuery/jQuery-2.1.3.min.js"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../bower_components/adminlte/plugins/fastclick/fastclick.min.js"></script>
<!-- build:js ../minjs/angular.js -->
<!-- angular dependencies -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/angular-translate/angular-translate.min.js"></script>
<script src="../bower_components/angular-translate-loader-partial/angular-translate-loader-partial.min.js"></script>
<script src="../bower_components/angular-touch/angular-touch.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
<!-- endbuild -->
<!-- AdminLTE App -->
<script src="../bower_components/adminlte/dist/js/app.js" type="text/javascript"></script>
<script src="../bower_components/angular-translate/angular-translate.js"></script>
<script src="../bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<!-- build:js ../minjs/z-ui.js -->
<script src="../js/z-ui.js"></script>
<!-- endbuild -->
<script src="../bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="reportview/reportview.js"></script>
<script src="../translation/translate.js"></script>
<script src="admin-app.js"></script>
<script src="../components/util/report-view-service.js"></script>
</body>
</html>
admin-app.js:
'use strict';
var baseSyncUrl = "../api/rest/{{path.version}}/syncsessions";
var getSyncSessionsReq = {method: "GET", url: baseSyncUrl, params: {targetSystemType:{}, pageSize: ""}, path: {version: "v1"}};
// Declare app level module which depends on views, and components
var app = angular.module('app', ['z.components']);
app.controller('AdminSyncConsole', ['$scope', '$http', 'RESTCaller', function ($scope, $http, RESTCaller) {
$scope.syncStatus = "Completed";
$scope.syncSessions;
//REST API to get the sync sessions
$scope.getSyncSessions = function() {
var req = getSyncSessionsReq;
var targetSystem = {'id': '1', 'type': 'SPOTLIGHT', 'description': 'Spotlight'};
req.params.targetSystemType = targetSystem;
//Page size is not necessarily required
// req.params.pageSize =
var data = RESTCaller.getConfig(req);
data.then(function(result){
if(result) {
console.log("Result: ", result);
}
});
}
//Getting the sync sessions
console.log("Hi");
$scope.syncSessions = $scope.getSyncSessions();
//Call REST API to get the sync status
}]);
I'm confused as to why this is happening. I don't have any other problems injecting angular.min.js into my other files, and I can't seem to pinpoint where the error is coming from because it just complains about angular.min.js. I have checked and my ng-app seems to be correct and z.components comes from another module that comes from a file that I have already included called ../js/z-ui.js. RESTCaller also comes from z-ui.js file. Any help would be appreciated. Thanks!

I think that you should retrieve this module not create but I don't know what you do
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
Additionally:
Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module
As you said:
I have checked and my ng-app seems to be correct and z.components comes from another module that comes from a file that I have already included called ../js/z-ui.js.
Do you use all of these files?
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/angular-translate/angular-translate.min.js"></script>
<script src="../bower_components/angular-translate-loader-partial/angular-translate-loader-partial.min.js"></script>
<script src="../bower_components/angular-touch/angular-touch.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>

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?

Prevent ALL default animations/actions

OK, so I have a basic jQuery Mobile page.
What I need is : When user clicks on an element (e.g. the slider or a button)
No animation should show
No "action" should be enabled (like the slider moving etc)
No colour changes should occur, like the button changing on hover
<!-- New Website #1 -->
<!DOCTYPE html>
<html style='min-height:0px;'>
<head>
<title>Website Title</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile.min.css" />
<link rel="stylesheet" href="custom.css" />
<link rel="stylesheet" href="dev.css" />
</head>
<body id="jqm-website-3539" class="" >
<!-- New Page #1 -->
<div data-role="page" comp-id="jqm-page-2862" id="jqm-page-2862" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >
<!-- New Header #1 -->
<div data-role="header" comp-id="jqm-header-6813" id="jqm-header-6813" class="" data-position="fixed" data-fullscreen="false" data-theme="" >
<h1></h1>
</div>
<!-- / New Header #1 -->
<!-- New Content #1 -->
<div data-role="content" comp-id="jqm-content-7853" id="jqm-content-7853" class="" data-theme="" >
<!-- New Button #1 -->
<div comp-id="jqm-button-6345" >
<a data-role="button" id="jqm-button-6345" class="" data-corners="true" data-icon="" data-iconpos="left" data-iconshadow="true" data-inline="false" data-mini="false" data-shadow="true" data-theme="" href="#" data-transition="">
Button
</a>
</div>
<!-- / New Button #1 -->
<!-- New Navigation Bar #1 -->
<div data-role="navbar" data-position="fixed" id="jqm-navbar-5393" class="" data-iconpos="left" >
<ul comp-id="jqm-navbar-5393" >
<!-- New Navigation Bar Item #1 -->
<li >
<a comp-id="jqm-navbar-item-5974" href="#" id="jqm-navbar-item-5974" class="" data-icon="home" data-theme="" >
One
</a>
</li>
<!-- / New Navigation Bar Item #1 -->
<!-- New Navigation Bar Item #1 -->
<li >
<a comp-id="jqm-navbar-item-5409" href="#" id="jqm-navbar-item-5409" class="" data-icon="plus" data-theme="" >
Two
</a>
</li>
<!-- / New Navigation Bar Item #1 -->
<!-- New Navigation Bar Item #1 -->
<li >
<a comp-id="jqm-navbar-item-925" href="#" id="jqm-navbar-item-925" class="" data-icon="gear" data-theme="" >
Three
</a>
</li>
<!-- / New Navigation Bar Item #1 -->
</ul>
</div>
<!-- / New Navigation Bar #1 -->
<!-- New SearchField #1 -->
<div data-role="fieldcontain" data-controltype="searchinput" comp-id="jqm-input-search-9514" id="jqm-input-search-9514" class="" data-mini="false" data-theme="" >
<input name="" placeholder="" value="" type="search">
</div>
<!-- / New SearchField #1 -->
<!-- New Switch #1 -->
<div data-role="fieldcontain" data-controltype="toggleswitch" comp-id="jqm-input-switch-2499" id="jqm-input-switch-2499" class="" data-highlight="false" data-mini="true" data-theme="" data-track-theme="" >
<select data-role="slider">
<option value="0">
On
</option>
<option value="Off">
Off
</option>
</select>
</div>
<!-- / New Switch #1 -->
<!-- New TextArea #1 -->
<div data-role="fieldcontain" data-controltype="textarea" comp-id="jqm-text-area-8880" id="jqm-text-area-8880" class="" data-mini="false" data-theme="" >
<label>
</label>
<textarea name="" placeholder="" id="jqm-text-area-8880" class="" data-mini="false" data-theme="" ></textarea>
</div>
<!-- / New TextArea #1 -->
</div>
<!-- / New Content #1 -->
</div>
<!-- / New Page #1 -->
<!-- New Page #1 -->
<div data-role="page" comp-id="jqm-page-7022" id="jqm-page-7022" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >
</div>
<!-- / New Page #1 -->
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>
<script src="custom.js"></script>
<script src="dev.js"></script>
</body>
</html>
<!-- / New Website #1 -->
Is this doable? And if so, how?

If you want nothing at all to happen, then just call event.preventDefault on click.
$("#button").click( function (event) {
event.preventDefault();
});
If you still want to perform some function, like linking to a URL, include it in your callback.
$("#button").click( function (event) {
window.location = $(this).attr("href");
event.preventDefault();
});

If you're goal is to "disable" the whole page, you could overlay an (semi-)transparent div:
function disablePage() {
$('body').append($('<div />').css({
width: '100%',
height: '100%',
background: '#fff',
position: 'fixed',
zIndex: 999,
top: 0,
left: 0,
opacity: .2 // or 0 for completely transparent
}));
}

You can use jQuery(':animated') function
$('.btn1').click(function(){
$('.one').animate({'width':'100%'},5000);
});
$('.btn2').click(function(){
$('.two').animate({'width':'100%'},5000);
});
$('.btn3').click(function(){
$('.three').animate({'width':'100%'},5000);
});
$('.all').click(function(){
$(':animated').stop();
});
demo

Categories

Resources