When the save button is clicked I am trying to display values from a textbox and button in a grid. I have written the html part and I have tried out something by myself. When the save button is clicked the values are not displayed in the table grid.
<!DOCTYPE html>
<html>
<head>
<title>Header Details</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="font.css" rel="stylesheet" />
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="clear">
<h2 style="text-align: center"><b>Header Details</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<div class="row">
<div class="input-group">
<h1> <b>Enter the Header:</b>
<input type="text" name="Header" ng-model="header"><br></h1>
</div>
</div>
<p>
</p>
<div class="row">
<div class="input-group">
<h1>
<b>Status:</b>
<select name="status" id="status" ng-model="status">
<option value="" selected="selected">(Select the status)</option>
<option value="001">0</option>
<option value="002">1</option>
</select>
</h1>
</div>
</div>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
</div>
<div ng-app="myApp" ng-controller="headerCtrl">
<table class="table table-bordered" ;style="width:40%;margin-left:400px">
<tr>
<th>Header</th>
<th>Status</th>
</tr>
<tr ng-repeat="data in headerData.Result">
<td>{{data.Header}}</td>
<td>{{data.Status}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('headerCtrl', function ($scope) {
$scope.Save = function () {
$scope.headerData = {
Result: [{
"Header": $scope.header, "Status": $scope.status,
},
]
}
};
});
</script>
</body>
</html>
There are few issues,
(i) Have only one ng-app and ng-controller common for both divs
(ii) There is no angular reference with your code
(iii) You need to push the values to the array on Save function,
$scope.headerData.Result.push({
"Header": $scope.header,
"Status": $scope.status
});
DEMO
var app = angular.module('myApp', []);
app.controller('headerCtrl', function($scope) {
$scope.headerData = {};
$scope.headerData.Result = [];
$scope.clear = function(){
$scope.headerData.Result = [];
}
$scope.Save = function() {
$scope.headerData.Result.push({
"Header": $scope.header,
"Status": $scope.status
});
};
});
<!DOCTYPE html>
<html>
<head>
<title>Header Details</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<link href="font.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="headerCtrl">
<h2 style="text-align: center"><b>Header Details</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<div class="row">
<div class="input-group">
<h1> <b>Enter the Header:</b>
<input type="text" name="Header" ng-model="header"><br></h1>
</div>
</div>
<p>
</p>
<div class="row">
<div class="input-group">
<h1>
<b>Status:</b>
<select name="status" id="status" ng-model="status">
<option value="" selected="selected">(Select the status)</option>
<option value="001">0</option>
<option value="002">1</option>
</select>
</h1>
</div>
</div>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
<table class="table table-bordered" ;style="width:40%;margin-left:400px">
<tr>
<th>Header</th>
<th>Status</th>
</tr>
<tr ng-repeat="data in headerData.Result">
<td>{{data.Header}}</td>
<td>{{data.Status}}</td>
</tr>
</table>
You have got a number of issues in your code.
No Angular file. Please add an angular file as per your version.
You have defined two controllers one of them, clear, is not defined.
You have declared ng-app="myApp" at two places, which is a very very bad practice.
You are using Results without quotes in your scope. It's a json object, good to use quotes for key values.
I have rectified all the errors and following is your final code. Before copying, go through the changes and understand them.
<div class="container" ng-app="myApp" ng-controller="headerCtrl">
<h2 style="text-align: center"><b>Header Details</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<div class="row">
<div class="input-group">
<h1> <b>Enter the Header:</b>
<input type="text" name="Header" ng-model="header"><br></h1>
</div>
</div>
<p>
</p>
<div class="row">
<div class="input-group">
<h1>
<b>Status:</b>
<select name="status" id="status" ng-model="status">
<option value="" selected="selected">(Select the status)</option>
<option value="001">0</option>
<option value="002">1</option>
</select>
</h1>
</div>
</div>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div>
<table class="table table-bordered" ;style="width:40%;margin-left:400px">
<tr>
<th>Header</th>
<th>Status</th>
</tr>
<tr ng-repeat="data in headerData.Result">
<td>{{data.Header}}</td>
<td>{{data.Status}}</td>
</tr>
</table>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('headerCtrl', function ($scope) {
$scope.Save = function () {
$scope.headerData = {
"Result": [{
"Header": $scope.header, "Status": $scope.status,
},
]
}
};
$scope.clear = function(){
$scope.headerData = {};
$scope.header = "";
$scope.status = "";
}
});
</script>
Related
I'm developing a web-audio player, and I'm new to Bootstrap. At the moment, my player looks like this:
This is my source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wavesurfer - Intro</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div class="container-fluid">
<!-- Waveform -->
<div id="waveform"></div>
<!-- Progress -->
<div class="row">
<div id="progress" class="col-md-6">Loading audio...</div>
<div id="duration" class="col-md-6" style="text-align: right;"></div>
</div>
<br>
<div class="row">
<!-- Backward 5 s -->
<button id="bwd" class="col-md-3" type="button" disabled="disabled">
<i class="fa fa-backward"></i>
<div>Backward 5 s</div>
</button>
<!-- Play/Pause -->
<button id="btn-play-pause" class="btn btn-primary col-md-4" type="button" disabled="disabled">
<i id="icon-play-pause" class="fa fa-play"></i>
<div id="text-play-pause">Play</div>
</button>
<!-- Forward 5 s -->
<button id="fwd" class="col-md-3" type="button" disabled="disabled">
<i class="fa fa-forward"></i>
<div>Forward 5 s</div>
</button>
<!-- Stop -->
<button id="btn-stop" class="col-md-2" type="button" value="Stop" disabled="disabled">
<i class="fa fa-stop"></i>
<div>Stop</div>
</button>
</div>
<br>
<div class="row">
<div class="col-md-6">
<!-- Audio rate -->
<i class="fas fa-tachometer-alt"></i>
<input id="audio-rate" type="range" min="0.25" max="2" value="1" step="0.25">
<div id="audio-rate_value" style="display: inline;">1x</div>
</div>
<div class="col-md-6" style="text-align: right;">
<!-- Volume -->
<i id="icon-volume" class="fas fa-volume-down"></i>
<input id="volume" type="range" min="0" max="2" value="1" step="0.1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<!-- Loop -->
<button id="loop" class="btn btn-outline-primary">Loop</button>
</div>
<div class="col-md-6" style="text-align: right;">
<!-- Low-pass filter -->
<button id="lowpass-filter" class="btn btn-outline-primary">Low-pass filter</button>
</div>
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>
I've stumbled upon several issues.
The volume icon - It changes depending on the volume level, but in a "bad way":
How can I keep it fixed?
Shrinking the screen width - This is what happens when I shrink my window (I've drawn red rectangles to make the problem clearer):
How can I keep two elements inside the same row?
EDIT #1 - This is the code for changing the volume icon:
var controls = {
...
volume: document.getElementById("volume"),
...
}
controls.volume.addEventListener("input", function () {
let volume = controls.volume.value;
wavesurfer.setVolume(volume);
// Change volume icon
document.getElementById("icon-volume").classList = "";
if(volume == 0){
document.getElementById("icon-volume").classList = "fas fa-volume-off";
}
else if (volume > 0 && volume <= 1){
document.getElementById("icon-volume").classList = "fas fa-volume-down";
}
else{
document.getElementById("icon-volume").classList = "fas fa-volume-up";
}
});
I eventually managed to solve Issue #2 by adding the width attribute to the icon tag style:
<i id="icon-volume" class="fas fa-volume-down" style="text-align: justify; width: 18px;"></i>
I want such format using bootstrap row and col.
I have tried many ways...below is the last code
<div class="row">
<form name="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div>
<label><strong>{{Heading}}}</strong></label>
<Textarea>
<span ng-bind=""></span>
</Textarea>
</div>
</form>
</div>
Please Suggest
https://codepen.io/Dooomel/pen/OJVgpzp
<div class="container">
<div class="row">
<div class="col-sm-6">
th1
</div>
<div class="col-sm-6">
th2
</div>
</div>
<div class="row">
<div class="col-sm-6">
th3
</div>
<div class="col-sm-6">
th4
</div>
</div>
</div>
Btw. You don't need to set class for every breakpoint, col-sm-6 is passed to md and lg
Please checkout this.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<body ng-app="myApp" ng-controller="myCtrl" class="row">
<form name="" class="col-6" ng-repeat="x in [1,2,3,4,5, 6]">
<div><b>{{Heading}}</b></div>
<Textarea></Textarea>
</form>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.Heading='Place holder';
});
</script>
</body>
</html>
which is used to listing book and when user clicks on "Edit" button need to show book details in model-fade form.
Am tried but new values are not showing in model.
var rootApp = angular.module('profileApp', ['bookList','EditBook']);
// menu bar items
var firstApp = angular.module('bookList', []);
firstApp.controller('bookListController',function($scope, $http,productService) {
//here am getting data from service
var obj1 = {Book_Title:"book1",Book_Category: "Comdedy"};
var obj2 = {Book_Title:"book2",Book_Category: "story"};
var totalArray=[];
totalArray.push(obj1);
totalArray.push(obj2);
$scope.UserBookList = totalArray;
//funcion call get from html directly
$scope.bookItemEditIndex = function(idx){
$("#EditBookModal").modal();
$scope.temp = $scope.UserBookList[idx];
productService.addProduct($scope.temp);
console.log( $scope.temp);
console.log( productService.getProducts()[0]);
}
});
//Edit book
var secondApp = angular.module('EditBook', []);
secondApp.controller('EditBookController', function($scope,productService) {
var products = productService.getProducts()[0];
console.log(products);
$scope.NGE_bookTitle = $scope.products;
});
rootApp.service('productService', function() {
var productList = [];
var addProduct = function(newObj) {
productList.push(newObj);
};
var getProducts = function(){
return productList;
};
return {
addProduct: addProduct,
getProducts: getProducts
};
});
<!DOCTYPE html>
<html lang="en" ng-app="profileApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Boostrap Validator</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"> </script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<style type="text/css">
.navbar{
}
.modal-dialog {
width: 100%;
height: auto;
padding: 0;
margin:0;
}
#mid-containeer{
border: 1px #e4e4e4 solid;
height: 10%;
}
#footer-containeer{
height: 100px;
width:100%;
}
</style>
<script type="text/javascript" src="indexservice.js"></script>
</head>
<body>
<!-- user book list -->
<div class="container">
<h1 class="page-header">Book Details </h1>
<p>The table having your book deails</p>
<div ng-controller="bookListController" id="bookListControllerID">
<table class="table table-bordered table table-striped css-serial">
<thead>
<tr>
<th>Book Name</th>
<th>Edit</th>
</tr>
</thead>
<tbody ng-repeat="book in UserBookList">
<tr>
<td> {{book.Book_Title}} </td>
<td><a class="btn mini blue-stripe btn-info" href="#" data-toggle="modal" data-target="" ng-click="bookItemEditIndex($index)">Edit</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- edit book module -->
<div class="modal fade " id="EditBookModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true" data-backdrop="true">
<div ng-controller="EditBookController" id="EditBookControllerID">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title">Book</h5>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="container" style="padding: 0px;">
<h1 class="page-header">Book Profile</h1>
<div class="row">
<!-- left column -->
<!-- edit form column -->
<div class="col-md-8 col-sm-6 col-xs-12 personal-info">
<div class="alert alert-info alert-dismissable">
<a class="panel-close close" data-dismiss="alert">×</a>
<i class="fa fa-coffee"></i>
You can edit your <strong>Book</strong> here.
</div>
<h3>Edit book info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-3 control-label">Book title:</label>
<div class="col-lg-8">
<input class="form-control" value="jahn" type="text" name="E_bookTitle" ng-model="NGE_bookTitle">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input class="btn btn-primary" value="Save" type="submit" >
<span></span>
<input class="btn btn-default" value="Cancel" type="reset">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
thanks advance.
This is what my table looks like right now:
I want the checkbox to be on the right of "CMPT 310" instead of below it. I can't simply make the text a label for the checkbox because when I click on the text I want a description of the course to pop up (ie I don't want to checkbox to be checked). Here is how I'm implementing the problem cell in the table right now (using bootstrap):
<td>
<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</div>
</td>
And here is the rest of the page for reference:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12"><img src="images/title.png" class="img-responsive"></div>
</div>
<div class="row">
<h4><strong>Table I: Computing Science Concentrations<strong></h4>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Artificial Intelligence</th>
<th>Computer Graphics</th>
<th>Computing Systems</th>
<th>Information Systems</th>
<th>Programming Languages and Software</th>
<th>Theoretical Computing Science</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</div>
</td>
<td>CMPT 361</td>
<td><strong>CMPT 300</strong></td>
<td>CMPT 301</td>
<td>CMPT 373</td>
<td><strong>CMPT 307</strong></td>
</tr>
</tbody>
</table>
</div>
<!-- START MODALS -->
<!-- CMPT 310-->
<div class="modal fade" id="CMPT310" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img class="img-responsive" src="images/cmpt310.png">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks
Set the p and checkbox inside the td element to be displayed inline.
td p,
td .checkbox {
display: inline;
}
td .checkbox {
margin-left: 5px;
margin-top: 0;
position: absolute;
}
td p,
td .checkbox {
display: inline;
}
td .checkbox {
margin-left: 5px;
margin-top: 0;
position: absolute;
}
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="images/title.png" class="img-responsive">
</div>
</div>
<div class="row">
<h4><strong>Table I: Computing Science Concentrations<strong></h4>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Artificial Intelligence</th>
<th>Computer Graphics</th>
<th>Computing Systems</th>
<th>Information Systems</th>
<th>Programming Languages and Software</th>
<th>Theoretical Computing Science</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</div>
</td>
<td>CMPT 361</td>
<td><strong>CMPT 300</strong>
</td>
<td>CMPT 301</td>
<td>CMPT 373</td>
<td><strong>CMPT 307</strong>
</td>
</tr>
</tbody>
</table>
</div>
<!-- START MODALS -->
<!-- CMPT 310-->
<div class="modal fade" id="CMPT310" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img class="img-responsive" src="images/cmpt310.png">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
I am attending to passing the query string values when mobile page change event and retrieved the values as i expected. But When i Click the Back button go to the previous page at the time current page and previous page fired simultaneously. How to over come this issue
Here is my code:
page1.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Client View</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).bind('pageinit','div:jqmData(role="page")', function(){
$("#searchbutton").on('click',function(){
///alert("working");
var searchvalue = $("[name='clientsearch']").val();
var searchbyvalue = $("#select-choice-searchby").val();
var statusvalue = $("#select-choice-status").val();
if(searchvalue.length!=0){
$.mobile.changePage(
'accountlist.html',
{
//dataUrl : "accountlist.html?searchvalue="+searchvalue&"searchbyvalue="+searchbyvalue&"statusvalue="+statusvalue ,
data : { 'searchvalue' : searchvalue,'searchbyvalue':searchbyvalue,'statusvalue':statusvalue },
reloadPage : false,
changeHash : true,
});
}
else{
$( "#confirm" ).popup( "open" );
}
});
});
</script>
</head>
<body>
<div data-role="page" id="client" >
<script type="text/javascript">
$(document).on("pageshow", function(){
var prevSelection = "tab1";
$("#navbar ul li").on("click",function(){
var newSelection = $(this).children("a").attr("data-tab-class");
$("."+prevSelection).addClass("ui-screen-hidden");
$("."+newSelection).removeClass("ui-screen-hidden");
prevSelection = newSelection;
});
});
</script>
<div data-role="header" data-theme="b" data-position="fixed" data-id="persistantFooter">
Back
<h1>Client View</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain" id="searchbox">
<input type="search" name="clientsearch" value="" data-inline="true" data-mini="true"/>
<a href="#" data-role="button" data-theme="b" data-inline="true" id="searchbutton" data-ajax="false" data-mini="true" >Search</a>
</div>
<div data-role="fieldcontain" >
<label for="select-choice-searchby" class="select searchby" data-inline="true" style="text-align:right">Search By:</label>
<select name="select-choice-searchby" id="select-choice-searchby" data-mini="true" data-role="none" style="margin-left:30px;border: 2px solid #999;border-radius:5px; width:60%;background:#D3D3D3; font-size: 16px;
height: 28px;">
<option value="account">Account</option>
<option value="customhouseholds">Custom Households </option>
<option value="roahouseholds">ROA Households</option>
</select>
</div>
<div data-role="fieldcontain" >
<label for="select-choice-status" class="select status" data-inline="true" style="text-align:right!important" >Status:</label>
<select name="select-choice-status" id="select-choice-status" data-mini="true" data-role="none" style="margin-left:58px;border: 2px solid #999;border-radius:5px; width:60%;background:#D3D3D3; font-size: 16px;height: 28px;">
<option value="open">Open</option>
<option value="closed">Closed </option>
<option value="all">All</option>
</select>
</div>
<div data-role="navbar" id="navbar">
<ul>
<li>Favorites</li>
<li>Recents</li>
</ul>
</div>
<div class="tab-content">
<div class="tab1">
<div data-demo-html="true" id="a" class="content_div">
<ul data-role="listview" data-inset="true">
<li >
<a href="#">
<h3 class="ui-li-heading">Client Name</h3>
<p class="ui-li-desc">Account</p></a></li>
<li>
<a href="#">
<h3 class="ui-li-heading">HouseHold Name</h3>
<p class="ui-li-desc">Custom HouseHold</p></a></li>
<li>
<a href="#">
<h3 class="ui-li-heading">HouseHold Name</h3>
<p class="ui-li-desc">Custom HouseHold</p></a></li>
</ul>
</div><!--/demo-html -->
</div>
<div class="tab2 ui-screen-hidden">
<div data-demo-html="true" id="a" class="content_div">
<ul data-role="listview" data-inset="true">
<li >
<a href="#">
<h3 class="ui-li-heading">Client Name</h3>
<p class="ui-li-desc">Account</p></a></li>
<li>
<a href="#">
<h3 class="ui-li-heading">HouseHold Name</h3>
<p class="ui-li-desc">Custom HouseHold</p></a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="confirm" data-role="popup" data-theme="none">
<p id="question">Please Give Some Value</p>
<a id="yes" data-role="button" data-mini="true" data-shadow="false" data- transition="flip" data-theme="b" data-rel="back">Ok</a>
</div><!-- /popup -->
</div>
</body>
</html>
page2.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Account view</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="accountlist" data-prefetch>
<script src="js/sai.js"></script>
<div data-role="header" data-theme="b">
Back
<h3>Account View</h3>
</div>
<div data-role="content">
<ul id="list" data-role="listview" >
</ul>
</div> <!--content-->
</div><!--page-->
Change the jquery function to this and try
$("#navbar ul li").on("click","a",function(){
var newSelection = $(this).attr("data-tab-class");
$("."+prevSelection).addClass("ui-screen-hidden");
$("."+newSelection).removeClass("ui-screen-hidden");
prevSelection = newSelection;
});