Hi!
I'm following the tutorial creating-a-module to create exactly that - an own module for the backend. But I'm stuck... there isn't enough documentation and there is something happening during the execution of javascript I can't understand.
Btw, I'm still on SS 2.3.
What I want to do: I want to have a button on the left panel, after clicking that a form should appear in the main panel. Later I want to upload a file with this form and process the file... but anyway, that's still to come. I even don't get my form!
What I've done: Followed the creating-a-module tutorial. I've added a new button to the left panel, based on the 'addlink' button, and changed the url to point to my method in the controller script (that thing derived from LeftAndMain).
So in my template for the left panel:
<ul id="TreeActions">
<li class="action" id="uploadXmlFile"><button><% _t('UPLOADFILE','Upload File') %></button></li>
<li class="action" id="addlink"><button><% _t('CREATENL','Create New Link xXx') %></button></li>
<li class="action" id="deletelink"><button><% _t('DEL','Delete Link xXx') %></button></li>
</ul>
<div style="clear:both;"></div>
<form class="actionparams" id="uploadXmlFile_options" style="display: none" action="admin/disease_search/showUploadXmlFileDialog">
<input type="submit" value="<% _t('UPLOADFILE','Upload') %>" />
</form>
<form class="actionparams" id="addlink_options" style="display: none" action="admin/disease_search/addlink">
<!-- etc... nothing modified from here on -->
My JS file looks like:
_HANDLER_FORMS['uploadXmlFile'] = 'uploadXmlFile_options';
XmlFileUploadForm = Class.extend('CMSRightForm');
XmlFileUploadForm.prototype = {
intialize: function() {
this.CMSRightForm.initialize();
},
loadPage_url : 'admin/disease_search/getXmlFileUploadForm',
/**
* Load the given URL (with &ajax=1) into this form
*/
loadURLFromServer : function(url) {
if ( !url.match( /^https?:\/\/.*/ ) )
url = document.getElementsByTagName('base')[0].href + url;
new Ajax.Request( url + '?ajax=1', {
asynchronous : true,
onSuccess : function( response ) {
$('Form_XmlFileUploadForm').successfullyReceivedPage(response);
},
onFailure : function(response) {
alert(response.responseText);
errorMessage('error loading page',response);
}
});
},
successfullyReceivedPage : function( response ) {
// must wait until the javascript has finished
document.body.style.cursor = 'wait';
this.loadNewPage( response.responseText );
var subform;
if ( subform = $('Form_MemberForm') ) subform.close();
if ( subform = $('Form_SubForm') ) subform.close();
// must wait until the javascript has finished
document.body.style.cursor = 'default';
},
didntReceivePage : function(response) {
errorMessage('error loading page', response);
},
/**
* Request a page from the server via Ajax
*/
getPageFromServer : function() {
if ( this.loadPage_url ) {
url = this.loadPage_url;
statusMessage("loading...");
this.loadURLFromServer(url);
}
}
}
XmlFileUploadForm.applyTo('#Form_XmlFileUploadForm', 'right');
uploadXmlFile = {
button_onclick : function() {
uploadXmlFile.showNewForm();
return false;
},
showNewForm : function() {
Ajax.SubmitForm('uploadXmlFile_options', null, {
onSuccess : function(response) {
Ajax.Evaluator(response);
},
onFailure : function(response) {
errorMessage('Error', response);
}
});
}
}
Behaviour.addLoader(function () {
/* like in the tutorial */
Observable.applyTo($('uploadXmlFile_options'));
$('uploadXmlFile').onclick = uploadXmlFile.button_onclick;
$('uploadXmlFile').getElementsByTagName('button')[0].onclick = function() {return false;};
});
And I have a new Form named "Form_XmlFileUploadForm" in my right panel
<% if EditForm %>
$EditForm
<% else %>
<form id="Form_EditForm" action="admin/disease_search/?executeForm=EditForm" method="post" enctype="multipart/form-data" style="$LogoStyle">
<% _t('WELCOME1','<p>Welcome to the Random Links -- xXx') %>
<% _t('WELCOME2','admin section. Please choose a link from the left. --xXx </p>') %>
</form>
<% end_if %>
<% if XmlFileUploadForm %>
$XmlFileUploadForm
<% else %>
<form id="Form_XmlFileUploadForm" action="admin/disease_search/getXmlFileUploadForm" method="post" enctype="multipart/form-data" style="$LogoStyle">
</form>
<% end_if %>
The methods I call are
public function showUploadXmlFileDialog() {
FormResponse::add("$('Form_XmlFileUploadForm').getPageFromServer();");
return FormResponse::respond();
}
public function getXmlFileUploadForm() {
$validator = null;//new RequiredFields( 'File' );
$fields = new FieldSet(
new FileField( 'File', 'Upload File' )
);
$actions = new FieldSet(
new FormAction( 'doUploadXmlFile', 'Upload File' )
);
$form = new Form( $this, "XmlFileUploadForm", $fields, $actions, $validator );
return $form;
}
function doUploadXmlFile( $data = null, $form = null ) {
return FormResponse::respond();
}
Ok, what I hope you got an overview of my code. There shouldn't be anything missing, except for the parts I copied from the tutorial but didn't touch since then. But I can give you the whole files through pastie if you want.
What's happening? I see my filefield as soon as I hit the tab for my module in my CMS. I don't know why SS knows "XmlFileUploadForm" will contain a filefield and the submit button, but anyway... thats not my problem. If I click my button in the left pane, "showUploadXmlFileDialog" gets called, returns that ajax response that calls "getXmlFileUploadForm". But all I get in response is not the form I expect (the form I already see...), but simply "Behaviour.addLoader(hideLoading);" - nothing else. This text gets pasted into my form, the filefield and the submit button disapear and all I can see is this text in plain text in in my CMS. It should get executed as an ajax response, but it doesn't seem so.
More weird stuff:
If I change the response of "showUploadXmlFileDialog" to "$('Form_XmlFileUploadForm').getPageFromServer();$('Form_EditForm').hide()", I get a "Javascript parse error". Don't know why, Firebug doesn't notice anything about this.
If I uncomment the validator to make the field "File" required, I get the response "validationError('File', '\"Upload File\" wird benötigt.', 'required'); statusMessage('Validierung fehlgeschlagen', 'bad');Behaviour.addLoader(hideLoading); " (sorry for the german strings). It seams as if getXmlFileUploadForm tries to validate the form instead of just printing it. Why?
Any ideas?
Thanks!
craesh