Here is my code:
/**
* Page template part setup div
*/
(function(jQ){
/**
* form state
*/
var STATE = "new";
/**
* Request URL
*/
var RequestUrl = rootUrl+"/aranAjx.php?mod=pages";
/**
* indicator if there is one form is open
*/
var formOpen = false;
/**
* Actions
*/
var MODULE_LIST = "act=modules";
/**
* Load image object
*/
var loadImgObj = jQ("<img></img>").attr("id", "stdLoadImg").attr
("src", jQ.STD_LOAD_IMG);
/**
* Object of template part form
*/
var PartObj = null;
/**
* HTML select object of availble options
*/
var ModulesListObj = null;
/**
* Events
*/
var OnBeforeSend = function(){
jQ(this).append(loadImgObj);
};
var OnSuccess = function(data){
//parse the data
if(data['status'] == "OK"){
ShowFormMessage(data['body']['message']);
//change tha action to edit
jQ("#action").val("edit");
jQ("#tplName").attr("readonly", "readonly");
} else if(data['status'] == "FAIL"){
ShowFormError(data['reason']);
}
};
var OnSuccessGetMosules = function(data){
//parse the data
if(data['status'] == "OK"){
var modules = data['body']['modules'];
ModulesListObj =
jQ("<select></select>").change(OnModuleSelect);
jQ.each(modules, function(i, module){
jQ("<option></option>").attr("value",
module.modeCode).text
(module.name).appendTo(ModulesListObj);
});
ModulesListObj.insertBefore(loadImgObj);
} else if(data['status'] == "FAIL"){
ShowFormError(data['reason']);
}
};
var OnError = function(txt){
ShowFormError("Fatal error during request: "+txt);
};
var OnComplete = function(){
jQ(loadImgObj, this).remove();
};
/**
* init part
*/
jQ.fn.PartInit = function(){
if(formOpen){
return;
}
if(!jQ(this).is("div")){
$.log("Template part form must be 'DIV' element!");
}
PartObj = this;
if(STATE == "edit"){
} else if (STATE == "new"){
//send the reauest for module list first.
var options = {
url: RequestUrl,
data: MODULE_LIST
};
//bind events
this.onBeforeSend = OnBeforeSend;
this.onError = OnError;
this.onComplete = OnComplete;
this.onSuccess = OnSuccessGetMosules;
//send ajax request
jQ(this).ijajax(options, this);
return jQ(this);
}
}
/**
* Module selection event handler
*/
var OnModuleSelect = function(){
alert(jQ("option:selected", ModulesListObj).val());
};
/**
* Show form error
*/
var ShowFormError = function(err){
jQ("<div></div>").addClass("araneumErrDiv").text(err).prependTo
("#tplPartsContainer");
};
/**
* Show form message
*/
var ShowFormMessage = function(mess){
jQ("<div></div>").addClass("araneumMessDiv").text(mess).prependTo
("#tplPartsContainer");
};
/**
* remove error and message divs
*/
var RemoveErrorMessage = function(){
jQ(".araneumMessDiv,.araneumErrDiv").remove();
};
})(jQuery)
