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>










No comments:

Post a Comment