Menu
Hello! Long time reader, first time poster.
I’ve been playing with AJAX, specifically with the Yahoo UI Connection Manager. I came across the following code from the nefariousdesigns blog that allows you to easily manage multiple connections on the same page with the YUI CM. I modified the connect method slightly to accept a few more arguments (targetDiv, method, callback). The targetDiv and method work fine, but I can’t figure out how to modify this such that I can pass different callback functions. Right now, upon success, it just sets targetDiv = to whatever responseText is. That is fine for when the page loads, because i have two divs (div1 = display data, div2 = edit form) that get populated upon page load. However, div2 when edited, should send a post request and the callback (i think) would not be to set a div = to anything, but rather to initiate another GET request, that would then reload div1. My thought was rather than hard coding a function to success: that I could pass a function name that is defined elsewhere. I tried and failed at that. Hopefully this rant makes sense. I’m happy to clarify if needed.
[CODE]var NEF = window.NEF || {};
/*
* The AjaxEvent class allows you to create DAOs for handling
* Ajax requests. Upon request success, it fires a custom event
* that handles subscribed functions.
*
* @namespace NEF
* @class AjaxEvent
* @constructor
*/
NEF.AjaxEvent = function() {
return this;
}
NEF.AjaxEvent.prototype = {
/*
* Subscribes a function or method to the custom event.
*
* @method subscribe
* @param {Function} fn The function to execute
* @param {Object} oScope An object to be passed as scope for the function
*/
subscribe: function(fn, oScope) {
if (!this.oEvent) {
this.oEvent = new YAHOO.util.CustomEvent(“ajaxevent”, this, false, YAHOO.util.CustomEvent.FLAT);
}
if (oScope) {
this.oEvent.subscribe(fn, oScope, true);
} else {
this.oEvent.subscribe(fn);
}
},
/*
* Performs an asynchronous request using the YUI Connection manager
* and fires our custom event upon success.
*
* @method connect
* @param {String} sUri Fully qualified path of resource
*/
connect: function(sUri,targetDiv,method,callback) {
if (!sUri && !this.sUri) {
return false;
} else {
this.sUri = (!sUri) ? this.sUri : sUri;
this.dt = new Date().valueOf();
this.sUri = (this.sUri.indexOf(“?”) === -1) ? this.sUri + “?yaetime=” + this.dt : ((this.sUri.indexOf(“yaetime”) === -1) ? this.sUri + “&yaetime=” + this.dt : this.sUri.replace(/yaetime=[0-9]+/i, “yaetime=” + this.dt));
YAHOO.util.Connect.asyncRequest(method, this.sUri, {
success: function (o) {
document.getElementById(targetDiv).innerHTML = o.responseText
},
scope: this
});
}
}
}
Then I call as follows:
[CODE]var myAjaxEvent = new NEF.AjaxEvent();
myAjaxEvent.subscribe(function (o) {
alert(o.property);
});
myAjaxEvent.connect(‘groups-test.asp?action=add’,’divDataDisplay’,’GET’);
myAjaxEvent.connect(‘groups-edit-test.asp’,’divDataAddEdit’,’GET’);