Showing posts with label JQuery Mobile alert box. Show all posts
Showing posts with label JQuery Mobile alert box. Show all posts

Wednesday, May 13, 2009

JQuery Mobile alert box open after completion of task

JQuery Mobile alert box open after completion of some task


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="ui-mobile">
<head>
<title>Products</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
<link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" />
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
<link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
</head>
<body class="ui-mobile-viewport">
<div data-role="page" data-theme="b" data-content-theme="d">
  <div data-role="header" data-position="inline" data-theme="b">
    <h1>Products Listing </h1>
    <a href="#" id="addToCartButton" onclick="addToCart();" data-role="button" data-icon="myapp-shopping" data-theme="c">Add to Cart</a>
</div>
    <div data-role="content">
        Open jQuery Mobile alert box after completion of some task.
    </div>
</div>
<script>
function openDialog(msg) {
    $(document).delegate('#
addToCartButton', 'click', function() {
    $(this).simpledialog({
        'mode' : 'bool',
        'prompt' : msg+"<br/><br/><br/><br/>",
        'useModal': true,
        'buttons' : {  'OK': {  click: function () {   }  } }
                    })
            });
}
function addToCart() {
    // task goes here.....
    var msg="Product added in you cart";
    openDialog(msg);
}
/*$(document).delegate('#addToCartButton', 'click', function() {
    var msg=addToCart();
    $(this).simpledialog({
    'mode' : 'bool',
    'prompt' : msg,
    'useModal': true,
    'buttons' : {
      'OK': {
        click: function () {
           
          //$('#dialogoutput').text('OK');
        }
      }
    }
  })
});*/
</script>
</body>
</html>