> On Nov 9, 2009, at 8:51 AM, ColinFine wrote:
> > On Nov 6, 7:14 pm, Rhiq <ndba...@gmail.com> wrote:
> >> I'll try to explain what I am up to; feel free to slap me if I am
> >> really messing this up.
> >> I have a table that represents orders in a database, and it seems to
> >> be working fine. When the user clicks on an order a div is updated
> >> using an Ajax.updater call. This works well, the information is some
> >> html code that gives details of the order. It includes an edit link,
> >> and when the user clicks this another Ajax.updater updates the same
> >> div - this time with a form. That seems to work will to.
> >> Here is the problem that I am running into. When the submit button
> >> is
> >> clicked, I want the data to be saved and the div to by updated again
> >> with the refreshed order details. I can't seem to come up with a way
> >> that works.
> > Do you mean that *instead* of doing an HTML submit (which always does
> > a GET or POST fetch of the whole page) you want to do an Ajax
> > operation which only refereshes the div?
> > In that case, don't use a 'submit' input at all: use a button (you can
> > call it 'submit' if you like) and observe it with a 'click'.
> > If you are concerned about getting all the inputs from from form, see
> > Form.serialize().
> There's a great shortcut method in Prototype: Form#request().[1] It
> takes a normally-wired form and "hijacks" it to send via Ajax. Then
> it's up to your server to return a lump of JavaScript to update the
> DIV in question if the form was submitted via Ajax.
> It also follows the general usability guideline (dare I say RULE?)
> that says -- first make it work, then make it pretty. By that I mean
> that someone coming to your site without JavaScript should be able to
> get along fine with everything you expect JavaScript to do, they just
> won't have as "pretty" an experience of it. So your "click to load a
> form" effect should lead to another page containing that form, and
> your Ajax form submit should load back the original page with the
> updated DIV in place, rather than just quietly updating the DIV
> without a page refresh.
> So let's say you have injected a form into your page:
> <form action="form_handler.php" id="myForm" method="post">
> <input type="text" name="foo" value="<?=$foo?>" />
> <input type="submit" value="update" />
> </form>
> You would wire it to submit by Ajax thusly:
> $('myForm').observe('submit',function(evt){
> evt.stop();
> var div = this.up('div'); //or whatever you want to update
> this.request({
> onComplete:function(transport){
> div.update(transport.responseText);
> },
> evalScripts:true
> });
> });
> Request takes care of the parameters for you -- everything about the
> form that is already set in the source will behave exactly the same
> way, except that the form submission will happen over the Ajax pathway
> rather than a normal submission.
> >> The other question I have is how to attach an observer to a
> >> dynamically created element - like my form?
> > Either include some Javascript in the HTML you send from the Ajax
> > request, to set up an event handler (use Element.observe() rather than
> > the HTML 'onClick' property - in this case you will need to set
> > 'evalScripts: true' in your Ajax.Updater options
> > Or, the better solution is to attache a handler to an element which
> > doesn't change (your <div> probably) and delegate handling.
> > If you say
> > $('mydiv').observe('click', function(ev) {
> > var input = ev.findElement('input');
> > if (input) ...
> > then any pick on your div, irrespective of how many times its contents
> > have changed, will call that function (which I've written inline, but
> > could be a named function), which will check whether the pick was
> > actually inside an <input> element - any <input> element - and if so
> > take action.
> Hope this helps,
> Walter
> 1.http://api.prototypejs.org/dom/form.html#request-class_method
|
