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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
<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/
<script src="http://code.jquery.com/
<script src="http://code.jquery.com/
<link type="text/css" href="http://dev.jtsage.com/
<link type="text/css" href="http://dev.jtsage.com/
<script type="text/javascript" src="http://dev.jtsage.com/
<script type="text/javascript" src="http://dev.jtsage.com/
<link type="text/css" href="http://dev.jtsage.com/
</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('#
$(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('#
var msg=addToCart();
$(this).simpledialog({
'mode' : 'bool',
'prompt' : msg,
'useModal': true,
'buttons' : {
'OK': {
click: function () {
//$('#dialogoutput').text('OK'
}
}
}
})
});*/
</script>
</body>
</html>