I have two pages, main and search. On select of "Search name", I am able to redirect to the search page. But by clicking on "view source", I can see only the main page code and not the search page. So apparently the javascript written for the search click event in the search page is not working.
Main page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Content/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>
<title>Main Menu</title>
<script type="text/javascript" charset="utf-8">
function Search_onclick() {
$.mobile.changePage("SearchPage.html");
}
</script>
</head>
<body>
<div data-role="page" id="mainmenu">
<div data-role="main" class="ui-content">
<h2>
Action:</h2>
<ul data-role="listview">
<li><a href="#" onclick="Search_onclick()">Search Name</a></li>
<li><a href="#">Add Name</a></li>
<li><a href="#">Edit Name</a></li>
<li><a href="#">Delete Name</a></li>
</ul>
</div>
</div>
</body>
</html>
Search page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Content/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>
<title>Search Name</title>
<script type="text/javascript" charset="utf-8">
function Search_onclick() {
alert("search");
}
</script>
</head>
<body>
<div data-role="page" id="Searchpage">
<div data-role="main" class="ui-content">
<input type="search" name="search" id="search" placeholder="Search for name...">
<input id="btnsearch" type="button" data-inline="true" value="search" onclick="Search_onclick()">
<a href="mainmenu.html" class="ui-btn">Main Menu</a>
</div>
</div>
</body>
</html>