Re: [jQuery] Fast form serializer function for review
Nice.
You could simplify this:
var f = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON'];
$(f.join(','), this).each(function() {
to:
var f = 'INPUT,TEXTAREA,SELECT,BUTTON';
$(f, this).each(function() {
BTW, what do you mean when you say it isn't a plugin? Looks like one to me.
:-)
-Mike
From: Matt Grimm
I've put together a fast form serializer function that I'm
hoping can get some review from the list for completeness,
bugs, a better name, etc. A previous thread revealed quite a
performance issue with the form plugin's existing serialize
function when operating on a form with a large number of
elements. My plugin sacrifices semantic order for wicked
speed. I have a test form with a select menu containing 500
options -- with the current serializer, it takes around 5
full seconds to do the job, and with mine, it takes about 50
ms. Any feedback would be much appreciated, including whether
you think this should be included with the form plugin distribution.
Since this isn't a plugin, I'm just going to include the
source in this message -- please let me know if there's a
better (i.e., more polite) way to do this.
Thanks!
m.
---
$.fn.fastSerialize = function() {
var a = [];
var f = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON'];
$(f.join(','), this).each(function() {
var n = this.name || this.id;
var t = this.type;
if (!n || this.disabled || t == 'reset' ||
(t == 'checkbox' || t == 'radio') !this.checked ||
(t == 'submit' || t == 'image' || t == 'button')
this.form.clicked != this ||
this.tagName == 'SELECT' this.selectedIndex == -1)
return;
if (t == 'image' this.form.clicked_x)
return a.push(
{name: n+'_x', value: this.form.clicked_x},
{name: n+'_y', value: this.form.clicked_y}
);
if (t == 'select-multiple') {
$('option', this).each( function() {
if (this.selected)
a.push({name: n, value: this.value ||
$(this).text()});
});
return;
}
a.push({name: n, value: this.value});
});
return a;
};
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
Matt Grimm schrieb:
I've put together a fast form serializer function that I'm hoping can
get some review from the list for completeness, bugs, a better name,
etc. A previous thread revealed quite a performance issue with the form
plugin's existing serialize function when operating on a form with a
large number of elements. My plugin sacrifices semantic order for wicked
speed. I have a test form with a select menu containing 500 options --
with the current serializer, it takes around 5 full seconds to do the
job, and with mine, it takes about 50 ms. Any feedback would be much
appreciated, including whether you think this should be included with
the form plugin distribution.
AFAIK the form plugin pretended to send the form as if it was a normal
submit. While I haven't seen a problem with the order yet, I see a
problem with this:
$('option', this).each( function() {
if (this.selected)
a.push({name: n, value: this.value ||
$(this).text()});
});
If the user submits a option value=Please select.../option, I want
the empty value to be submitted, not the text.
Apart from that, nice work. I wonder if we could reduce the overall code
by merging both seriliaze methods.
-- Jörn
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
Matt Grimm schrieb: Hello, I've put together a fast form serializer function that I'm hoping can get some review from the list for completeness, bugs, a better name, etc. A previous thread revealed quite a performance issue with the form plugin's existing serialize function when operating on a form with a large number of elements. My plugin sacrifices semantic order for wicked speed. I have a test form with a select menu containing 500 options -- with the current serializer, it takes around 5 full seconds to do the job, and with mine, it takes about 50 ms. Any feedback would be much appreciated, including whether you think this should be included with the form plugin distribution. Since this isn't a plugin, I'm just going to include the source in this message -- please let me know if there's a better (i.e., more polite) way to do this. Thanks! m. Please make it XHTML as XML compatible (hm, why is it always me complaining about that?)...: ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
Klaus Hartl schrieb: Please make it XHTML as XML compatible (hm, why is it always me complaining about that?)...: There's missing a part, I'm sorry, please normalize tag names: var f = ['input', 'textarea', 'select', 'button']; and this.tagName.toLowerCase() == 'select' Thank you, Klaus ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
Hi, I've introduced the optimizations proposed by Matt in the serialize version I've already posted (var t = this.type). http://zone.spip.org/trac/spip-zone/browser/_plugins_/_dev_/-jQuery/form.js Renato ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
Very nice, Matt. This serialize method is way faster if the select
element is not a multiple select which I assume is how you
benchmarked it. When the select is a multiple-select then I see
basically the same performance with the for-loop impl posted on the
other thread. I did a quick test and got the following results:
muliple-select element w/500 options:
new 'each' impl (ave of 10 tests): 113ms
for-loop impl (ave of 10 tests): 104ms
single-select element w/500 options:
new 'each' impl (ave of 10 tests): 7ms
for-loop impl (ave of 10 tests): 103ms
So I think this new serialize method is pretty damn good! Is there
*anyone* out there that cares about the semantic ordering of the
posted values? Personally, I do not, and I definitely would like to
have only a single serialize method. Maybe the semantic version could
be left as a separate plugin for anyone that needs that capability. I
vote for updating the form plugin with this new version.
Mike
On 10/3/06, Matt Grimm [EMAIL PROTECTED] wrote:
Hello,
I've put together a fast form serializer function that I'm hoping can
get some review from the list for completeness, bugs, a better name,
etc. A previous thread revealed quite a performance issue with the form
plugin's existing serialize function when operating on a form with a
large number of elements. My plugin sacrifices semantic order for wicked
speed. I have a test form with a select menu containing 500 options --
with the current serializer, it takes around 5 full seconds to do the
job, and with mine, it takes about 50 ms. Any feedback would be much
appreciated, including whether you think this should be included with
the form plugin distribution.
Since this isn't a plugin, I'm just going to include the source in this
message -- please let me know if there's a better (i.e., more polite)
way to do this.
Thanks!
m.
---
$.fn.fastSerialize = function() {
var a = [];
var f = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON'];
$(f.join(','), this).each(function() {
var n = this.name || this.id;
var t = this.type;
if (!n || this.disabled || t == 'reset' ||
(t == 'checkbox' || t == 'radio') !this.checked ||
(t == 'submit' || t == 'image' || t == 'button')
this.form.clicked != this ||
this.tagName == 'SELECT' this.selectedIndex == -1)
return;
if (t == 'image' this.form.clicked_x)
return a.push(
{name: n+'_x', value: this.form.clicked_x},
{name: n+'_y', value: this.form.clicked_y}
);
if (t == 'select-multiple') {
$('option', this).each( function() {
if (this.selected)
a.push({name: n, value: this.value ||
$(this).text()});
});
return;
}
a.push({name: n, value: this.value});
});
return a;
};
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
Mat,
This code:
if (t == 'select-multiple') {
$('option', this).each( function() {
if (this.selected)
a.push({name: n, value: this.value ||
$(this).text()});
});
return;
}
Can be changed to this, if i am right ;)
if (t == 'select-multiple') {
$('[EMAIL PROTECTED]selected]', this).each( function() {
a.push({name: n, value: this.value || $(this).text()});
});
return;
}
Other then that,
Great code!
-- Gilles
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
I'd say that .serialize() should take a boolean argument, retainOrder, which will retain semantic order if true, and not if false/null/not entered. That would be perfect. The documentation should then make clear that the retainOrder option will be slower for large forms. - Brian I wonder if we could reduce the overall code by merging both seriliaze methods. -- Jörn ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
Mike Alsup wrote:
Or better yet:
$('option:selected')...
Hey Mike, is that supported by jQuery? If i am right, only a plugin adds
that method of selecting..
-- Gilles
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
That would actually have to ripple through all three methods in the form plugin, not just the serialize method. On 10/3/06, Brian [EMAIL PROTECTED] wrote: I'd say that .serialize() should take a boolean argument, retainOrder, which will retain semantic order if true, and not if false/null/not entered. That would be perfect. The documentation should then make clear that the retainOrder option will be slower for large forms. - Brian I wonder if we could reduce the overall code by merging both seriliaze methods. -- Jörn ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
Webunity | Gilles van den Hoven schrieb:
Mike Alsup wrote:
Or better yet:
$('option:selected')...
Hey Mike, is that supported by jQuery? If i am right, only a plugin adds
that method of selecting..
I dunno since when, but it is in the core. Maybe post-1.0.
-- Jörn
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
I don't think that's proper behavior, though. *Both* values of foo should be posted if both are present. So, you'd either get foo=offValue, or foo=offValue,onValue. Either way, your backend code shouldn't break if the submitted fields are in the wrong order. - Brian On 10/3/06, Mike Alsup [EMAIL PROTECTED] wrote: So I think this new serialize method is pretty damn good! Is there *anyone* out there that cares about the semantic ordering of the posted values? Personally, I do not, and I definitely would like to have only a single serialize method. Maybe the semantic version could be left as a separate plugin for anyone that needs that capability. I vote for updating the form plugin with this new version. Yes, I care. Case: An unchecked checkbox doesn't post. However, you usually want to work with an on/off value. I use this construct (stolen from Rails I think): input type=hidden name=foo value=offValue input type=checkbox name=foo value=onValue This way, when the checkbox is not checked, offValue is posted for foo. When checked, onValue is posted. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
Thanks for catching this Klaus, I've updated the code to normalize tag names. m. On Tue, 2006-10-03 at 11:21 +0200, Klaus Hartl wrote: Klaus Hartl schrieb: Please make it XHTML as XML compatible (hm, why is it always me complaining about that?)...: There's missing a part, I'm sorry, please normalize tag names: var f = ['input', 'textarea', 'select', 'button']; and this.tagName.toLowerCase() == 'select' Thank you, Klaus ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
Good call, I've updated it to use your syntax for f. Added benefit:
the selector reads f this.
m.
On Tue, 2006-10-03 at 00:35 -0700, Michael Geary wrote:
Nice.
You could simplify this:
var f = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON'];
$(f.join(','), this).each(function() {
to:
var f = 'INPUT,TEXTAREA,SELECT,BUTTON';
$(f, this).each(function() {
BTW, what do you mean when you say it isn't a plugin? Looks like one to me.
:-)
-Mike
From: Matt Grimm
I've put together a fast form serializer function that I'm
hoping can get some review from the list for completeness,
bugs, a better name, etc. A previous thread revealed quite a
performance issue with the form plugin's existing serialize
function when operating on a form with a large number of
elements. My plugin sacrifices semantic order for wicked
speed. I have a test form with a select menu containing 500
options -- with the current serializer, it takes around 5
full seconds to do the job, and with mine, it takes about 50
ms. Any feedback would be much appreciated, including whether
you think this should be included with the form plugin distribution.
Since this isn't a plugin, I'm just going to include the
source in this message -- please let me know if there's a
better (i.e., more polite) way to do this.
Thanks!
m.
---
$.fn.fastSerialize = function() {
var a = [];
var f = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON'];
$(f.join(','), this).each(function() {
var n = this.name || this.id;
var t = this.type;
if (!n || this.disabled || t == 'reset' ||
(t == 'checkbox' || t == 'radio') !this.checked ||
(t == 'submit' || t == 'image' || t == 'button')
this.form.clicked != this ||
this.tagName == 'SELECT' this.selectedIndex == -1)
return;
if (t == 'image' this.form.clicked_x)
return a.push(
{name: n+'_x', value: this.form.clicked_x},
{name: n+'_y', value: this.form.clicked_y}
);
if (t == 'select-multiple') {
$('option', this).each( function() {
if (this.selected)
a.push({name: n, value: this.value ||
$(this).text()});
});
return;
}
a.push({name: n, value: this.value});
});
return a;
};
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
The option:selected is the only syntax that has worked for me in the
past. The XPath method only gets those options that literally have an
attribute of selected in the XHTML.
I also agree with you on the matter of excluding this.id as a fallback
for n. It's unnecessary and possibly confusing behavior.
m.
On Tue, 2006-10-03 at 09:14 -0400, Mike Alsup wrote:
Or better yet:
$('option:selected')...
Also, I think I'd get rid of this:
var n = this.name || this.id;
because the id should not be used for the name. I think that's always
been wrong and it would result in a different behavior when javascript
is disabled.
Mike
On 10/3/06, Webunity | Gilles van den Hoven [EMAIL PROTECTED] wrote:
Mat,
This code:
if (t == 'select-multiple') {
$('option', this).each( function() {
if (this.selected)
a.push({name: n, value: this.value ||
$(this).text()});
});
return;
}
Can be changed to this, if i am right ;)
if (t == 'select-multiple') {
$('[EMAIL PROTECTED]selected]', this).each( function() {
a.push({name: n, value: this.value || $(this).text()});
});
return;
}
Other then that,
Great code!
-- Gilles
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
Good point, Jörn. Not only would you want to be able to submit an empty
string value for an option, but if the value attribute is excluded
from the option tag, this.value will return the text between the tags
anyway.
m.
On Tue, 2006-10-03 at 11:17 +0200, Jörn Zaefferer wrote:
Matt Grimm schrieb:
I've put together a fast form serializer function that I'm hoping can
get some review from the list for completeness, bugs, a better name,
etc. A previous thread revealed quite a performance issue with the form
plugin's existing serialize function when operating on a form with a
large number of elements. My plugin sacrifices semantic order for wicked
speed. I have a test form with a select menu containing 500 options --
with the current serializer, it takes around 5 full seconds to do the
job, and with mine, it takes about 50 ms. Any feedback would be much
appreciated, including whether you think this should be included with
the form plugin distribution.
AFAIK the form plugin pretended to send the form as if it was a normal
submit. While I haven't seen a problem with the order yet, I see a
problem with this:
$('option', this).each( function() {
if (this.selected)
a.push({name: n, value: this.value ||
$(this).text()});
});
If the user submits a option value=Please select.../option, I want
the empty value to be submitted, not the text.
Apart from that, nice work. I wonder if we could reduce the overall code
by merging both seriliaze methods.
-- Jörn
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Fast form serializer function for review
OK, I've made several modifications thanks to your suggestions and
corrections. This is publishable; should I go ahead and create a new
wiki page under Plugins or maybe wait until it's decided whether this
will be merged somehow with the existing form plugin?
m.
---
$.fn.fastSerialize = function() {
var a = [];
$('input,textarea,select,button', this).each(function() {
var n = this.name;
var t = this.type;
if ( !n || this.disabled || t == 'reset' ||
(t == 'checkbox' || t == 'radio') !this.checked ||
(t == 'submit' || t == 'image' || t == 'button')
this.form.clicked != this ||
this.tagName.toLowerCase() == 'select' this.selectedIndex
== -1)
return;
if (t == 'image' this.form.clicked_x)
return a.push(
{name: n+'_x', value: this.form.clicked_x},
{name: n+'_y', value: this.form.clicked_y}
);
if (t == 'select-multiple') {
$('option:selected', this).each( function() {
a.push({name: n, value: this.value});
});
return;
}
a.push({name: n, value: this.value});
});
return a;
};
On Mon, 2006-10-02 at 21:02 -0800, Matt Grimm wrote:
Hello,
I've put together a fast form serializer function that I'm hoping can
get some review from the list for completeness, bugs, a better name,
etc. A previous thread revealed quite a performance issue with the
form
plugin's existing serialize function when operating on a form with a
large number of elements. My plugin sacrifices semantic order for
wicked
speed. I have a test form with a select menu containing 500 options --
with the current serializer, it takes around 5 full seconds to do the
job, and with mine, it takes about 50 ms. Any feedback would be much
appreciated, including whether you think this should be included with
the form plugin distribution.
Since this isn't a plugin, I'm just going to include the source in
this
message -- please let me know if there's a better (i.e., more polite)
way to do this.
Thanks!
m.
---
$.fn.fastSerialize = function() {
var a = [];
var f = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON'];
$(f.join(','), this).each(function() {
var n = this.name || this.id;
var t = this.type;
if (!n || this.disabled || t == 'reset' ||
(t == 'checkbox' || t == 'radio') !this.checked ||
(t == 'submit' || t == 'image' || t == 'button')
this.form.clicked != this ||
this.tagName == 'SELECT' this.selectedIndex == -1)
return;
if (t == 'image' this.form.clicked_x)
return a.push(
{name: n+'_x', value: this.form.clicked_x},
{name: n+'_y', value: this.form.clicked_y}
);
if (t == 'select-multiple') {
$('option', this).each( function() {
if (this.selected)
a.push({name: n, value: this.value ||
$(this).text()});
});
return;
}
a.push({name: n, value: this.value});
});
return a;
};
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
[jQuery] Fast form serializer function for review
Hello,
I've put together a fast form serializer function that I'm hoping can
get some review from the list for completeness, bugs, a better name,
etc. A previous thread revealed quite a performance issue with the form
plugin's existing serialize function when operating on a form with a
large number of elements. My plugin sacrifices semantic order for wicked
speed. I have a test form with a select menu containing 500 options --
with the current serializer, it takes around 5 full seconds to do the
job, and with mine, it takes about 50 ms. Any feedback would be much
appreciated, including whether you think this should be included with
the form plugin distribution.
Since this isn't a plugin, I'm just going to include the source in this
message -- please let me know if there's a better (i.e., more polite)
way to do this.
Thanks!
m.
---
$.fn.fastSerialize = function() {
var a = [];
var f = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON'];
$(f.join(','), this).each(function() {
var n = this.name || this.id;
var t = this.type;
if (!n || this.disabled || t == 'reset' ||
(t == 'checkbox' || t == 'radio') !this.checked ||
(t == 'submit' || t == 'image' || t == 'button')
this.form.clicked != this ||
this.tagName == 'SELECT' this.selectedIndex == -1)
return;
if (t == 'image' this.form.clicked_x)
return a.push(
{name: n+'_x', value: this.form.clicked_x},
{name: n+'_y', value: this.form.clicked_y}
);
if (t == 'select-multiple') {
$('option', this).each( function() {
if (this.selected)
a.push({name: n, value: this.value ||
$(this).text()});
});
return;
}
a.push({name: n, value: this.value});
});
return a;
};
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
