I would like to have two buttons to open each one a diferent modal window with diferente content.
I am using this example from yui: http://yuilibrary.com/yui/docs/panel/panel-form-example.html
Things i try that did not work: 1. trying to duplicate the code 1. trying to duplicate the code and naming each div with a diferent name . Eg.: Add and Add 1
and
This is the code from the example:
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.12.0/build/cssreset/reset-min.css&3.12.0/build/cssfonts/fonts-min.css&3.12.0/build/cssbase/base-min.css">
<script src="http://yui.yahooapis.com/3.12.0/build/yui/yui-min.js"></script>
<div id="dt"></div>
<p><button id="addRow">Add</button></p>
<div id="panelContent">
<div class="yui3-widget-bd">
</div>
</div>
<div id="nestedPanel"></div>
<script type="text/javascript">
YUI().use('datatable-mutable', 'panel', 'dd-plugin', function (Y) {
// Create the datatable with some gadget information.
var idField = Y.one('#productId'),
nameField = Y.one('#name'),
priceField = Y.one('#price'),
addRowBtn = Y.one('#addRow'),
cols = ['id', 'name', 'price'],
data = [
{id:'ga-3475', name:'gadget', price:'$6.99'},
{id:'sp-9980', name:'sprocket', price:'$3.75'},
{id:'wi-0650', name:'widget', price:'$4.25'}
],
dt, panel, nestedPanel;
// Define the addItem function - this will be called when 'Add Item' is
// pressed on the modal form.
function addItem() {
dt.addRow({
id : idField.get('value'),
name : nameField.get('value'),
price: priceField.get('value')
});
idField.set('value', '');
nameField.set('value', '');
priceField.set('value', '');
panel.hide();
}
// Create the main modal form.
panel = new Y.Panel({
srcNode : '#panelContent',
headerContent: 'Add A New Product',
width : 250,
zIndex : 5,
centered : true,
modal : true,
visible : false,
render : true,
plugins : [Y.Plugin.Drag]
});
// When the addRowBtn is pressed, show the modal form.
addRowBtn.on('click', function (e) {
panel.show();
});
});
</script>
Thank's in advance
I just work out in an example wich works :
<!DOCTYPE html>
<html lang="en" class="yui3-loading">
<head>
<meta charset="utf-8">
<title>Using a panel to show a modal form</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.12.0/build/cssreset/reset-min.css&3.12.0/build/cssfonts/fonts-min.css&3.12.0/build/cssbase/base-min.css">
<script src="http://yui.yahooapis.com/3.12.0/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<style type="text/css">
#desc {
margin-bottom: 20px;
border-bottom: 1px dotted #333;
}
#desc span {
background: #a3350d;
padding :2px;
color:# f27243;
}
.yui3-panel {
outline: none;
}
.yui3-panel-content .yui3-widget-hd {
font-weight: bold;
}
.yui3-panel-content .yui3-widget-bd {
padding: 15px;
}
.yui3-panel-content label {
margin-right: 30px;
}
.yui3-panel-content fieldset {
border: none;
padding: 0;
}
.yui3-panel-content input[type="text"] {
border: none;
border: 1px solid #ccc;
padding: 3px 7px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-size: 100%;
width: 200px;
}
#addRow {
margin-top: 10px;
}
#dt {
margin-left: 1em;
}
#dt th, #dt td {
border: 0 none;
border-left: 1px solid #cbcbcb;
}
</style>
<h2>Using a panel to show a modal form</h2>
<div class="yui3-u-1">
<div id="dt"></div>
<p><button id="addRow">Add 1</button></p>
<p><button id="addRow2">Add 2</button></p>
<div id="panelContent">
<div class="yui3-widget-bd">
<form>
<fieldset>
<p>
<label for="id">ID</label><br/>
<input type="text" name="id" id="productId" placeholder="">
</p>
<p>
<label for="name">Name</label><br/>
<input type="text" name="name" id="name" value="" placeholder="">
</p>
<p>
<label for="password">Price</label><br/>
<input type="text" name="price" id="price" value="" placeholder="$">
</p>
</fieldset>
</form>
</div>
</div>
<div id="nestedPanel"></div>
<p></p>
<div id="panelContent2">
<div class="yui3-widget-bd">
<form>
<fieldset>
<p>
<label for="id">ID</label><br/>
<input type="text" name="id" id="productId" placeholder="">
</p>
<p>
<label for="name">Name</label><br/>
<input type="text" name="name" id="name" value="" placeholder="">
</p>
<p>
<label for="password">Price</label><br/>
<input type="text" name="price" id="price" value="" placeholder="$">
</p>
</fieldset>
</form>
</div>
</div>
<div id="nestedPanel2"></div>
</div>
<script type="text/javascript">
YUI().use('datatable-mutable', 'panel', 'dd-plugin', function (Y) {
// Create the datatable with some gadget information.
var idField = Y.one('#productId'),
nameField = Y.one('#name'),
priceField = Y.one('#price'),
addRowBtn = Y.one('#addRow'),
addRowBtn2 = Y.one('#addRow2'),
cols = ['id', 'name', 'price'],
data = [
{id:'ga-3475', name:'gadget', price:'$6.99'},
{id:'sp-9980', name:'sprocket', price:'$3.75'},
{id:'wi-0650', name:'widget', price:'$4.25'}
],
dt, panel, nestedPanel;
// Define the addItem function - this will be called when 'Add Item' is
// pressed on the modal form.
function addItem() {
dt.addRow({
id : idField.get('value'),
name : nameField.get('value'),
price: priceField.get('value')
});
idField.set('value', '');
nameField.set('value', '');
priceField.set('value', '');
panel.hide();
}
// Define the removeItems function - this will be called when
// 'Remove All Items' is pressed on the modal form and is confirmed 'yes'
// by the nested panel.
function removeItems() {
dt.data.reset();
panel.hide();
}
// Instantiate the nested panel if it doesn't exist, otherwise just show it.
function removeAllItemsConfirm() {
if (nestedPanel) {
return nestedPanel.show();
}
nestedPanel = new Y.Panel({
bodyContent: 'Are you sure you want to remove all items?',
width : 400,
zIndex : 6,
centered : true,
modal : true,
render : '#nestedPanel',
buttons: [
{
value : 'Yes',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
nestedPanel.hide();
panel.hide();
removeItems();
}
},
{
value : 'No',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
nestedPanel.hide();
}
}
]
});
}
// Create the DataTable.
dt = new Y.DataTable({
columns: cols,
data : data,
summary: 'Price sheet for inventory parts',
caption: 'Price sheet for inventory parts',
render : '#dt'
});
// Create the main modal form.
panel = new Y.Panel({
srcNode : '#panelContent',
headerContent: 'Add A New Product',
width : 250,
zIndex : 5,
centered : true,
modal : true,
visible : false,
render : true,
plugins : [Y.Plugin.Drag]
});
panel.addButton({
value : 'Add Item',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
addItem();
}
});
panel.addButton({
value : 'Remove All Items',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
removeAllItemsConfirm();
}
});
// When the addRowBtn is pressed, show the modal form.
addRowBtn.on('click', function (e) {
panel.show();
});
//custom
// Create the main modal form.
panel2 = new Y.Panel({
srcNode : '#panelContent2',
headerContent: 'Add A New New Product',
width : 250,
zIndex : 5,
centered : true,
modal : true,
visible : false,
render : true,
plugins : [Y.Plugin.Drag]
});
// When the addRowBtn is pressed, show the modal form.
addRowBtn2.on('click', function (e) {
panel2.show();
});
});
</script>
</body>
</html>