programatic dialog - missing execute - no real example

Submitted by manfredsv on Sun, 01/13/2008 - 19:29.

Hello,
I have a problem with creating a dialog programmatically. My excute function is always called before the dialog shows up. And when I press the submit button I get an error in firebug telling: "this.execute is not a function". What I really miss is a complete example how to create a Dialog Window in a programmatic way. Most Examples use HTML declarative.

Here is my code. Maybe somebody can help me to get it running.

function addComment(){
alert("xxx");

}

function createDialog(){
var dialog = new dijit.Dialog({widgetId:"createDialog", id:"createDialog", title:"Kommentar schreiben",execute:addComment()});
content=''
+' '<br/> +' <button dojotype="dijit.form.Button" type="submit">Sichern</button> '<br/> +'';<br/> dialog.setContent(content); <br/><br/> dialog.startup();<br/> dialog.show();<br/> <br/>}<br/></body></html></HTML>

Login or register to post comments
Subscribe post

here's an example

Submitted by dante on Sun, 01/13/2008 - 20:11.

... but it's not passing anything to the addComment arg. I wonder if it's because I didn't have any form elements in the dialog?

hope this helps:

    
	Completely Programatic Dialog and Button test: X-domain | The Dojo Toolkit
	
	
	
		dojo.require("dijit.Dialog");
		dojo.require("dijit.form.Button");

		var addComment = function(){
			console.log(arguments);
		};

		var init = function(){

			// create the dialog
			var foo = new dijit.Dialog({
				title: "created",
				execute: addComment,
				onExecute: addComment
			});
			
			// add it to dom
			dojo.body().appendChild(foo.domNode);
			foo.startup();
			
			// set some content
			foo.setContent("somecontent");

			// make a button
			var buttonNode = foo.containerNode.appendChild(dojo.doc.createElement('div'));
			new dijit.form.Button({
				label:"Submit",
				type:"submit",
				onClick: function(){
					console.log('button clicked');
					return "test"; 
				}
			},buttonNode);

			// show a dialog
			foo.show();

		};
		dojo.addOnLoad(init);

there is no content in the dom on startup in this example.

This does not really help.

Submitted by manfredsv on Sat, 01/19/2008 - 17:09.

This does not really help. But there was one help from it. It seems so, that you need the function "onExecute" to do something at the submit. But it still not works for me. This onExecute-function is fired before the dialog is loaded. I will give you my complete Testpage:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<style type="text/css">
@import "./js/dojo/dijit/themes/tundra/tundra.css";

@import "./js/dojo/resources/dojo.css";
</style>
<script type="text/JavaScript" src="./js/dojo/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/JavaScript">

dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dijit.Editor");

}
function init(){
}
dojo.addOnLoad(init);

</script>
<head>
<title></title>
</head>
<body class="tundra">
<button dojoType="dijit.form.Button" onclick="createDialog()">Kommentar
schreiben</button>

</body>
</html>

The below works, with one

Submitted by frankf on Sat, 01/19/2008 - 20:22.

The below works, with one exception. Changes needed:

1. use "execute:addComment". addComment will be passed an object which contains the dialog fields.

2. loading the dijit.Editor fails. this is a separate problem. the Firefox Firebug error was that dojo couldn't create the widget. need to research this separately. see test files.

3. i modified the js/css pathing for my PC.




@import "js/dojo1/dijit/themes/tundra/tundra.css";

@import "js/dojo/resources/dojo.css";




dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dijit.Editor");

function createDialog(){
if (dijit.byId('createDialog')){
dijit.byId('createDialog').destroy();
//dijit.byId('newComment').destroy();
}
//var dialog = new dijit.Dialog({widgetId:"createDialog", id:"createDialog", title:"Kommentar schreiben", onExecute:addComment(arguments[0])});
var dialog = new dijit.Dialog({id:"createDialog", title:"Kommentar schreiben", execute:addComment});
var content=''
+'  '
+'  '
//+'  '
+'  '
+'  '
+' Sichern '
+'  '
+' '
+'';
dialog.setContent(content);
dialog.startup();
dialog.show();
}
function addComment(dialogfields){
alert('xxx');
//alert(dialogfields.cname);

}
function init(){
}
dojo.addOnLoad(init);






Kommentar
schreiben

Further...it appears the

Submitted by frankf on Sat, 01/19/2008 - 22:23.

Further...it appears the problem with the Editor loading is the parsing can't size the Editor properly, as long as the Dialog is hidden (no parent sizing info). So, moving the setContent just after the .show seems to work, here.

//var dialog = new dijit.Dialog({widgetId:"createDialog", id:"createDialog", title:"Kommentar schreiben", onExecute:addComment(arguments[0])});
var dialog = new dijit.Dialog({id:"createDialog", title:"Kommentar schreiben", execute:addComment});
content=''
+'  '
+'  '
+'  '
+'  '
+'  '
+' Sichern '
+'  '
+' '
+'';
dialog.startup();
dialog.show();
dialog.setContent(content);
}
function addComment(dialogfields){
alert('xxx');
//alert(dialogfields.cname);

}

Thank you, the secret was

Submitted by manfredsv on Sun, 01/20/2008 - 00:23.

Thank you, the secret was the wrong argument in the onExecute function. And I've got also the text now from the Editor. You need this function:

function addComment(){

 alert(dijit.byId("newComment").getValue(false));

}

In your first post under "1." You stated that the fields of the dialog are passed to the function. How can I access these?

Kind regards
Manfred

The execute method (not the

Submitted by frankf on Sun, 01/20/2008 - 01:19.

The execute method (not the onExecute method) returns an object that includes all the submitted fields and their values. The field will need to be "named". Run the code below. When the dialog appears, enter some text. Then click the submit button. The alert box will display the text in the field. You can see how to reference the various fields that were submitted, by looking at the alert statement. A useful testing tool is to declare a global variable, in this case: temp. In the function called via the execute method, assign the passed object to the temp variable. In Firebug you can then console.dir(temp) and see all the properties (and methods, if available) of the passed object.




@import "js/dojo1/dijit/themes/tundra/tundra.css";

@import "js/dojotoolkit/dojo/resources/dojo.css";




dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dijit.Editor");

function createDialog(){
if (dijit.byId('createDialog')){
dijit.byId('createDialog').destroy();
//dijit.byId('newComment').destroy();
}
//var dialog = new dijit.Dialog({widgetId:"createDialog", id:"createDialog", title:"Kommentar schreiben", onExecute:addComment(arguments[0])});
var dialog = new dijit.Dialog({id:"createDialog", title:"Kommentar schreiben", execute:addComment});
content=''
+'  '
+'  '
+'  '
+'  '
+'  '
+' Sichern '
+'  '
+' '
+'';
dialog.startup();
dialog.show();
dialog.setContent(content);
}
var temp;
function addComment(dialogfields){
alert(dialogfields.editorText);
//alert(dialogfields.cname);
console.dir(dialogfields);
temp = dialogfields;
}
function init(){
}
dojo.addOnLoad(init);






Kommentar
schreiben

Perfect, its working now,

Submitted by manfredsv on Sun, 01/20/2008 - 09:28.

Perfect, its working now, THANK YOU!

Search