BasicDialog problems [Archive]

View Full Version : BasicDialog problems

Slapyo

30 Nov 2006, 10:00 AM

I'm trying to implement the BasicDialog and I have it appearing. But if I click the button to show the dialog again I get a gray box the size of the dialog and the word false in it. I took the code from the Hello World Dialog example and when you click the button over and over it doesn't do anything like that. Here is the code I am using. Also, after clicking the close button in the dialog it moves the button that caused the dialog to show and the world false appears on the page, but no gray box.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Drag and Drop</title>
<script type="text/javascript" src="js/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/dragdrop-min.js"></script>
<script type="text/javascript" src="js/json.js"></script>
<script type="text/javascript" src="js/yui-ext-nogrid.js"></script>
<link rel="stylesheet" type="text/css" href="css/reset-fonts-grids-min.css">
<link rel="stylesheet" type="text/css" href="css/yui-ext.css">
<script type="text/javascript">
var ddImages = [];
var ddStrings = [];
var parentXY = [];
var childXY = [];
var offsetXY = [];
var strings = [];
var stringIndex;

YAHOO.util.DragDrop.prototype.constrainTo = function(constrainTo, pad, inContent){
if(typeof pad == 'number'){
pad = {left: pad, right:pad, top:pad, bottom:pad};
}
pad = pad || this.defaultPadding;
var b = getEl(this.getEl()).getBox();
var ce = getEl(constrainTo);
var c = ce.dom == document.body ? { x: 0, y: 0,
width: YAHOO.util.Dom.getViewportWidth(),
height: YAHOO.util.Dom.getViewportHeight()} : ce.getBox(inContent || false);
var topSpace = b.y - c.y;
var leftSpace = b.x - c.x;

this.resetConstraints();
this.setXConstraint(leftSpace - (pad.left||0), // left
c.width - leftSpace - b.width - (pad.right||0) //right
);
this.setYConstraint(topSpace - (pad.top||0), //top
c.height - topSpace - b.height - (pad.bottom||0) //bottom
);
}

function createString(stringText, stringSize, stringFont, stringColor) {
var stringXY = [0,0];
var newId = YAHOO.util.Dom.generateId(null, 'string');
stringText = stringText.replace(/(<([^>]+)>)/ig, '');

YAHOO.ext.DomHelper.append('parent', {tag:'div', id:newId, html:stringText, style: {width:'100px', position:'absolute', top:parentXY[1]+'px', left:parentXY[0]+'px', background:'yellow'}});
ddStrings.push(new YAHOO.util.DD(newId));
ddStrings[ddStrings.length-1].constrainTo('parent')
ddStrings[ddStrings.length-1].onDrag = function() {
updateXY(this);
updateStringXY(this);
}

document.getElementById(newId).ondblclick = function() {
editString(this);
}

strings.push([newId, stringText, stringSize, stringFont, stringColor, stringXY]);
alert(strings.toJSONString());
document.getElementById('stringText').value = 'Insert Text';
document.getElementById('editString').style.visibility = 'hidden';
}

function editString(el) {
stringIndex = searchStrings(el.id);

document.getElementById('editString').style.visibility = 'visible';
document.getElementById('editStringId').value = el.id;
document.getElementById('editStringText').value = strings[stringIndex][1];
document.getElementById('editStringSize').value = strings[stringIndex][2];
document.getElementById('editStringFont').value = strings[stringIndex][3];
document.getElementById('editStringColor').value = strings[stringIndex][4];
}

function updateString(stringId, stringText, stringSize, stringFont, stringColor) {
stringIndex = searchStrings(stringId);

document.getElementById(stringId).innerHTML = document.getElementById('editStringText').value;
strings[stringIndex][1] = document.getElementById('editStringText').value;
strings[stringIndex][2] = document.getElementById('editStringSize').value;
strings[stringIndex][3] = document.getElementById('editStringFont').value;
strings[stringIndex][4] = document.getElementById('editStringColor').value;
document.getElementById('editString').style.visibility = 'hidden';
document.getElementById('editStringId').value = '';
}

function deleteString(stringId) {
stringIndex = searchStrings(stringId);

strings.splice(stringIndex, 1);
document.getElementById('parent').removeChild(document.getElementById(stringId));
document.getElementById('editString').style.visibility = 'hidden';
document.getElementById('editStringId').value = '';
}

function updateStringXY(el) {
stringIndex = searchStrings(el.id);
parentXY = YAHOO.util.Dom.getXY('parent');
childXY = YAHOO.util.Dom.getXY(el.id);
offsetXY = [childXY[0] - parentXY[0], childXY[1] - parentXY[1]];

strings[stringIndex][5] = offsetXY;
}

