I have a situation where I want to display a Check Icon when the user puts something in their cart. I already have a button there so this will result is the display of two buttons as in:
Which I get I on the first page correctly, all other pages display like this:
This is how they are defined in the header of each page (all pages are contained in the same file):
<div class="ui-btn-right">
<a class="checkOutButton" data-role="button" id="checkOutButton" href="" data-icon="check" data-iconpos="notext"></a>
<a class="logoffButton" data-role="button" id="logoffButton" href="#logout" data-icon="delete" data-iconpos="notext"></a>
</div>
This is how I initialize them in my onready code:
$('.checkOutButton').bind('click',checkOut);
$('.checkOutButton').hide();
This is how I display them in the addCart() function:
$('.checkOutButton').show();
All the buttons display, but only in-line correctly on the home page (first page). They all recognize the click if I click or tap the button. Is there some width CSS value that has to be set that I appear to be unaware of? I have used a wrapper but that has the outline of the container which I don't want (Also, I don't think it worked on all pages correctly either, but didn't investigate since I didn't like the look).
It seems like this should be easy but I've through the books and google without success. Below is an example of the HELP page (all pages follow the same structure):
<div data-role="page" id="help" data-title="Help Information">
<div data-role="header" data-position="fixed" data-theme="e">
<a href="#home" data-icon="home" data-iconpos="notext"></a>
<h1>Help Information</h1>
<div class="ui-btn-right">
<a class="checkOutButton" data-role="button" id="checkOutButton" href="" data-icon="check" data-iconpos="notext"></a>
<a class="logoffButton" data-role="button" id="logoffButton" href="#logout" data-icon="delete" data-iconpos="notext"></a>
</div>
</div><!-- /header -->
<div data-role="content">
<p>God helps those who help themselves. (At least until I get some time to write actual help information.</p>
</div><!-- /content -->
</div><!-- /help-->
The following is all the javascript involved added per Marco's request:
//
// Add to cart code
//
function addToCart(what,uid) {
$('.checkOutButton').show();
$.mobile.changePage("#showCart");
}
//
// On ready init code
//
$(document).ready(function() {
$('.logoffButton').bind('click',logoffUser);
$('.checkOutButton').bind('click',checkOut);
$('.checkOutButton').hide();
});
//
// Checkout screen stub
//
function checkOut() {
alert("Imagine a checkout screen here");
}
The following is the javascript link that is called when the user clicks on the add to cart button in a dialog box:
<a href="javascript:addToCart('basicSearch',uid)" data-role="button" data-inline="true" data-theme="b">Add to Cart</a>
Like I said above, the first/main screen will display correctly, the problem is the second through N screens don't. The sequence I use is click add to cart from a results page, click the More shopping button or click the back button, then click something like the Help page link. Help page will display the icons incorrectly.