PDA

View Full Version : update the content of a ContentPanel :|



luke83
26 Oct 2006, 1:44 AM
hello i'm using this code to try something with this wonderfull framework...

the js:


<script>
Example = function(){
var layout;
return {
init : function(){
layout = new YAHOO.ext.BorderLayout(document.body, {
hideOnLayout: true,
north: {
split:false,
initialSize: 25,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true
},
center: {
titlebar: true,
autoScroll:true
}
});

layout.beginUpdate();
layout.add('north', new YAHOO.ext.ContentPanel('north', 'North'));
layout.add('south', new YAHOO.ext.ContentPanel('south', {title: 'Messaggi', closable: true}));
layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'West'}));
layout.add('east', new YAHOO.ext.ContentPanel('rooms', {title: 'Stanze', closable: true}));
layout.add('east', new YAHOO.ext.ContentPanel('userslist', {title: 'Lista Utenti', closable: true}));
layout.add('center', new YAHOO.ext.ContentPanel('center1', {title: 'Conversazione1', closable: true}));
layout.add('center', new YAHOO.ext.ContentPanel('center2', {title: 'conversazione2', closable: false}));
layout.getRegion('center').showPanel('center1');
layout.getRegion('west').hide();
layout.endUpdate();
},

toggleWest : function(link){
var west = layout.getRegion('west');
if(west.isVisible()){
west.hide();
link.innerHTML = 'Show West Region';
}else{
west.show();
link.innerHTML = 'Hide West Region';
}
}
}

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


the html body:


<body>
<div>
<div>
Hi. I'm the west panel.
</div>
<div>
Logo, ect.
</div>

<div>
qui ci vanno le stanze
</div>

<div>
qui ci vanno gli utenti
</div>

<div>