function updateXY(el) {
parentXY = YAHOO.util.Dom.getXY('parent');
childXY = YAHOO.util.Dom.getXY(el.id);
offsetXY = [childXY[0] - parentXY[0], childXY[1] - parentXY[1]];

document.getElementById('parentXY').innerHTML = '(' + parentXY[0] + ', ' + parentXY[1] + ')'
document.getElementById('childXY').innerHTML = '(' + childXY[0] + ', ' + childXY[1] + ')'
document.getElementById('offsetXY').innerHTML = '(' + offsetXY[0] + ', ' + offsetXY[1] + ')'
}

function searchStrings(stringId) {
var i = 0;
var len = strings.length-1;
for(i; i<len; ++i) {
if (strings[i][0] == stringId) break;
}
return i;
}

window.onload = function () {
parentXY = YAHOO.util.Dom.getXY('parent');

ddImages[0] = new YAHOO.util.DD('child');
ddImages[0].constrainTo('parent');
ddImages[0].onDrag = function() {
updateXY(this);
}
document.getElementById('createButton').onclick = function () {
if (!dlgCreate) {
var dlgCreate = new YAHOO.ext.BasicDialog('createString', {
width: 300,
height: 300,
resizable: false,
shadow: true,
shim: true
});
dlgCreate.addKeyListener(27, dlgCreate.hide, dlgCreate);
dlgCreate.addButton('Close', dlgCreate.hide, dlgCreate);
}
dlgCreate.show();
}
}
</script>
</head>
<body>

<div style="width:100px; height:300px; float:left;"></div>
<div id="parent" style="width:300px; height:300px; float:left; background-color:red;">
<div id="child" style="width:50px; height:50px; float:left; background-color:lime;">Drag Me</div>
</div>

Parent (X,Y): <span id="parentXY"></span>

Child (X,Y): <span id="childXY"></span>

Offset (X,Y): <span id="offsetXY"></span>

<button id="createButton">Create String</button>
<div id="createString" style="visibility:hidden;position:absolute;top:0px;">
<div class="ydlg-hd">Hello Dialog</div>
<div class="ydlg-bd">

<label>Add String:
<input type="text" id="stringText" value="Insert Text" /></label></p>
<p class="clear"><label>Size:
<input type="text" id="stringSize" maxlength="4" size="1" value="12" /></label></p>

<label>Font:
<select id="stringFont" name="stringFontSelect"><option value='04'>04</option><option value='DirtyEgo'>DirtyEgo</option><option value='ProggyClean'>ProggyClean</option><option value='VeraMono'>VeraMono</option><option value='arial'>arial</option><option value='bitdust2'>bitdust2</option><option value='bmspa'>bmspa</option><option value='cod3x'>cod3x</option><option value='copyviol'>copyviol</option><option value='double01'>double01</option><option value='exprswy_free'>exprswy_free</option><option value='institution'>institution</option><option value='macromedia'>macromedia</option><option value='marvelouz'>marvelouz</option><option value='meresre'>meresre</option><option value='mplus-2p-black'>mplus-2p-black</option><option value='mplus-2p-bold'>mplus-2p-bold</option><option value='mplus-2p-light'>mplus-2p-light</option><option value='mplus-2p-medium'>mplus-2p-medium</option><option value='ocrae'>ocrae</option><option value='phoenix'>phoenix</option><option value='scifibit'>scifibit</option><option value='screenfox9'>screenfox9</option><option value='sevenet7'>sevenet7</option><option value='slkscr'>slkscr</option><option value='slkscrb'>slkscrb</option><option value='slkscre'>slkscre</option><option value='slkscreb'>slkscreb</option><option value='steelfis'>steelfis</option><option value='street'>street</option><option value='subway'>subway</option><option value='suede'>suede</option><option value='tahoma'>tahoma</option><option value='topaz'>topaz</option><option value='walkway'>walkway</option><option value='x'>x</option></select></label></p>

