Basic Dialog Form plus submit example?

[rob30UK]

I have looked all over, but cant seem to find what I want and assume there isnt an existing example.

I want a simple dialog that gathers email address and website address....

Can anyone point me in the right direction? I pretty new to YUI and Jacks excellent yui-ext work.

Your helps would be most welcomed.

Thanks,

Rob

[Animal]

This is what we doctors call "work".

[rob30UK]

I'm sure you do....

However, I am working pretty hard to get my head round this. What I'm doing I am sure is a very common task thats been done loads in yui-ext. I'm sure an example, or tutorial exists, or maybe someone out there is willing to share some EXISTING code I can get an idea from. I just want a nudge in the right direction.

I didnt ask you to do it for me did I?

I am a new member here.... this is my second post, and with respect (as an owner of a large forum myself), I dont think your reply was in any way helpful or constructive.

[tryanDLS]

As the owner of large forum, you should be familar with the numerous posters who want something for nothing. Your post doesn't indicate that you tried and ran into a problem, which somebody might have a solution for.

Did you try to put a form in the simple dialog sample? Did you look at the samples at all? You could probably drop the dialog from the blog sample into your app with little effort.

[rob30UK]

As the owner of large forum, you should be familar with the numerous posters who want something for nothing.

Yes, We get that a fair bit being a design / development forum... and the help is usually given in cases where people have tried. We get a lot of 'do my homework' posts which frankly upset me in much the same way as they probabally upset you.

Your post doesn't indicate that you tried and ran into a problem, which somebody might have a solution for.

- Well, that is true, yes - I apologise.... fact is, I've been banging my head on the wall with it for hours. I can get the form in the dialog, of course, but how to submit it with ajax and then close the form - I've been looking for something that can validate input also.

I am a server side developer (mainly ASP and a tiny bit of PHP) and AJAX (the javascript bit) is kind of hard to bend my brain around as ASP isnt really an OOP language.

Did you try to put a form in the simple dialog sample? Did you look at the samples at all?

Yes I did look at the samples.... but was looking for one with a form (any form) that submits via AJAX, and then closes.

You could probably drop the dialog from the blog sample into your app with little effort.

Thats sounds as though it would have everything in it I would need to learn from....... I just cant find it... it's not in the documentation under examples as far as I can tell... maybe I'm blind. Do you have a url?

[tryanDLS]

It's not in the doc center, but it is in the examples folder of the download pkg in examples\dialog\blog.html. The tabs examples I believe also illustrate using UpdateManager to load tab content via Ajax.

[brian.moeskau]

Hi Rob,

The problem for us is that there are lots of ways to accomplish things and the question was pretty open-ended. Also, it's hard to summarize what you're asking in a breif answer as there are lots of pieces of code required for a good example. Most people are busy actually building their apps, not putting together tutorials (hopefully this will change, but realize that the framework is still only a few months old and we're mostly pretty new too!).

That said, I'll try to point you in the right direction.

I have a page with a form in a dialog like so (all html/code abbreviated obviously):

<form action="[server page]" name="myform" method="post" id="myform" onsubmit="return false;">
		<div id="my-dlg" style="visibility:hidden;">
			<div class="ydlg-hd" id="title">Dialog Title</div>
			<div class="ydlg-bd">
				<div id="main-tab" class="ydlg-tab" title="Details">
					<div class="inner-tab">
						<input type="hidden" id="evt-id" name="id" />
						<label for="title">Title:</label> <input type="text" id="evt-title" name="title" />

						<label for="startdate">Start:</label> <input type="text" id="evt-startdate" name="startdate" />

						<label for="enddate">End:</label> <input type="text" id="evt-enddate" name="enddate" />

						<label for="url">Url:</label> <input type="text" id="evt-url" name="url" />
					</div>
				</div>
				<div id="info-tab" class="ydlg-tab" title="Additional Info">
					<div class="inner-tab">
						[more form elements or whatever]
					</div>
				</div>
			</div>
			<div class="ydlg-ft">
				<div id="dlg-msg">
					<span id="post-error" class="posting-msg">[img]../../images/warning.gif[/img]<span id="post-error-msg"></span></span>
					<span id="post-wait" class="posting-msg">[img]../../images/grid/loading.gif[/img]Saving event...</span>
				</div>
			</div>
		</div>

Standard form wrapped in a tab div, wrapped in a dialog structure. Note the onsubmit="return false;" so the form doesn't post the page back. Make sure that the form wraps your dialog and is not embedded inside it -- otherwise it will not submit correctly. You'll need js code that actually sets up the dialog -- see the docs for that. The trick to getting a button is adding it programmatically to the dialog:

okButton = evtDialog.addButton('Save', this.saveForm, this);

Then you simply code the "saveForm" routine that does all the work. Again, there are many ways of doing this depending on what platform etc. Here's an example of just using the YUI way of doing it:

		saveForm : function(e) {
			okButton.disable();
			YAHOO.util.Connect.setForm(document.getElementById('myForm'));
			
			var successCB = function(o){
				try {
					okButton.enable();
					var data = renderer.parse(o.responseText);
					if (data) {
						if (data.status == "ok") {
							renderer.replace(data.event);
							dialog.hide();
							this.showMsg('Event "' + data.event.title + '" was updated');
						}
						else {
							// show dialog errors
							alert(data.msg);
						}
					}
					else {
						alert(o.responseText);
					}
				} 
				catch(er) {
					alert(er);
				}
			};

			var failureCB = function(o){
				okButton.enable();
				alert(o.responseText);
			};

			YAHOO.util.Connect.asyncRequest('POST', '[server page]', 
				{ success: successCB, failure: failureCB, scope: this });
		},

There's lots of stuff in here that I don't have time to explain, like how to implement a custom renderer, etc. but it shows submitting the form, getting the callback, and hiding the dialog only on success (dialog.hide()). This should point you in the right direction, but please take the time to go through the example projects, esp. the feed viewer. That's what most of us have done to learn it and get examples!

HTH, Brian

[brian.moeskau]

Re: validating input, that is not there yet except for the validators built into the grid class. However, the next major version of Ext AFTER .40 will most likely contain a comprehensive forms architecture including generic form validation. For now, however, you'll have to roll your own.

[rob30UK]

bmoeskau, I cant thank you enough...

Between your code, and the example you kindly pointed me too (which was under my nose... rofl) I'l easy have enough to take it from here.

I will be making a donation to the project once this app is built.

[brian.moeskau]

Hey Rob,

Glad it helped. If you have any specific issues getting things working, please don't hesitate to post your code! The folks here are usually pretty quick to spot issues and suggest solutions when there's something to look at.

Brian