Bug Tracker

Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#9243 closed bug (invalid)

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

Reported by: dmta2005@… 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

Change History (3)

comment:1 Changed 9 years ago by anonymous

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.

comment:2 Changed 9 years ago by dmta

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

comment:3 Changed 9 years ago by ajpiano

Resolution: invalid
Status: newclosed

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.

Note: See TracTickets for help on using tickets.