Bug Tracker

#9243 closed bug (invalid)

Opened May 11, 2011 07:51PM UTC

Closed May 12, 2011 05:04PM UTC

Last modified March 14, 2012 06:13AM UTC

Convert to JqueryMobile -1.0a4.1 and Jquery 1.6.1rc1.js

Reported by: dmta2005@gmail.com Owned by:
Priority: undecided Milestone: 1.next
Component: unfiled Version: 1.6
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Here is very simple example:

When you first come to the page, the page looks fine.

When you click on image address button ($("#imgAddress").click(function ), it displays the list view ver ugly. It works on the older version.

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

Attachments (0)
Change History (3)

Changed May 12, 2011 04:26PM UTC by anonymous comment:1

I found out if you have multiple data-role="page" per page. when you show the second page, that when jquery chokes, it does not display the page nicely according to jquery format.

If I take out one data-role="page", the section looks nice.

Changed May 12, 2011 04:40PM UTC by dmta comment:2

I noticed that the reason the page chokes because I was using

$("#bar").show();

$("#foo").hide();

or

$("#bar").style.display = "inline"

$("#foo").style.display = "none"

It works on jquery.mobile-1.0a2.min.js and jquery-1.4.4.min.js.

But it does not work on jquery.mobile-1.0a4 and jquery-1.5

Changed May 12, 2011 05:04PM UTC by ajpiano comment:3

resolution: → invalid
status: new → closed

Thank you for your time and interest in helping the jQuery project, but this tracker is for issues on jQuery Core only. To report a bug on jQuery Mobile, please use their issue tracker.