jQuery Forum

Jquery Mobile Submit button - Go Button on iPad
[0Replies]
- 29-Aug-2013 02:06 PM
- Forum: jQuery Mobile
I have a input text field and Search button on the page.

The Search button is coded as <button type="submit" runat="server" id="btnSearch" onserverclick="btnSearch_Click">Search</button>

When you enter something on input text field, and click on Go button from the iPad, it will trigger the Search function on server side. I noticed that it executed the Page_Load & btnSearch_Click function on the server side twice.

But if you click on the Search button from the page, it only executed one time on the server side. Any idea to correct this?

Really appreciated.
Thanks
Ta

Jquerymobile - Go button on iPad
[2Replies]
- 29-Aug-2013 08:36 AM
- Forum: jQuery Mobile
I recently wrote 2 separate Search pages: one for iPad, and one for desktop using IE 8. I use jquerymobile button <a href="#" data-role="button" >Search</a> and test it on iPad. I have to click the button on the page, in order to search it. If I click on the Go button the iPad, it will not do anything.

I also tested another page on the iPad. I use asp button as <asp:button text="Search" runat="server" />. I can click the Go button on the iPad, and it will go ahead and search.

Please let me know what I need to do if I'm using the jquery button, and be able to click on the Go button from the iPad.

Really appreciated your help or any suggestions.
Ta.

Jquery Mobile - Datebox - input date manually
[3Replies]
- 22-Jul-2013 02:49 PM
- Forum: Developing jQuery Mobile
<label for="txtDOB">DOB:</label>DOB:
<input type="text" name="txtDOB" id="txtDOB" data-role="datebox" data-options={"mode": "calbox","lockInput": "false"} />

when I click on DOB text box, it will open a calendar where I can select the date.
How do I enter date manually? Currently, you cannot type anything on the textbox.

Any suggestions would be greatly appreciated.
Thanks
Ta

Convert from version jquery.mobile-1.0a2 to jquery.mobile-1.0a4.1
[0Replies]
- 11-May-2011 02:34 PM
- Forum: jQuery Mobile
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

JqueryMobile - Keep items on the same line
[0Replies]
- 04-Apr-2011 10:55 AM
- Forum: Developing jQuery Mobile
I would like to keep these 3 items on the same line
1) An image
2) Input text
3) Button go

Just like this:

This is what it looks like on my page:

I already tried Navbar, or class="ui-grid-b", but nothing worked for me.

Here is my latest code:

   <ul data-role="listview" data-inset="true" >
   <li >
   <p><img id="img3" src="../Styles/Images/ZipCode/akqa_fliter_with_bg_icon.png" alt="scan barcode" /></p>
   <p><input name="txtAddress" type="text" id="Text1" style="width:80%" /></p>
   <p><img id="img4" src="../Styles/Images/SearchBlack.png" alt="scan barcode" /></p>

   </li>
   </ul>

Any suggestions?

Thanks

JqueryMobile/Drop down to display US States
[0Replies]
- 21-Mar-2011 12:42 PM
- Forum: jQuery Mobile
I noticed when I select an US state from the drop down, If I selected Wyoming where it was last state in the drop down , the next time I go back to the drop down again, it only displays 25 states starting from Wyoming, I cannot scroll back to the 1st state in drop down any more.

Did I miss out something here?

   <div id="divByAddress" style="display:inline">
   <div id="divByAddressInput" runat="server" style="display:inline">
   <p>Enter address,city and state to find the ZIP Code for that address</p>
   <fieldset>
   <label for="txtAddress2"><span class="fieldrequired">*</span>Address:</label>
   <input type="text" id="txtAddress2" value="" class="required" runat="server" />
   <label for="txtAddress1">Apt/Suite:</label>
   <input type="text" id="txtAddress1" value="" runat="server" />
   <label for="txtCity"><span class="fieldrequired">*</span>City:</label>
   <input type="text" id="txtCity" value="" class="required" runat="server" />
   <label for="ddlState" class="select"><span class="fieldrequired">*</span>State:</label>
<select name="ddlState" id="ddlState" class="required" runat="server">
   <option selected="selected" value="">Select State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>


   </fieldset>

   <a href="#" id="btnSearch" data-theme="b" data-role="button" runat="server" onserverclick="btnSearch_Click" ><span>Search</span></a>

   </div>

Header:How to fix all the text in the header
[2Replies]
- 14-Mar-2011 04:07 PM
- Forum: jQuery Mobile
The system does not display all the text in the title. It displays Calculate a Pr... instead of Calculate A Price.
I used the same logic in a new page, and it displays all the text in the title.

My page has multiple page/header/content/footer in a page. I don't know that caused the problem.

Here is my code:

   <div data-role="page" id="divMainPage" runat="server" > 

   <div data-role="header" data-theme="b">
   <a href="#" id="hrefMain1" data-icon="back" >Back</a>
<h1>Calculate a Price</h1>
   <div data-role="navbar">
   <ul>
   <li><a href="#" id="btnShowFlatRate" data-theme="b" data-role="button"                                                       runat="server" onserverclick="btnShowFlatRate_Click" ><span>Show                                                       Flat Rate Prices</span></a></li>
   <li> <a href="#" id="btnListPrices" data-theme="b" data-role="button">                                          <span>List Prices</span></a></li>
   </ul>
   </div>
</div>

Any suggestions?
Thanks
Ta

How to display the Confirmation for delete the same as drop down.
[2Replies]
- 11-Mar-2011 08:47 AM
- Forum: jQuery Mobile
When the user clicks on the delete button, a confirmation message box is displayed to confirm the delete.The confirmation looks crooked on the phone. How do I change the style sheet so it would look the same the drop down. Here is the style sheet for the confirmation:

#confirmModalContainer {display: block; position: absolute; top: 312.5px; margin-top: -88.5px; left: 256.5px; margin-left: -182px; font-family:Calibri, Verdana, Arial; font-size:16px; text-align:left; background:#fff; border:4px solid #989898;}

Thanks
Ta
Attachments
- confirm.PNG
  
  Size: 31.77 KB Downloads: 1891

Search for all href starting with this name?
[2Replies]
- 28-Feb-2011 03:32 PM
- Forum: Using jQuery
How do I search for all the <a> starting with with hrefhome??

Example I could have 3 or 4 <a> that starting with the id of hrefHome1,2..3
<a id="hrefHome" href="#" data-icon="home">Home</a>

Currently, I just hardcoded the id name:

$("#hrefHome").click(function () {
   window.location.href = '/Test/Default.aspx';
   });

   $("#hrefHome2").click(function () {
   window.location.href = '/Test/Default.aspx';
   });

Thanks

Host own JS & CSS files
[3Replies]
- 25-Feb-2011 05:50 PM
- Forum: jQuery Mobile
To improve the speed, I downloaded all the JS and CSS files to my project. I noticed the style sheets not working, the page looks different. I used Chrome Google to debug the script, but I didn't see any errors. I noticed that I have to move all the images under the Styles/Images folder in order for the CSS to recognize the images. What else do I need to do.

Before scripts:
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
   <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-.0a2.min.js">/script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript" src="../Scripts/jquery.validate.js" ></script>

After scripts:
    <link rel="stylesheet" href="Styles/jquery.mobile-1.0a3.min.css" />
   <script type="text/javascript" src="Scripts/jquery-1.5.1.min.js"></script>
   <script type="text/javascript" src="Scripts/jquery.mobile-1.0a3.min.js"></script>
   <script type="text/javascript" src="Scripts/jquery.validate.js"></script>

I know that I left out   ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

Please help.
Thanks

Response title

Attachments

jQuery Forum

Activity Trend