lesson of the day...

and god said you shall no duplicate div ids,
cause if you do,
you shall be send to the hell of css,
constant torture and misfortune will await you,

so do not duplicate your id's!

problem:

updating a you tab with some dynamic generated content, which generate the same div id over and over again...

YUI and Prototype - updating an element

Well currently I'm working a lot with YUI and specially tabs. So one of the first things I wanted todo is to select a tab and this selections should do two things

• show the content of the tab, happens by default
• update a div on the page somewhere with some content related to the tab content

so how do you do this?

Quite simple.



<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView('demo');
var tab0 = myTabs.getTab(0);

function handleClick(e,tab) {
${"div_to_update"}.update("I just clicked on my tab!");
}

tab0.addListener('click', handleClick,tab0);
</script>



and as you can see we use the 'update' function from the prototype library.

Ajax and Grails and YUI

currently I'm trying to work more with ajax and grails.

So the first serious project is our quality control webfrontend which needs fancy stuff like

• progress bars
• multiple layers, cause they are hip...

and so.

So far one issue was to display a webpage in a layer on top of another webpage and the current soultion is:

controller:


class CompoundController {


/**
* shows the binbase compound
*/
def show_ajax = {
log.info("calling url...")
def id = params.id
def database = params.database

def server = System.getProperty("application.server")
def link = "http://${server}:8080/binbase-compound/bin/show/${id}?db=${database}"
//build our url
log.info("generated url: ${link}");
URL url = new URL(link)
InputStream stream = url.openStream()
Scanner scanner = new Scanner(stream)

//store the output, since this url can take a while to load, if it's not in the server cache
StringBuffer buffer = new StringBuffer()
while(scanner.hasNextLine()){
buffer.append(scanner.nextLine())
}

log.info("render result");

render "<iframe src="$%7Blink%7D" width="\"100%\"" height="\"100%\""></iframe>"
}
}

view:



<g:remotelink onloading="load();" oncomplete="done();" onsuccess="showFiles();" update="window_content" controller="compound" method="show_ajax" params="[database:database,id:id]">199651</g:remoteLink>



our div where we display the result


<div id="window">
<div class="hd"><div class="tl"></div><span></span><div class="tr"></div></div>
<div class="bd"><div id="window_content"></div></div>
</div>



and the related java script, yes I said it I'm using some javascript. Mostly the YUI library.



YAHOO.namespace("example.container");

function load() {

if (!YAHOO.example.container.wait) {

// Initialize the temporary Panel to display while waiting for external content to load

YAHOO.example.container.wait =
new YAHOO.widget.Panel("progress",
{
fixedcenter: true,
close: false,
draggable: false,
zindex:4,
modal: true,
visible: false
}
);

YAHOO.example.container.wait.setHeader("

please wait, this process can take up to 5 minutes

");
YAHOO.example.container.wait.render(document.body);

}


YAHOO.example.container.wait.show();
}

function done() {
YAHOO.example.container.wait.hide();

}

function showFiles() {

if (!YAHOO.example.container.files) {

// Initialize the temporary Panel to display while waiting for external content to load

YAHOO.example.container.files =
new YAHOO.widget.Panel("window",
{
fixedcenter: true,
close: true,
draggable: false,
zindex:5,
modal: false,
visible: false
}
);

//YAHOO.example.container.files.setHeader("Files for day...");
//YAHOO.example.container.files.setBody("<div id=\"showFiles\"></div>

");
YAHOO.example.container.files.render(document.body);

}


YAHOO.example.container.files.show();
}



and than there is some css,


#window.yui-panel .bd {
overflow: hidden;
padding: 0px;
border: 1px solid #aeaeae;
background-color: #FFF;
width:1024px;
height:600px;
}

#window.yui-panel .ft {
font-size: 75%;
color: #666;
padding: 0px;
overflow: hidden;
border: 1px solid #aeaeae;
border-top: none;
background-color: #dfdfdf;
}

#window.yui-panel .hd span {
vertical-align: middle;
line-height: 22px;
font-weight: bold;
}

#window.yui-panel .hd .tl {
width: 7px;
height: 22px;
top: 0;
left: 0px;
position: absolute;
}

#window.yui-panel .hd .tr {
width: 7px;
height: 22px;
top: 0;
right: 0px;
position: absolute;
}
#progress.yui-panel .bd {
overflow: hidden;
padding: 0px;
margin: 5px;
background-color: #FFF;
}

#progress.yui-panel .ft {
font-size: 75%;
color: #666;
padding: 0px;
overflow: hidden;

border: 1px solid #aeaeae;
border-top: none;
background-color: #dfdfdf;
}

/* Provide skin for custom elements */
#progress.yui-panel .hd span {
vertical-align: middle;
line-height: 22px;
font-weight: bold;
padding-left: 60px;
padding-right: 60px;
padding-top: 30px;
padding-bottom: 30px;
border: 1px solid #aeaeae;
background-color: #dfdfdf;
width: 120px;
height: 60px;
}

#progress.yui-panel .hd .tl {
width: 7px;
height: 22px;
top: 0;
left: 0px;
position: absolute;
}

#progress.yui-panel .hd .tr {
width: 7px;
height: 22px;
top: 0;
right: 0px;
position: absolute;



I'm still not a fan of css/js, but sometimes you gotta use what's available.