Show West Region (#)</p>


qui ci va tutta la 2a conversazione</p>
</div>
<div>


qua ci va tutta la 1a conversazione</p>
</div>
<div>
</div>
<div>
south - generally for informational stuff, also could be for status bar
</div>

</div>
</body>



so i would like to "refresh" every xx secs the content of the east contentPanel named "userslist" with some html, exactly i would like to create at application start time an html list (ul) and periodically update this one with users info...

i played with ext.Element and ext.DomHelper but i got no result, even i have errors in the js "el is not defined" or "appendChild is not a function"

Please, may u help a php developer that love so much this super library!!!???

thx to all...

[EDIT]
forum parser broke my html, hiding div args.. but the structure is similar to that one u find in this html: http://www.jackslocum.com/blog/examples/layout6.htm

jbowman
26 Oct 2006, 4:59 AM
since phpbb strips out your arguments, I'm basing this off of your description after your code, going with the idea you want to autorefresh a div called "userlist".

At the end of your init, try something like



var mgr = new YAHOO.ext.UpdateManager('userlist');
mgr.startAutoRefresh('(URL TO CALL', (int value of seconds to do the refresh)); // ie: ('http://mysite/phpfile.php', 15)


Note: This example is untested. Also, I would suggest looking at http://www.jackslocum.com/docs/overview-summary-UpdateManager.js.html

Edit: That code block may wrap, that should only be two lines

luke83
26 Oct 2006, 5:28 AM
thanks a lot for your reply but i'm so stupid with this kind of programming js based,doh :D

so.. my problem is - also - in that div i would like to show a list genereted every xx secs (now i'm studying YAHOO.ext.UpdateManager and the related documentation).

i try to explain, sorry so much my bad english :D
when i call the updater function i need in some way to put in the div called "userslist" something like


<ul>
user1
user2
user3
[/list]

i don't know how to do this

i read about YAHOO.ext.DomHelper and i would like to use it too but i don't know how

please don't leave me alone with this problem, 'cause i want to learn so much to use correctly the library

of course, i have to pay u to drink when i will see u :D :D :D

[edit]
ok, i tried to use the YAHOO.ext.UpdateManager but i always obtain a loading message in my div.. never i have the content i put in the file called in the function startAutoRefresh

why this behavior?

ps: i correctly set 777 chmod to file to "include"

jack.slocum
26 Oct 2006, 8:05 AM
We will use the example 6's 'west' container as the example. The code below goes somewhere in your initialization code pasted above. userlist.php is the PHP file that is providing the list you posted above.


var west = getEl('west');
west.getUpdateManager().startAutoRefresh(60, 'userlist.php');


This will update the west panel with the html that userlist.php returns every 60 seconds.

jbowman
26 Oct 2006, 8:09 AM
The autorefresh as I understand it (albeit I haven't used it yet) just does an update to the url, at the interval set. The url should be a file that returns the data you want displayed in the element you are updating.

So say you were building a clock. You have your div with the id set to "time". Then you set up your javascript to do



var mgr = new YAHOO.ext.UpdateManager('time');
mgr.startAutoRefresh(60, '/time.php');


You would have a file in your webroot called "time.php". It's contents would be



<?php
$time = date('h:i:s A');
print $time;
?>


Then, every 60 seconds, the time div will get updated with the output of that script, which should change the minute every time it runs.

Note: Once again, i wrote that code as I went when writing this post, I'm not guaranteeing it against typos and malformed syntax.

jbowman
26 Oct 2006, 8:11 AM
aha I got the arguments reversed (jack you may want to check the example in that file I originally linked to). I'll edit my post in a sec

jack.slocum
26 Oct 2006, 8:14 AM
Yep, the example in the docs was bogus. Nice job jack! Anyway, I fixed it. :D

luke83
26 Oct 2006, 8:34 AM
ok..

so..

it appear to go..

only two question and then i will send you both a coke... :D

1) how can i put the loading at the start of execution? is it possible to use a little gif as in the blog home in the right where then it show the post's view? :D
2) why when it get the file content it put this content before the actual text (and it change the height of the panel broking the layout :() of the div? Is thhere a way to "replace" actual text in the div? And first of all don't alter the height of the div? :D

Men, i'm very happy to found two patient boy as u... :D

jbowman
26 Oct 2006, 10:52 AM
whenever I have used update, it's replaced the content of the element I've been updating. I'd look at your layout and make sure your updating the right element.

As for changing the loading message, I believe that's been asked in these forums before, try searching for it :)

jack.slocum
26 Oct 2006, 7:40 PM
For the loading indicator I sue this CSS:



.loading-indicator {
font-size:8pt;
background-image: url('/blog/images/wait.gif');
background-repeat: no-repeat;
background-position: left;
padding-left:20px;
}


For modifying the loading indicator stuff, look at YAHOO.ext.UpdateManager.defaults, it has everything to be modified.

As jbowman said, it also pays to search so no one has answer a 2nd, 3rd or 10th time the same question. :)

luke83
27 Oct 2006, 1:08 AM
ok, u're right for the stupid question,

so.. if i use this code:



YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
var mgr = new YAHOO.ext.UpdateManager('rooms');
mgr.startAutoRefresh(10, 'rooms.php');
var mgr2 = new YAHOO.ext.UpdateManager('userslist');
mgr2.startAutoRefresh(10, 'users.php');


i have this problem, look :D

http://img207.imageshack.us/img207/6743/1mi8.gifhttp://img208.imageshack.us/img208/3029/2xs9.gif
this is my east container and related two contentPanel "stanze" (rooms) and Lista Utenti (userslist)

now when start updating calling the files users.php and rooms.php, i obtain this: :o

http://img213.imageshack.us/img213/189/3nz8.gif

As you can see the lower area of east Container is broken, there is not the ability to change ContentPanel..

what's wrong in my code or in my layout (i renamed only label of exemple6 to try to use your library) and it is the same if i use only one updater manager

jbowman
27 Oct 2006, 4:53 AM
as a suggestion, you may want to hold off on playing with the borderlayout until Jack does a release. I'm not sure what version is active on the site, but I do know he's already said he's made some changes in development to cover a lot of issues.

for a test of your code, try going back to basics a bit...

implement a simple div using autorefresh to see your results
implement a tab panel with one of the tabs using autorefresh to see the results, if they don't work here, try playing with some of the tab options (ie: load every view, or load once).

luke83
27 Oct 2006, 6:28 AM
ok.. i will try what u suggest later.. and i will tell u if there will be better.. 8)

thank u, so much for the attention and the time spend for me.. :roll:

:D