Two different hello world dialog in same page

[Alidad]

Hi, I really need help with small code that I hardly could no be able to solve problme myself.

what I'm trying to write code to allow me to have two differents button and each button have they own dialog in same page.

When I tested by click the button and is works great with one button dialog, and then I want to add another button for another dialog for reason is not working on both buttom is same page.

what I wrote code is I added new dialog variable which is showBtn2 for second button, but is not working.

Please help if i missed anything or do i have to have two different name of fuction()!

Alidad


<script type="text/javascript">
var HelloWorld = function(){
var dialog, showBtn showBtn2;
return {
init : function(){
showBtn = getEl('show-dialog-btn');
showBtn2 = getEl('show-dialog-btn2');
// attach to click event
showBtn.on('click', this.showDialog, this, true);
showBtn2.on('click', this.showDialog2, this, true);
},

showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new YAHOO.ext.BasicDialog("hello-dlg", {
//modal:true,
resizable:false,
autoTabs:true,
modal:true,
draggable:false,
width:420,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true

});

}

showDialog2 : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new YAHOO.ext.BasicDialog("hello-dlg", {
//modal:true,
resizable:false,
autoTabs:true,
modal:true,
draggable:false,
width:420,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true

});

}
dialog.show(showBtn.dom);
// dialog.getTabs('jtabs');
if(!dialog.getTabs().getTab('jtabs-1'))
{
var tabs = dialog.getTabs();
tabs.addTab('jtabs-1', "First Tab");

var tab2 = tabs.addTab('jtabs-2', "Tab 2");
var updater = tab2.getUpdateManager();
updater.setDefaultUrl('yui-ext/examples/tabs/ajax1.htm');
tab2.onActivate.subscribe(updater.refresh, updater, true);

var tab3 = tabs.addTab('jtabs-3', "Tab 3");
tab3.setUrl('yui-ext/examples/tabs/ajax2.htm', null, true);


}


}
};
}();

YAHOO.ext.EventManager.onDocumentReady(HelloWorld.init, HelloWorld, true);
</script>

[thesilentman]

Alidad,
you're using the same dom element in both your showDialog functions. This way they both use the div (in your html file) with the id hello-dlg



showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new YAHOO.ext.BasicDialog("hello-dlg", {


you have to insert another div like "hello-dlg2" in the html ...


<!-- The dialog is created from existing markup.
The inline styles just hide it until it created and should be in a stylesheet -->
<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
<div class="x-dlg-hd">Hello Dialog</div>
<div class="x-dlg-bd">
<!-- Auto create tab 1 -->
<div class="x-dlg-tab" title="Hello World 1">
<!-- Nested "inner-tab" to safely add padding -->
<div class="inner-tab">
Hello...<br><br><br>
</div>
</div>
<!-- Auto create tab 2 -->
<div class="x-dlg-tab" title="Hello World 2">
<div class="inner-tab">
... World!
</div>
</div>
</div>
</div>

and also in your second function.


showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new YAHOO.ext.BasicDialog("hello-dlg2", {


Hope this helps

[Alidad]

hi, thanks so much for your response, but some reason i have tried that, is still not working, i created two different functions and two different dom elemens, please see the code of what i wrote.



</style>
<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
<div class="ydlg-hd"></div>
<div class="ydlg-bd">
</div>
</div>


<script type="text/javascript">
var HelloWorld = function(){
var dialog, showBtn;
return {
init : function(){
showBtn = getEl('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this, true);
},

showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new YAHOO.ext.BasicDialog("hello-dlg", {
//modal:true,
resizable:false,
autoTabs:true,
modal:true,
draggable:false,
width:420,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true

});

}


dialog.show(showBtn.dom);
// dialog.getTabs('jtabs');
if(!dialog.getTabs().getTab('jtabs-1'))
{
var tabs = dialog.getTabs();
tabs.addTab('jtabs-1', "First Tab");

var tab2 = tabs.addTab('jtabs-2', "Tab 2");
var updater = tab2.getUpdateManager();
updater.setDefaultUrl(xxx);
tab2.onActivate.subscribe(updater.refresh, updater, true);

var tab3 = tabs.addTab('jtabs-3', "Tab 3");
tab3.setUrl('yui-ext/examples/tabs/ajax2.htm', null, true);


}


}
};
}();

YAHOO.ext.EventManager.onDocumentReady(HelloWorld.init, HelloWorld, true);
</script>




</style>
<div id="hello-dlg2" tyle="visibility:hidden;position:absolute;top:0px;">
<div class="ydlg-hd"></div>
<div class="ydlg-bd">
</div>
</div>


<script type="text/javascript">
var HelloWorld2 = function(){
var dialog2, showBtn2;
return {
init2 : function(){
showBtn2 = getEl('show-dialog2-btn2');
// attach to click event
showBtn2.on('click', this.showDialog2, this, true);
},

showDialog2 : function(){
if(!dialog2){ // lazy initialize the dialog and only create it once
dialog2 = new YAHOO.ext.BasicDialog("hello-dlg2", {
//modal:true,
resizable:false,
autoTabs:true,
modal:true,
draggable:false,
width:420,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true

});

}


dialog2.show(showBtn2.dom);
// dialog.getTabs('jtabs');
if(!dialog2.getTabs().getTab('jtabs-1'))
{
var tabs = dialog2.getTabs();
tabs.addTab('jtabs-1', "First Tab");

var tab2 = tabs.addTab('jtabs-2', "Tab 2");
var updater = tab2.getUpdateManager();
updater.setDefaultUrl(xxx);
tab2.onActivate.subscribe(updater.refresh, updater, true);

var tab3 = tabs.addTab('jtabs-3', "Tab 3");
tab3.setUrl('yui-ext/examples/tabs/ajax2.htm', null, true);


}


}
};
}();

YAHOO.ext.EventManager.onDocumentReady(HelloWorld.init2, HelloWorld2, true);
</script>

and then for button:

<input type="button" id="show-dialog-btn" value="Hello World" />
<input type="button" id="show-dialog-btn2" value="Hello World" />


Any idea what went wrong!

Alidad

[thesilentman]

Please explain "...is not working"
When you click on button 1 does something happen ? On button2?

Have you got firebug installed? If not try to use firebug on firefox for debugging. it will show you any problems.

[Alidad]

Button number one is working fine, but not button number 2, is not doing anything.

Alidad

[Alidad]

yes i'm using firebugs too, and i tried that they do not tell errors. can you copy and paste over and see what i missed please!

Alidad

[Alidad]

hi again i have solved that, i forgot to change some code in last line (helloworld2.ini2).

[thesilentman]

Do you use Firefox? If not, you'd better start using it. Get Firebug and use the debugger. Without it, you won't be getting far.

Your code had bugs all over the place. in your HTML and javascript. Here's a cleaned up version of your code. However I replaced YAHOO.ext with Ext .


<html>
<head>
// PUT YOUR INCLUDES HERE
</head>
<body>
<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px ;">
<div class="ydlg-hd"></div>
<div class="ydlg-bd">
</div>
</div>
<div id="hello-dlg2" style="visibility:hidden;position:absolute;top:0px; ">
<div class="ydlg-hd"></div>
<div class="ydlg-bd">
</div>
</div>


<script type="text/javascript">
var HelloWorld = function(){
var dialog, showBtn;
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this, true);
},

showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.BasicDialog("hello-dlg", {
//modal:true,
resizable:false,
autoTabs:true,
modal:true,
draggable:false,
width:420,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true

});

}


dialog.show(showBtn.dom);
// dialog.getTabs('jtabs');
if(!dialog.getTabs().getTab('jtabs-1'))
{
var tabs = dialog.getTabs();
tabs.addTab('jtabs-1', "First Tab");

var tab2 = tabs.addTab('jtabs-2', "Tab 2");
var updater = tab2.getUpdateManager();
updater.setDefaultUrl(xxx);
tab2.onActivate.subscribe(updater.refresh, updater, true);

var tab3 = tabs.addTab('jtabs-3', "Tab 3");
tab3.setUrl('yui-ext/examples/tabs/ajax2.htm', null, true);


}
}
};
}();
;

Ext.onReady(HelloWorld.init, HelloWorld, true);
</script>






<script type="text/javascript">
var HelloWorld2 = function(){
var dialog2, showBtn2;
return {
init : function(){
showBtn2 = Ext.get('show-dialog-btn2');
// attach to click event
showBtn2.on('click', this.showDialog2, this, true);
},

showDialog2 : function(){
if(!dialog2){ // lazy initialize the dialog and only create it once
dialog2 = new Ext.BasicDialog("hello-dlg2", {
//modal:true,
resizable:false,
autoTabs:true,
modal:true,
draggable:false,
width:420,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true

});

}


dialog2.show(showBtn2.dom);
// dialog.getTabs('jtabs');
if(!dialog2.getTabs().getTab('jtabs-1'))
{
var tabs = dialog2.getTabs();
tabs.addTab('jtabs-1', "First Tab");

var tab2 = tabs.addTab('jtabs-2', "Tab 2");
var updater = tab2.getUpdateManager();
updater.setDefaultUrl('');
tab2.onActivate.subscribe(updater.refresh, updater, true);

var tab3 = tabs.addTab('jtabs-3', "Tab 3");
tab3.setUrl('yui-ext/examples/tabs/ajax2.htm', null, true);


}
}
};
}();
;

Ext.onReady(HelloWorld2.init, HelloWorld2, true);
</script>
<input type="button" id="show-dialog-btn" value="Hello World" />
<input type="button" id="show-dialog-btn2" value="Hello World" />
</body>
</html>


Caution it's still throwing some errors that I'll leave up to you to solve. That's a nice task to do with firebug.
The dialogs open up now.

Again I'd like to stress the importance of using a debugger on Javascript coding!!

Have fun

Frank

[Alidad]

thank you for adviced me to use firebug, I'm new to firebug, is there is tutural where i can learn how to use firebug and understand the tools!

alidad

[thesilentman]

Don't know,
I learned by exploring and doing. Try the homepage of firebug or google it.