Response title
This is preview!
I would like to convert to the latest version jquerymobile and jquery. But when I changed my page to use the latest jquery, the page looks ugly. That means it does not understand the jquery javascript library.
I checked the log to see if there are any errors but cannot find anything.
Have anyone run into the same problem?
Here is very simple example:
When you first come to the page:
When you click on the address button:
Here is the code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestJquery.aspx.cs" Async="true" Inherits="RateCalc.TestPages.TestJquery" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Carrier Pickup</title>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<meta name="viewport" charset="utf-8" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
readyfunctionRtn();
//======================================Begin of readyfunctionRtn
function readyfunctionRtn() {
//Begin of document.ready function-----------------
$(document).ready(function () {
$("#imgAddress").click(function () {
document.getElementById("divContactPage").style.display = "inline";
document.getElementById("divMainPage").style.display = "none";
});
$("#btnCloseContact").click(function () {
document.getElementById("divContactPage").style.display = "none";
document.getElementById("divMainPage").style.display = "inline";
});
}); //================================End of document.ready function-----------------
} //======================================end of readyfunctionRtn
</script>
</head>
<body id="body" runat="server">
<form id="frmMain" runat="server">
<div data-role="page" id="divMainPage" style="display:inline" runat="server">
<div data-role="header" data-position="inline" data-theme="b" >
<a href="#" data-icon="back" id="hrefBackHome1" data-iconpos="notext" >Back</a>
<h3>Use Latest Jquery</h3>
<a href="#" data-icon="home" id="hrefHome1" data-iconpos="notext" >Home</a>
</div>
<div data-role="content" >
<div data-role="fieldcontain" id="divMainPageErr" runat="server" style="display:none" >
<label id="lbldivMainPageErrorMsg" runat="server" style="font-size: large; font-weight: bold; font-style: normal; color: #FF0000"></label>
</div>
<div id="divContentNextDay" runat="server" style="display:inline">
Please provide a pickup address:
<div data-role="controlgroup">
<label for="txtAddress2"><span class="fieldrequired">*</span>Address 1: <img id="imgAddress" src="../Styles/Images/address_blue-32.png" alt="Retrieve Addresses from Contact" style="display:inline" /></label>
<input type="text" id="txtAddress2" value="" class="required" runat="server" />
</div>
<div data-role="controlgroup">
<label for="txtAddress1">Address 2:</label>
<input type="text" id="txtAddress1" value="" runat="server" />
</div>
<div data-role="controlgroup">
<label for="txtZip5"><span class="fieldrequired">*</span>Zip Code:</label>
<input type="text" id="txtZip5" value="" class="required digits" maxlength="5" runat="server" numeric="integer" title="Please enter your 5-digit ZIP Code" />
</div>
</div>
</div>
</div>
<div data-role="page" id="divContactPage" style="display:none; ">
<div data-role="header" data-position="inline" data-theme="d">
<a href="#" data-icon="delete" id="btnCloseContact" data-iconpos="notext" >Close</a>
<h3>List of Contacts </h3>
</div>
<div data-role="content" data-theme="c" >
<ul id='ulListPO' data-role='listview' data-inset='true' data-dividertheme='b'>
<li>
<a>
<span>Name 1 Name 1 Name 1</span><br />
<span>Address 1 Address 1 Address 1</span><br />
<span>Address 1 Address 1</span><br />
<span>Phone 1 Phone 1</span><br />
</a>
</li>
<li>
<a>
<span>Name 1 Name 1 Name 1</span><br />
<span>Address 1 Address 1 Address 1</span><br />
<span>Address 1 Address 1</span><br />
<span>Phone 1 Phone 1</span><br />
</a>
</li>
<li>
<a>
<span>Name 1 Name 1 Name 1</span><br />
<span>Address 1 Address 1 Address 1</span><br />
<span>Address 1 Address 1</span><br />
<span>Phone 1 Phone 1</span><br />
</a>
</li>
<li>
<a>
<span>Name 1 Name 1 Name 1</span><br />
<span>Address 1 Address 1 Address 1</span><br />
<span>Address 1 Address 1</span><br />
<span>Phone 1 Phone 1</span><br />
</a>
</li>
</ul>
</div>
</div>
</form>
</body>
</html>
Thanks
1