<label>Color: (hex#)
<input type="text" id="stringColor" value="bbeeff" maxlength="6" size="4" class="hexc" /></label></p>

Go:
<button id="stringButton" onclick="createString(document.getElementById('stringText').value, document.getElementById('stringSize').value, document.getElementById('stringFont').value, document.getElementById('stringColor').value);">Create String</button></p>
</div>
</div>
<div id="editString" style="text-align:left; float:left; visibility:hidden;">
<input type="hidden" id="editStringId" />

<label>Edit String:
<input type="text" id="editStringText" value="Insert Text" /></label></p>
<p class="clear"><label>Size:
<input type="text" id="editStringSize" maxlength="4" size="1" value="12" /></label></p>

<label>Font:
<select id="editStringFont" name="editStringFontSelect"><option value='04'>04</option><option value='DirtyEgo'>DirtyEgo</option><option value='ProggyClean'>ProggyClean</option><option value='VeraMono'>VeraMono</option><option value='arial'>arial</option><option value='bitdust2'>bitdust2</option><option value='bmspa'>bmspa</option><option value='cod3x'>cod3x</option><option value='copyviol'>copyviol</option><option value='double01'>double01</option><option value='exprswy_free'>exprswy_free</option><option value='institution'>institution</option><option value='macromedia'>macromedia</option><option value='marvelouz'>marvelouz</option><option value='meresre'>meresre</option><option value='mplus-2p-black'>mplus-2p-black</option><option value='mplus-2p-bold'>mplus-2p-bold</option><option value='mplus-2p-light'>mplus-2p-light</option><option value='mplus-2p-medium'>mplus-2p-medium</option><option value='ocrae'>ocrae</option><option value='phoenix'>phoenix</option><option value='scifibit'>scifibit</option><option value='screenfox9'>screenfox9</option><option value='sevenet7'>sevenet7</option><option value='slkscr'>slkscr</option><option value='slkscrb'>slkscrb</option><option value='slkscre'>slkscre</option><option value='slkscreb'>slkscreb</option><option value='steelfis'>steelfis</option><option value='street'>street</option><option value='subway'>subway</option><option value='suede'>suede</option><option value='tahoma'>tahoma</option><option value='topaz'>topaz</option><option value='walkway'>walkway</option><option value='x'>x</option></select></label></p>

<label>Color: (hex#)
<input type="text" id="editStringColor" value="bbeeff" maxlength="6" size="4" class="hexc" /></label></p>

Go:
<button id="editStringButton" onclick="updateString(document.getElementById('editStringId').value, document.getElementById('editStringText').value, document.getElementById('editStringSize').value, document.getElementById('editStringFont').value, document.getElementById('editStringColor').value);">Edit String</button> <button id="editStringDelete" onclick="deleteString(document.getElementById('editStringId').value);">Delete String</button></p>
</div>
</body>
</html>

tryanDLS

30 Nov 2006, 10:21 AM

Maybe it has something to do with absolute positioning on your dialog div? There's really no reason to specify anything other than visibility:hidden on that.

Also, if false is appearing that would seem like it's displaying a return value from one of your methods that's building the content.

If that's not it, maybe you could simplify your page to make it easier to track down

Slapyo

30 Nov 2006, 10:54 AM

Still does it, here is a simplified version.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Drag and Drop</title>
<script type="text/javascript" src="js/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/dragdrop-min.js"></script>
<script type="text/javascript" src="js/json.js"></script>
<script type="text/javascript" src="js/yui-ext-nogrid.js"></script>
<link rel="stylesheet" type="text/css" href="css/reset-fonts-grids-min.css">
<link rel="stylesheet" type="text/css" href="css/yui-ext.css">
<script type="text/javascript">
window.onload = function () {
document.getElementById('createButton').onclick = function () {
if (!dlgCreate) {
var dlgCreate = new YAHOO.ext.BasicDialog('createString', {
width: 300,
height: 300,
resizable: false,
shadow: true,
shim: true
});
dlgCreate.addKeyListener(27, dlgCreate.hide, dlgCreate);
dlgCreate.addButton('Close', dlgCreate.hide, dlgCreate);
}
dlgCreate.show();
}
}
</script>
</head>
<body>
<button id="createButton">Create String</button>
<div id="createString" style="visibility:hidden;">
<div class="ydlg-hd">Hello Dialog</div>
<div class="ydlg-bd">

Hi</p></div>
</div>
</body>
</html>

tryanDLS

30 Nov 2006, 11:47 AM

what are those last 2 js files (json.js, yui-ext-nogrid.js)? Are they from the examples, can you post links?

Also, if you're going to use an XHTML doctype, make sure your html is valid XML. That could be throwing the browser into quirks mode, further complicating things. Link els need to be closed with /> not just >

Slapyo

30 Nov 2006, 11:52 AM

json.js is from http://www.json.org ... but it appears that yui-ext comes with json stuff in it so i suppose i don't need json.js.

yui-ext-nogrid.js comes from the download package on yui-ext. it's all of yui-ext except for the grid.

yui-ext-nogrid.js is the entire library except for the grid.
i tried switching to html 4 strict doctype, same thing happens. i added /> to link elements up top, still happens.

tryanDLS

30 Nov 2006, 12:25 PM

This may be the iframe issue mentioned in this thread
http://www.yui-ext.com/forum/viewtopic.php?t=984

try adding that to your basicdialog.js and see if it fixes it.

Slapyo

30 Nov 2006, 12:36 PM

Removing the shim (shim: false) solved part of the issue. It no longer causes the button that starts the dialog to move positions. But upon closing the dialog I am still left with the gray box where the dialog was. If I remove the shadow (shadow: false) then this box no longer appears when I close the dialog.

tryanDLS

30 Nov 2006, 12:48 PM

Adding that fix to basicdialog fixes the problem when you have shadow:true, shim:false

Slapyo

30 Nov 2006, 1:07 PM

Ah, ok ... I am using yui-exit-nogrid.js ... I will see if I can find where I need to insert this into that file.

Also, another thing I noticed is that on the example, if you click the button while the dialog is up, it stays in the same position. However, in my example if I click it then it re-centers the dialog on the page.

I appreciate your help on this. Looks like this issue will be fixed in the next release.

tryanDLS

30 Nov 2006, 1:21 PM

Looks like there still may be an issue here. When the dialog is closed and then redisplayed again, the centered shadow reappears, and every subsequent open/close combo seems to add another shadow layer.

jack.slocum

30 Nov 2006, 2:20 PM

Can you put up a link? I am unable to reproduce.

Also, try removing the xhtml doc type. Nothing is tested with xhtml so it's worth a shot.

tryanDLS

30 Nov 2006, 2:25 PM

Here' my quick version of what he's doing. I tried changing the doctype - didn't change anything

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Drag and Drop</title>
<script type="text/javascript" src="../yui/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="../yui/build/dom/dom-min.js"></script>
<script type="text/javascript" src="../yui/build/event/event.js"></script>
<script type="text/javascript" src="../yui/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../yui/build/animation/animation-min.js"></script>
<script type="text/javascript" src="../yui/build/connection/connection-min.js" ></script>
<script type="text/javascript" src="../yui-ext.0.33/yui-ext.js"></script>
<script type="text/javascript" src="../yui-ext.0.33/source/widgets/basicdialog.js"></script>

<link rel="stylesheet" type="text/css" href="../yui/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="../yui/build/fonts/fonts-min.css">
<link rel="stylesheet" type="text/css" href="../yui/build/container/assets/container.css">
<link rel="stylesheet" type="text/css" href="../yui-ext.0.33/resources/css/layout.css"/>
<link rel="stylesheet" type="text/css" href="../yui-ext.0.33/resources/css/basic-dialog.css"/>
<link rel="stylesheet" type="text/css" href="../yui-ext.0.33/resources/css/grid.css"/>

<script type="text/javascript">
window.onload = function () {
document.getElementById('createButton').onclick = function () {
if (!dlgCreate) {
var dlgCreate = new YAHOO.ext.BasicDialog('createString', {
width: 300,
height: 300,
resizable: false,
shadow: true,
shim: false
});
dlgCreate.addKeyListener(27, dlgCreate.hide, dlgCreate);
dlgCreate.addButton('Close', dlgCreate.hide, dlgCreate);
}
dlgCreate.show();
}
}
</script>
</head>
<body>
<button id="createButton">Create String</button>
<div id="createString" style="visibility:hidden;">
<div class="ydlg-hd">Hello Dialog</div>
<div class="ydlg-bd">

Hi</p></div>
</div>
</body>
</html>

tryanDLS

30 Nov 2006, 2:27 PM

My change to basicdialog.js was

if(this.shadow){
this.shadow.hide();
}
if(this.shim) {
this.shim.hide();
}

maybe I misinterpreted what the other thread meant

jack.slocum

30 Nov 2006, 2:37 PM

Yep, that's exactly what's in the current code. I will hceck it in if I can get the time to clean up my lightweight layout region class.

jack.slocum

30 Nov 2006, 2:39 PM

BTW, yui-ext-nogrid.js is missing a bunch of other stuff. You would be better off building your own yui-ext.js on the website. In the next release the only files in the root will be yui-ext.js, yui-ext-debug.js, yui-ext-core.js.

Slapyo

30 Nov 2006, 3:00 PM

OK thanks!

tryanDLS

30 Nov 2006, 6:51 PM

OK after much head-banging, I figured out your prob - don't know why it took so long to see it :(

You're declaring the dlgCreate var in the wrong place - so every time you click the button, you're creating a new dialog instance, and hence a new shadow element. Not sure why the shadows are getting moved back into the visible area of the page, but the solution is to rearrange your code slightly so that you reuse the same instance:

var dlgCreate;
document.getElementById('createButton').onclick = function () {
if (!dlgCreate) {
dlgCreate = new YAHOO.ext.BasicDialog('createString', {

Slapyo

1 Dec 2006, 10:23 AM

duh, that makes sense. i actually fixed that yesterday when i decided to go through my code and try to make it look exactly like the example and made that change. didn't know that was the problem when i changed everything, but now that you point it out i see why it was acting like it was. thanks!!