PDA

View Full Version : Basic usage of YAHOO.ext.UpdateManager



angusf
10 Oct 2006, 9:13 PM
Hopefully the following is clear, I'm new to js coding and terminology.

The following function causes the indicatorText to be displayed but then nothing, no error in javascript console, the "callback" functions do not appear to be called, and there is no apparent server response.



function loadContentPane() {
var updateMgr = new YAHOO.ext.UpdateManager('bottomPane');

var failedLoad = function() {
YAHOO.ext.Element.get('bottomPane').update("Failed to load");
};

var okLoad = function() {
//do stuff
};

updateMgr.showLoading()
updateMgr.onFailure.subscribe(failedLoad);
updateMgr.onUpdate.subscribe(okLoad);
updateMgr.update('contentpane.php');

}


What am I doing wrong?

Also is it possible to call YAHOO.util.Connect methods on YAHOO.ext.UpdateManager objects e.g. something like

YAHOO.util.Connect.isCallInProgress(updateMgr) to determine if the update is still in progress?

Thanks for all help.

Angus

jack.slocum
11 Oct 2006, 1:28 AM
I don't see anything in particular wrong with your code. I might change it a little:



function loadContentPane() {
var bottom = YAHOO.ext.Element.get('bottomPane');
var updateMgr = bottom.getUpdateManager();

var failedLoad = function() {
bottom.update("Failed to load");
};

var okLoad = function() {
//do stuff
};

//updateMgr.showLoading() <-- UM will call this for you
updateMgr.onFailure.subscribe(failedLoad);
updateMgr.onUpdate.subscribe(okLoad);
updateMgr.update('contentpane.php');

}


What are you doing in okLoad? Have you tried alert() in there?

YAHOO.util.Connect.isCallInProgress(updateMgr) to determine if the update is still in progress?

No but that's a great suggestion. I will add it.

angusf
11 Oct 2006, 2:01 AM
Thanks Jack - I'm really enjoying your yui.ext ... but sometimes the simplest things stump me.

An Alert in the onUpdate handler or even straight after the call to update() never occurs. Below is the code as used:


Inkoid.Header = function () {


function loadContentPane() {
var bottom = YAHOO.ext.Element.get('bottomPane');
var updateMgr = bottom.getUpdateManager();

var failedLoad = function() {
bottom.update("Failed to load");
};

var okLoad = function() {
alert("loaded");
};

updateMgr.onFailure.subscribe(failedLoad);
updateMgr.onUpdate.subscribe(okLoad);
updateMgr.update('contentpane.php');
alert("test");
}

return {
loadContentPane: function(){
loadContentPane();
},
init: function() {

}
}

} ();

YAHOO.util.Event.onAvailable('dragBar', Inkoid.Header.init, Inkoid.Header, true);

It appears to be called correctly the contents of the div with ID bottomPane are replaced with "Loading..." but then nothing. using Live HTTP Headers extension I don't see anything sent to the server. And no javascript errors in the console either.

angusf
11 Oct 2006, 3:03 AM
OK, as it sometimes does desperation forced me to see the problem.

I'd forgotten to include the YUI connection.js file and the lack of error messages left me blind. Not sure why but when i recreated the code in an unencapsulated form I got an error message and was able to discover the missing file.

Thanks for your help.

jack.slocum
11 Oct 2006, 3:10 AM
This may seem silly, but did you include connection.js from YUI?

You are working with a server not the local file system?

contentpane.php does return something?

onAvailable shouldn't be used with any method that modifies the DOM since it fires when the document is in "interactive" state (readonly) in ie and causes the browser to throw strange exceptions. It's fine if you aren't adding/removing nodes though.

Have you tried setting the timeout very low (say 5 seconds) in case it is hanging.

If none of these are the issue, can you try making a standard asyncRequest call and see if you get the same result?

I'm sorry if these questions seem silly, I just can't see anything wrong with your code and I am guessing at this point.

angusf
11 Oct 2006, 3:19 AM
Thanks Jack

You were right to ask! -Not so silly after all.

& thank you for your efforts - even in retrospect your questions are actually quite helpful for a beginner.

jack.slocum
11 Oct 2006, 3:55 AM
No problem, glad it's working now. Which one was it if I may ask?
For the loading message, if you include the css for loading-indicator is your css file (this is from my blog):



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


You can get a nice loading indicator automatically on all your updates.

angusf
12 Oct 2006, 8:19 PM
It was the missing connection.js, of course.