Re: [jQuery] Form plugin revisited ;-)
Thanks for catching that! I totally missed that the 'get's weren't working and that the 'get' was not augmenting the url. I'll have to improve my unit tests! I'll be committing the form plugin to svn within the next day or two. All, The form plugin has been updated in svn. It now includes the changes discussed earlier on this thread along with the 'GET' bug fix that Klaus pointed out. The big change to be aware of is that the serialize method now returns a '' delimited string suitable for posting/getting. The formToArray method returns an array of objects which represent the form data (full documentation inline). Also worth noting is that the target argument to ajaxSubmit and ajaxForm can now be a jQuery selector string, a jQuery object, or a DOM element. As always, sample usage can be found at: http://malsup.com/jquery/form/ Thanks to everyone for all the good discussion and good ideas. Mike ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Form plugin revisited ;-)
Hi Mike,
if I use the following snippet:
var formIdSelector = '#hijax-me';
$(formIdSelector).ajaxForm(formIdSelector);
on a form with GET method it still posts the data. I changed ajaxSubmit
to this to make it work:
(http://stilbuero.de/demo/jquery/hijax.html
http://stilbuero.de/demo/jquery/form.js)
jQuery.fn.ajaxSubmit = function(target, post_cb, pre_cb, url, mth,
semantic) {
var a = this.formToArray(semantic);
var m = this.attr('method') || 'GET';
// give pre-callback opportunity to abort the submit
if (pre_cb pre_cb.constructor == Function pre_cb(a, this) ===
false) return;
url = url || this.attr('action') || '';
// if no target or 'post' callback was provided then default to a
callback
// that evals the response
var t = target || post_cb || function(r) {
if (r.responseText) eval.call(window, r.responseText)
};
if (t t.constructor == String)
if (m == 'GET')
jQuery(t).load(url + '?' + jQuery.param(a), post_cb);
else
jQuery(t).load(url, a, post_cb);
else
jQuery.ajax({ url: url, success: t, data: jQuery.param(a),
type: mth || m});
return this;
};
Other than that, I'm starting to love this plugin!
-- Klaus
Mike Alsup schrieb:
I've updated the form plugin once again to fix a bug in ajaxSubmit
which I found while unit testing. I thought I'd take this opportunity
to summarize the changes made recently:
1. Incorporated Matt Grimm's optimized serialization code.
2. Defaulted the form method to 'GET' per Klaus's suggestion.
3. Fixed ticket #160 using suggestions from Renato and Jörn.
4. Fixed bug in ajaxSubmit which caused inconsistent callback args in
post-callback method.
5. Fixed bug in image submit element coordinates (requires dimensions plugin)
6. Updated documentation in the source file.
I think (hope) everyone is on-board with the changes listed above.
I'm also suggesting two other changes:
1. Rename form plugin's current serialize method to formToArray
2. Create a new serialize method in the plugin which returns the ''
delimited string.
These last two items may cause issues for some but to me they are far
more intuitive than what we currently have and I think the discussions
earlier this week were leading in this direction. Currently, the form
plugin's serialize method returns an array of objects and core's
serialize method returns a '' delimited string.
On a final note, I've updated the demo page to include a link to run
the unit tests. If some of you Safari users could run the unit tests
I would appreciate it.
Demo page: http://malsup.com/jquery/form/
Unit test: http://malsup.com/jquery/form/test.html
Mike
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Form plugin revisited ;-)
Klaus,
Thanks for catching that! I totally missed that the 'get's weren't
working and that the 'get' was not augmenting the url. I'll have to
improve my unit tests!
I'll be committing the form plugin to svn within the next day or two.
Thanks again.
Mike
jQuery.fn.ajaxSubmit = function(target, post_cb, pre_cb, url, mth,
semantic) {
var a = this.formToArray(semantic);
var m = this.attr('method') || 'GET';
// give pre-callback opportunity to abort the submit
if (pre_cb pre_cb.constructor == Function pre_cb(a, this) ===
false) return;
url = url || this.attr('action') || '';
// if no target or 'post' callback was provided then default to a
callback
// that evals the response
var t = target || post_cb || function(r) {
if (r.responseText) eval.call(window, r.responseText)
};
if (t t.constructor == String)
if (m == 'GET')
jQuery(t).load(url + '?' + jQuery.param(a), post_cb);
else
jQuery(t).load(url, a, post_cb);
else
jQuery.ajax({ url: url, success: t, data: jQuery.param(a),
type: mth || m});
return this;
};
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Form plugin revisited ;-)
These last two items may cause issues for some but to me they are far
more intuitive than what we currently have and I think the discussions
earlier this week were leading in this direction. Currently, the form
plugin's serialize method returns an array of objects and core's
serialize method returns a '' delimited string.
I'd like you to consider the following scenario:
A form is to be submitted via ajaxForm. I wanto to validate the form on the
client-side first. For this, I want to use a plugin that allows me to put the
validation rules into the markup (something like this:
http://fuzz.bassistance.de/jQueryFormValidation/validateTest.html). If I try to
use the form's plugin pre-callback, I only get the serialized data, without
access to the DOM elements.
My idea so far: Add more stuff to the array per element, resulting in something
like this:
[{
name: firstname,
value: Peter,
submit: true,
element: domInputElement
}, {
name: agree,
value: on,
submit: false,
element: domCheckBoxElement
}]
The serialize method would then convert all entries with a submit value true
into the query string.
An idea to boost the performance of the formToArray method while retaining
order:
$('*', context).filter(':input')...
That would start with all elements within the form to guarantee order, and
remove all invalid elements (divs etc.) before iterating and scanning them.
An alternative to the above extended array/objects would be to just pass the
jQuery object that contains all form elements as a second parameter to the
pre-callback. The validation could the access all form elements and use the
validation rules within the elements to check the entries in the array.
On a final note, I've updated the demo page to include a link to run
the unit tests. If some of you Safari users could run the unit tests
I would appreciate it.
Demo page: http://malsup.com/jquery/form/
Unit test: http://malsup.com/jquery/form/test.html
Great to see the testrunner in action for something else then jQuery itself.
The code looks like you just wrote that directly into the html page, instead of
generating it, right? That's something that might be preferable for jQuery, too.
-- Jörn
--
GMX DSL-Flatrate 0,- Euro* - Überall, wo DSL verfügbar ist!
NEU: Jetzt bis zu 16.000 kBit/s! http://www.gmx.net/de/go/dsl
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Form plugin revisited ;-)
On 13/10/06, Jörn Zaefferer [EMAIL PROTECTED] wrote:
An idea to boost the performance of the formToArray method while retaining
order:
$('*', context).filter(':input')...
-- Jörn
That would remove textarea's and buttons though (or does :input
already take that into account?)
Would it really boost performance as you are still getting all the
elements in the first place and then applying a filter?
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Form plugin revisited ;-)
Original-Nachricht
Datum: Fri, 13 Oct 2006 11:57:41 +0100
Von: Sam Collett [EMAIL PROTECTED]
An: jQuery Discussion. discuss@jquery.com
Betreff: Re: [jQuery] Form plugin revisited ;-)
On 13/10/06, Jörn Zaefferer [EMAIL PROTECTED] wrote:
An idea to boost the performance of the formToArray method while
retaining order:
$('*', context).filter(':input')...
-- Jörn
That would remove textarea's and buttons though (or does :input
already take that into account?)
Would it really boost performance as you are still getting all the
elements in the first place and then applying a filter?
:input's implementation:
input: a.nodeName.toLowerCase().match(/input|select|textarea|button/)
So selecting $(':input', context) should be the same as $('*',
context).filter(':input'), but faster.
-- Jörn
--
GMX DSL-Flatrate 0,- Euro* - Überall, wo DSL verfügbar ist!
NEU: Jetzt bis zu 16.000 kBit/s! http://www.gmx.net/de/go/dsl
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Form plugin revisited ;-)
An alternative to the above extended array/objects would be to just pass the
jQuery object
that contains all form elements as a second parameter to the pre-callback.
The validation
could then access all form elements and use the validation rules within the
elements to
check the entries in the array.
That's a great idea, Jörn. I prefer that to adding to the array since
the jQuery object will be able to provide everything anyone could
need.
Great to see the testrunner in action for something else then jQuery itself.
The code looks
like you just wrote that directly into the html page, instead of generating
it, right?
Yes, it's all just hard-coded into the test page.
selecting $(':input', context) should be the same as $('*',
context).filter(':input'), but faster.
Thanks for the tip. I'll take a look at that.
Mike
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Form plugin revisited ;-)
HiI'm quite interested in stuffs related to forms (I wrote a little form validation jquery plugin before to discover the existing one)but I did not found anything about ajax file upload.I know the 'ajax file upload' in itself is impossible (no access to filesystem), but there is some solutions with the use of an Iframe.Do you know if such script exists as jquery plugin ?or at least unfinished attempts I could build on ?thxolivvv On 10/13/06, Mike Alsup [EMAIL PROTECTED] wrote: I've updated the form plugin once again to fix a bug in ajaxSubmitwhich I found while unit testing.I thought I'd take this opportunityto summarize the changes made recently:1. Incorporated Matt Grimm's optimized serialization code. 2. Defaulted the form method to 'GET' per Klaus's suggestion.3. Fixed ticket #160 using suggestions from Renato and Jörn.4. Fixed bug in ajaxSubmit which caused inconsistent callback args inpost-callback method. 5. Fixed bug in image submit element coordinates (requires dimensions plugin)6. Updated documentation in the source file.I think (hope) everyone is on-board with the changes listed above.I'm also suggesting two other changes: 1. Rename form plugin's current serialize method to formToArray2. Create a new serialize method in the plugin which returns the ''delimited string.These last two items may cause issues for some but to me they are far more intuitive than what we currently have and I think the discussionsearlier this week were leading in this direction.Currently, the formplugin's serialize method returns an array of objects and core's serialize method returns a '' delimited string.On a final note, I've updated the demo page to include a link to runthe unit tests.If some of you Safari users could run the unit tests I would appreciate it.Demo page: http://malsup.com/jquery/form/Unit test: http://malsup.com/jquery/form/test.html Mike___jQuery mailing listdiscuss@jquery.comhttp://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Form plugin revisited ;-)
Olivier Percebois-Garve schrieb: I'm quite interested in stuffs related to forms (I wrote a little form validation jquery plugin before to discover the existing one) but I did not found anything about ajax file upload. I know the 'ajax file upload' in itself is impossible (no access to filesystem), but there is some solutions with the use of an Iframe. Do you know if such script exists as jquery plugin ? or at least unfinished attempts I could build on ? This was discussed rather often on this list. As far as I know, with no solution. You can search the list via nabble.com: http://www.nabble.com/forum/Search.jtp?forum=15494local=yquery=ajax+file+upload This post by Ashutosh Bijoor is worth a read: http://www.nabble.com/Serializable-Form-Upload-Element-tf2139358.html#a5904081 -- Jörn ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Form plugin revisited ;-)
Mike Alsup schrieb:
Jörn,
I see negligible performance gains using $(:input, ctx) vs the current
$('*:not(option)', ctx), however it does make the code cleaner because
I can get rid of the 'ok' array.
formToArray now looks like this: [...]
That looks pretty nice. But you would still need some way to return the
jQuery object for use in a pre-callback. I need that to integrate my
validation stuff with the form plugin :-)
-- Jörn
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Form plugin revisited ;-)
On 10/13/06, Mike Alsup [EMAIL PROTECTED] wrote:
jQuery.fn.formToArray = function(semantic) {var a = [];var q = semantic ? ':input' : 'input,textarea,select,button';jQuery(q, this).each(function() {How does jQuery(':input', this) differ from jQuery('input,textarea,select,button', this) ?
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Form plugin revisited ;-)
On 10/13/06, Mike Alsup [EMAIL PROTECTED] wrote: Great question, Aaron,The :input selector will grab all elements and then filter themusing a regex match of the nodeName againstinput|select|textarea|button.On the other hand, the input,textarea,select,button selector will grab only those elements(using getElementsByTagName I believe) and it will grab them *in thatorder*.So the first _expression_ guarantees us semantic ordering of the selected elements but is slower due to the regex matching.I thought it might have been something like that -- and yes, as far as I could tell, jQuery uses getElementsByTagName for input,textarea,select,button Thanks alot,Aaron ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Form plugin revisited ;-)
On Oct 12, 2006, at 7:14 PM, Mike Alsup wrote: On a final note, I've updated the demo page to include a link to run the unit tests. If some of you Safari users could run the unit tests I would appreciate it. Demo page: http://malsup.com/jquery/form/ Unit test: http://malsup.com/jquery/form/test.html Hi MIke, Thanks for all the great work on the Form plugin. I'm really looking forward to playing with it when time permits and when I muster up the courage. Here is what I got when I ran the test in Safari 2.0.4: Tests completed in 1164 milliseconds. 0 tests of 51 failed. Perfect score! Karl ___ Karl Swedberg www.englishrules.com www.learningjquery.com ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
