[jQuery] Re: Best practice for integrating server-side validation (jsp) with jquery validation (specially bassistance)
OK - this is the approach I intend to take. Please let me know if I am on
the right path - or any links or pointers would also help.
My application is currently a jsp page that shows some tabs. Each tab is an
object that has various properties like name, code, id etc.
Clicking on each tab brings up a pop-up (simple using jquery show hide)
The pop-up which is basically a form shows the properties as text fields and
can be modified.
There is a submit button at the bottom of this pop up / form that will
submit the form and post the action to another jsp (update.jsp say) that
will update the tables with the data in the database.
I am also using the validation plugin - bassistance. The client side
validation was quite trivial to do, like the id should be digits only,
required fields etc.
I need to extend these validation rules to the server-side like for example
the id needs to be unique in the table and a duplicate value should show an
error message as Id already exists
I am planning to address this requirement by using
jQuery.validator.addMethod to add a new custom validation.
In this validation I will check for an element errors. If the value of this
element errors is true, then I will display an error message. The code
will roughly be like this:
jQuery.validator.addMethod(
servererrors,
function(value, element) {
if (element.value == true)
{
return false;
}
else return true;
},
Errors on the form, please fix.
);
(I intend to fine tune this further once I grasp the concept - so I admit
the validation is crude now)
In my form (the popup actually) I will add a new hidden field errors that
will be populated from update.jsp based on server side rules.
In my form (pop up) I will add this as a rule to one of the fields -
probably the first one so the error message appears adjacent to it.
Something along these lines
$(function() {
$('.main-title').click(function(event) {
var v = $(event.target).parent();
v.validate({
rules: {
regionid:
{
required: true,
enter01: true,
servererrors: true
}
}
}
}
}
Is my approach correct or is there something simpler / best practice? Also I
am not sure if my pop up will stay during all this validation, or will it
just close and I will have to figure out a way to display the pop-up again?
Finally should the error / validation message be associated to a visible
field only so that it is visible and adjacent to that field?
Any help is very much appreciated.
Thanks,
Anoop
On Wed, Jul 15, 2009 at 12:49 AM, Anoop kumar V anoopkum...@gmail.comwrote:
Hi All,
I was wondering if there is a link or pointers for best practices while
integrating client side validation errors with server side validation. I
read on a forum that this requires the server side to return a json, but
could not find many pointers or details about this.
Can somebody please provide some tips on how best to achieve this? By the
way I am using the bassistance plugin, my application is a legacy app
written in jsp is database intensive; And so far I have not considered
using ajaxform etc..
Thanks,
Anoop
[jQuery] Re: Best practice for processing JSON quickly
Not sure how much it'll speed up, but instead of:
item.substr(g,1)
try: item[g]
Then, go through this post:
http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly
( http://groups.google.com/group/jquery-en/browse_thread/thread/9889ebd5e10c9122
)
Instead of concatenating strings into one results variable, use array
items, and then join them at the end.
On Mar 3, 3:11 pm, René renefourn...@gmail.com wrote:
I have some JSON that needs processing, e.g.:
items[1] =
'1010101001010102011010100010101020101020101010101100110100;
items[2] =
'101012101010111001011010111001010121011000;
... (x 1000)
I need to process ~1000 rows so that each 0, 1 or 2 appear as a small
coloured dot. (It's a visualization thing).
So here's what I have so far, which works:
for (i in items) {
html += process (items[i]);
}
function process (item) {
var result = 'div';
for (var g=0; gitem.length; g++) {
switch (item.substr(g,1)) {
case 0:
result += 'div class=greynbsp;/div';
result;
case 1:
result += 'div class=bluenbsp;/div';
break;
case 2:
result += 'div class=rednbsp;/div';
break;
}
}
result += '/div';
return result;
}
My question is, is there a faster or more efficient way to iterate
through each items' 10101001010220211? I realize this is not
strictly jQuery related, but it seems the smartest Javascript people
hang out here. :-)
Thanks
...Rene
[jQuery] Re: Best practice for processing JSON quickly
I'm not sure if it matters in javascript but I would do this:
var length = item.length;
for ( var g = 0; g length; g++) {
Instead of this:
for (var g=0; gitem.length; g++) {
Cam
On Wed, Mar 4, 2009 at 2:28 PM, James james.gp@gmail.com wrote:
Not sure how much it'll speed up, but instead of:
item.substr(g,1)
try: item[g]
Then, go through this post:
http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly
(
http://groups.google.com/group/jquery-en/browse_thread/thread/9889ebd5e10c9122
)
Instead of concatenating strings into one results variable, use array
items, and then join them at the end.
On Mar 3, 3:11 pm, René renefourn...@gmail.com wrote:
I have some JSON that needs processing, e.g.:
items[1] =
'1010101001010102011010100010101020101020101010101100110100;
items[2] =
'101012101010111001011010111001010121011000;
... (x 1000)
I need to process ~1000 rows so that each 0, 1 or 2 appear as a small
coloured dot. (It's a visualization thing).
So here's what I have so far, which works:
for (i in items) {
html += process (items[i]);
}
function process (item) {
var result = 'div';
for (var g=0; gitem.length; g++) {
switch (item.substr(g,1)) {
case 0:
result += 'div
class=greynbsp;/div';
result;
case 1:
result += 'div
class=bluenbsp;/div';
break;
case 2:
result += 'div
class=rednbsp;/div';
break;
}
}
result += '/div';
return result;
}
My question is, is there a faster or more efficient way to iterate
through each items' 10101001010220211? I realize this is not
strictly jQuery related, but it seems the smartest Javascript people
hang out here. :-)
Thanks
...Rene
[jQuery] Re: Best practice for processing JSON quickly
assuming that your json items are objects, try this. The console
statements are for Firebug output: comment them out if you don't have
firebug. This uses a few speed tricks.
script language=javascript
// sample data
//
var items = {};
items[1] =
'1010101001010102011010100010101020101020101010101100110100';
items[2] =
'101012101010111001011010111001010121011000';
var html = []; // we pop html into here and then join it to get the
html snippet for our page
for(var item in items){
html.push(process(items[item]));
}
console.log(html.join('')); // your final result comes from
html.join('');
function process(item){
var wrapper = [];
wrapper.push('div class=wrapper'); // I used a class here to
make it easier to see in results
var ar = item.split(''); // splits the string with all the
numbers into an array
for(var i=0;iar.length;i++){
console.log(ar[i]); // outputs each individual item in the
string to the console
switch (ar[i]){
case '0':
wrapper.push('div class=greynbsp;/div');
break;
case '1':
wrapper.push('div class=bluenbsp;/div');
break;
case '2':
wrapper.push('div class=rednbsp;/div');
break;
}
}
wrapper.push('/div');
return wrapper.join(''); // returns the wrapper with your divs in it
}
/script
- Jack
René wrote:
I have some JSON that needs processing, e.g.:
items[1] =
'1010101001010102011010100010101020101020101010101100110100;
items[2] =
'101012101010111001011010111001010121011000;
... (x 1000)
I need to process ~1000 rows so that each 0, 1 or 2 appear as a small
coloured dot. (It's a visualization thing).
So here's what I have so far, which works:
for (i in items) {
html += process (items[i]);
}
function process (item) {
var result = 'div';
for (var g=0; gitem.length; g++) {
switch (item.substr(g,1)) {
case 0:
result += 'div class=greynbsp;/div';
result;
case 1:
result += 'div class=bluenbsp;/div';
break;
case 2:
result += 'div class=rednbsp;/div';
break;
}
}
result += '/div';
return result;
}
My question is, is there a faster or more efficient way to iterate
through each items' 10101001010220211? I realize this is not
strictly jQuery related, but it seems the smartest Javascript people
hang out here. :-)
Thanks
...Rene
[jQuery] Re: Best practice for processing JSON quickly
Another thought is that you could just do a replace on 0, 1 and 2 in the
string: replace each number with the div you want, then wrap that in a div.
- Jack
Jack Killpatrick wrote:
assuming that your json items are objects, try this. The console
statements are for Firebug output: comment them out if you don't have
firebug. This uses a few speed tricks.
script language=javascript
// sample data
//
var items = {};
items[1] =
'1010101001010102011010100010101020101020101010101100110100';
items[2] =
'101012101010111001011010111001010121011000';
var html = []; // we pop html into here and then join it to get
the html snippet for our page
for(var item in items){
html.push(process(items[item]));
}
console.log(html.join('')); // your final result comes from
html.join('');
function process(item){
var wrapper = [];
wrapper.push('div class=wrapper'); // I used a class here
to make it easier to see in results
var ar = item.split(''); // splits the string with all
the numbers into an array
for(var i=0;iar.length;i++){
console.log(ar[i]); // outputs each individual item in the
string to the console
switch (ar[i]){
case '0':
wrapper.push('div class=greynbsp;/div');
break;
case '1':
wrapper.push('div class=bluenbsp;/div');
break;
case '2':
wrapper.push('div class=rednbsp;/div');
break;
}
}
wrapper.push('/div');
return wrapper.join(''); // returns the wrapper with your divs
in it
}
/script
- Jack
René wrote:
I have some JSON that needs processing, e.g.:
items[1] =
'1010101001010102011010100010101020101020101010101100110100;
items[2] =
'101012101010111001011010111001010121011000;
... (x 1000)
I need to process ~1000 rows so that each 0, 1 or 2 appear as a small
coloured dot. (It's a visualization thing).
So here's what I have so far, which works:
for (i in items) {
html += process (items[i]);
}
function process (item) {
var result = 'div';
for (var g=0; gitem.length; g++) {
switch (item.substr(g,1)) {
case 0:
result += 'div class=greynbsp;/div';
result;
case 1:
result += 'div class=bluenbsp;/div';
break;
case 2:
result += 'div class=rednbsp;/div';
break;
}
}
result += '/div';
return result;
}
My question is, is there a faster or more efficient way to iterate
through each items' 10101001010220211? I realize this is not
strictly jQuery related, but it seems the smartest Javascript people
hang out here. :-)
Thanks
...Rene
[jQuery] Re: Best practice for processing JSON quickly
Another thought is that you could just do a replace on 0, 1 and 2 in the
string: replace each number with the div you want, then wrap that in a div.
Yeah, I was wondering whether the regexp engine would be faster.
Something like this:
for(var item in items){
html.push(
'div class=wrapper',
process(items[item]),
'/div'
);
function process(item)
{
return item.replace(/\d/g, function(d){
return 'div class='+
[gray,blue,red][d]+
'nbsp;/div';
});
}
[jQuery] Re: Best practice for processing JSON quickly
That for( i in items ) loop isn't guaranteed to enumerate the items in any
particular order. If you need something to be in a particular order, don't
use an object with string property names. Use an array, e.g.
var items = [
1010101001010102011010100010101020101020101010101100110100,
101012101010111001011010111001010121011000,
...
];
Then you can code:
var classes = [ 'grey', 'blue', 'red' ];
var html = [], h = -1;
html[++h] = 'div';
for( var item, i = -1; item = items[++i]; ) {
html[++h] = 'div class=row';
var values = item.split('');
for( var value, j = -1; value = values[++j]; ) {
html[++h] = 'div class=';
html[++h] = classes[+value];
html[++h] = 'nbsp;/div';
}
html[++h] = '/div';
}
html[++h] = '/div';
html = html.join('');
I added a wrapper div around each row with class=row - my guess is you
probably need something like that, because you want this to be a
two-dimensional display, right?
-Mike
From: René
I have some JSON that needs processing, e.g.:
items[1] =
'1010101001010102011010100010101020101020101010101100110100;
items[2] =
'101012101010111001011010111001010121011000;
... (x 1000)
I need to process ~1000 rows so that each 0, 1 or 2 appear as
a small coloured dot. (It's a visualization thing).
So here's what I have so far, which works:
for (i in items) {
html += process (items[i]);
}
function process (item) {
var result = 'div';
for (var g=0; gitem.length; g++) {
switch (item.substr(g,1)) {
case 0:
result += 'div
class=greynbsp;/div';
result;
case 1:
result += 'div
class=bluenbsp;/div';
break;
case 2:
result += 'div
class=rednbsp;/div';
break;
}
}
result += '/div';
return result;
}
My question is, is there a faster or more efficient way to
iterate through each items' 10101001010220211? I realize
this is not strictly jQuery related, but it seems the
smartest Javascript people hang out here. :-)
Thanks
...Rene
[jQuery] Re: Best practice for replacing inline HTML function calls w/several arguments with an event handler
I think a good way is to put the data into a separate JSON object and
give them a unique ID (eg. item01, item02...), and assign that ID
somewhere on the links to be clicked.
var productList = {
'item01':{name:123-ABC, color:'red', price:9.99},
'item02':{name:123-ABC, color:'blue', price:10.99},
'item03':{name:456-DEF, color:'green', price:29.99}
}
$(.buy).click(function() {
var id = $(this).attr(id);
var product = productList[id];
alert(product.name + ' ' + product.color + ' ' + product.price);
});
img src=item01.jpg /a href=. id=item01 class=buyBuy Me!/
abr /
img src=item02.jpg /a href=. id=item02 class=buyBuy Me!/
abr /
img src=item03.jpg /a href=. id=item03 class=buyBuy Me!/
abr /
On Feb 13, 10:35 am, Eric P eric.maill...@gmail.com wrote:
Hi,
I'm fairly new to jQuery (been using a few months now). Binding event
handlers to HTML objects via jQuery is awesome,
but I find myself struggling to find a solid (I.e., best practice) method for
getting numerous arguments to the event
handler that are pertinent to the object that triggered the event.
For example, old method:
script
function buy(item, color, price) { ... }
/script
...
img src=item01.jpg /a href=javascript:buy('123-ABC','red',9.99)Buy
Me!/abr /
img src=item02.jpg /a href=javascript:buy('123-ABC','blue',10.99)Buy
Me!/abr /
img src=item03.jpg /a href=javascript:buy('456-DEF','green',29.99)Buy
Me!/abr /
jQuery method:
script
$(function() {
$('.buy').click(function() { ... }
)};
/script
...
img src=item01.jpg /a class=buyBuy Me!/abr /
img src=item02.jpg /a class=buyBuy Me!/abr /
img src=item03.jpg /a class=buyBuy Me!/abr /
So in the jQuery method, what is the best way to make the multiple arguments
(that were previously in the inline HTML/JS
function call) available to the event handling function?
I've been limping along using various methods to get arguments to the event
handling function (E.g., like sticking
values in an object's id field, etc.), but I'm at a loss when it comes to a
solid way to pass numerous arguments to
the event handling function.
Thanks for reading,
Eric P.
[jQuery] Re: Best practice for replacing inline HTML function calls w/several arguments with an event handler
Eric P wrote:
Hi,
I'm fairly new to jQuery (been using a few months now). Binding event
handlers to HTML objects via jQuery is awesome,
but I find myself struggling to find a solid (I.e., best practice) method for
getting numerous arguments to the event
handler that are pertinent to the object that triggered the event.
For example, old method:
script
function buy(item, color, price) { ... }
/script
...
img src=item01.jpg /a href=javascript:buy('123-ABC','red',9.99)Buy
Me!/abr /
The data in the href is put there by your server, so why no put it in
a real url?
img src=item01.jpg /a href=http://com/blah?item=123-
ABCcolor=redprice=9.99 onclick=buy(this);Buy Me!/abr /
Now the page can be made to work easily without javascript. If you are
creating a shopping cart, then delegate the click listener to a parent
element that compiles the shopping list and cancels navigation (which
is what I guess you are doing now). That way you only have one
listener.
If you add the listener dynamically, pass event and use that to find
the element that was clicked and the data in its href.
[...]
So in the jQuery method, what is the best way to make the multiple arguments
(that were previously in the inline HTML/JS
function call) available to the event handling function?
Put them in the href attribute as a genuine URL, then grab them when
the event fires. You can also use the class attribute.
--
Rob
[jQuery] Re: Best practice for replacing inline HTML function calls w/several arguments with an event handler
And as an aside, I sure hope you aren't depending on the price given
in the html to be sent back to the server as the price to charge for
an item. You could end up selling a lot of $10 items for a penny
apiece when a hacker changes the values before submitting the form.
On Feb 13, 6:08 pm, RobG rg...@iinet.net.au wrote:
Eric P wrote:
Hi,
I'm fairly new to jQuery (been using a few months now). Binding event
handlers to HTML objects via jQuery is awesome,
but I find myself struggling to find a solid (I.e., best practice) method
for getting numerous arguments to the event
handler that are pertinent to the object that triggered the event.
For example, old method:
script
function buy(item, color, price) { ... }
/script
...
img src=item01.jpg /a href=javascript:buy('123-ABC','red',9.99)Buy
Me!/abr /
The data in the href is put there by your server, so why no put it in
a real url?
img src=item01.jpg /a href=http://com/blah?item=123-
ABCcolor=redprice=9.99 onclick=buy(this);Buy Me!/abr /
Now the page can be made to work easily without javascript. If you are
creating a shopping cart, then delegate the click listener to a parent
element that compiles the shopping list and cancels navigation (which
is what I guess you are doing now). That way you only have one
listener.
If you add the listener dynamically, pass event and use that to find
the element that was clicked and the data in its href.
[...]
So in the jQuery method, what is the best way to make the multiple
arguments (that were previously in the inline HTML/JS
function call) available to the event handling function?
Put them in the href attribute as a genuine URL, then grab them when
the event fires. You can also use the class attribute.
--
Rob
[jQuery] Re: Best practice for replacing inline HTML function calls w/several arguments with an event handler
James wrote:
I think a good way is to put the data into a separate JSON object and
give them a unique ID (eg. item01, item02...), and assign that ID
somewhere on the links to be clicked.
var productList = {
'item01':{name:123-ABC, color:'red', price:9.99},
'item02':{name:123-ABC, color:'blue', price:10.99},
'item03':{name:456-DEF, color:'green', price:29.99}
}
$(.buy).click(function() {
var id = $(this).attr(id);
var product = productList[id];
alert(product.name + ' ' + product.color + ' ' + product.price);
});
img src=item01.jpg /a href=. id=item01 class=buyBuy Me!/
abr /
img src=item02.jpg /a href=. id=item02 class=buyBuy Me!/
abr /
img src=item03.jpg /a href=. id=item03 class=buyBuy Me!/
abr /
On Feb 13, 10:35 am, Eric P eric.maill...@gmail.com wrote:
Hi,
I'm fairly new to jQuery (been using a few months now). Binding event handlers
to HTML objects via jQuery is awesome,
but I find myself struggling to find a solid (I.e., best practice) method for
getting numerous arguments to the event
handler that are pertinent to the object that triggered the event.
For example, old method:
script
function buy(item, color, price) { ... }
/script
...
img src=item01.jpg /a href=javascript:buy('123-ABC','red',9.99)Buy
Me!/abr /
img src=item02.jpg /a href=javascript:buy('123-ABC','blue',10.99)Buy
Me!/abr /
img src=item03.jpg /a href=javascript:buy('456-DEF','green',29.99)Buy
Me!/abr /
jQuery method:
script
$(function() {
$('.buy').click(function() { ... }
)};
/script
...
img src=item01.jpg /a class=buyBuy Me!/abr /
img src=item02.jpg /a class=buyBuy Me!/abr /
img src=item03.jpg /a class=buyBuy Me!/abr /
So in the jQuery method, what is the best way to make the multiple arguments
(that were previously in the inline HTML/JS
function call) available to the event handling function?
I've been limping along using various methods to get arguments to the event
handling function (E.g., like sticking
values in an object's id field, etc.), but I'm at a loss when it comes to a solid way to
pass numerous arguments to
the event handling function.
Thanks for reading,
Eric P.
James,
Your solution is elegant and robust. It fit the bill perfectly for what I was doing. I was about to use jQuery's data()
method to attach values to HTML objects, but your solution is much easier to digest.
Thanks for the great insight!
RobG,
Good point. It's always good to work w/the mindset that not all will have JavaScript turned on. Fortunately, the
functionality I'm building is for an administrative area for customers that must have JavaScript support to even log in.
donb,
Don't worry. The code example I gave was merely an example to simplify the
problem. No $0.01 items for you! ;)
Eric
[jQuery] Re: Best practice to get form field values
Thank you Dan, this looks good.
Still wondering, if form field access shouldn't be part of the core.
(I need it more frequently than all these slideUpBlendFadeToggle
effects ;-)
Martin
On Jun 12, 9:16 am, mar10 [EMAIL PROTECTED] wrote:
Hi,
what would you consider the 'best practice' to access form input
values?
Having an input field
input value=New topic class=inputEdit name=title
type=text
I could use
$('[EMAIL PROTECTED]').val()
or
$('[EMAIL PROTECTED]title]').val()
or
$('[name=title]').val()
or
$('[name=title]').val()
(
I also once observed, that the right side of the '=' was evaluated, so
it was possible to write
var x = 'title';
$('[name=x]')
but i could not reproduce it today, so maybe I'm wrong.
)
Of course assigning an additional id
input value=New topic class=inputEdit name=title
type=text id=title
would allow for
$('#title')
but that appears to be somewhat redundant to me.
In short I am looking for the most simple built-in syntax to access
form values, like prototype's $F().
This means that querying option lists should return a list of selected
values (or texts), and text areas should work also.
Thanks
Martin
[jQuery] Re: Best practice to get form field values
Martin,
Check out the Field plug-in:
http://jquery.com/plugins/project/field
This provides the type of functionality you're looking for (of providing
form values back for any type of field.)
-Dan
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of mar10
Sent: Thursday, June 12, 2008 3:17 AM
To: jQuery (English)
Subject: [jQuery] Best practice to get form field values
Hi,
what would you consider the 'best practice' to access form input
values?
Having an input field
input value=New topic class=inputEdit name=title
type=text
I could use
$('[EMAIL PROTECTED]').val()
or
$('[EMAIL PROTECTED]title]').val()
or
$('[name=title]').val()
or
$('[name=title]').val()
(
I also once observed, that the right side of the '=' was evaluated, so
it was possible to write
var x = 'title';
$('[name=x]')
but i could not reproduce it today, so maybe I'm wrong.
)
Of course assigning an additional id
input value=New topic class=inputEdit name=title
type=text id=title
would allow for
$('#title')
but that appears to be somewhat redundant to me.
In short I am looking for the most simple built-in syntax to access
form values, like prototype's $F().
This means that querying option lists should return a list of selected
values (or texts), and text areas should work also.
Thanks
Martin
[jQuery] Re: Best practice to get form field values
At the risk of slightly drifting the subject of this thread, I took a
look at the demos for the Field plugin:
http://www.pengoworks.com/workshop/jquery/field/field.plugin.htm#examples
Does anyone know if I can use it to select all of the form fields
inside a specific div? IE:
form id="myForm"
div id="personName"
input type="text" id="firstName" name="firstName" /
input type="text" id="lastName" name="lastName" /
/div
input type="text" id="jobTitle" name="jobTitle" /
/form
Then do this to just get firstName and lastName?
var vals = $('#personName').formHash();
IIRC, recently I tried doing that with the native jquery .serialize()
and the jquery form plugin and neither would do that: it seemed like
they *had *to be passed a selector that found a form. IE:
$('#myForm').serialize(). Maybe I'm wrong about that? My experiments
lead me to believe that.
I'm often working in asp.net and have one form tag per page, but
different sets of input fields in the page and would like to be able to
easily serialize by set for preparation for ajax calls.
Thanks,
Jack
Dan G. Switzer, II wrote:
Martin,
Check out the Field plug-in:
http://jquery.com/plugins/project/field
This provides the type of functionality you're looking for (of providing
form values back for any type of field.)
-Dan
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of mar10
Sent: Thursday, June 12, 2008 3:17 AM
To: jQuery (English)
Subject: [jQuery] Best practice to get form field values
Hi,
what would you consider the 'best practice' to access form input
values?
Having an input field
input value="New topic" class="inputEdit" name="title"
type="text"
I could use
$('[EMAIL PROTECTED]').val()
or
$('[EMAIL PROTECTED]"title"]').val()
or
$('[name=title]').val()
or
$('[name="title"]').val()
(
I also once observed, that the right side of the '=' was evaluated, so
it was possible to write
var x = 'title';
$('[name=x]')
but i could not reproduce it today, so maybe I'm wrong.
)
Of course assigning an additional id
input value="New topic" class="inputEdit" name="title"
type="text" id="title"
would allow for
$('#title')
but that appears to be somewhat redundant to me.
In short I am looking for the most simple built-in syntax to access
form values, like prototype's $F().
This means that querying option lists should return a list of selected
values (or texts), and text areas should work also.
Thanks
Martin
[jQuery] Re: Best practice to get form field values
My favorite way to get form input values and validate them is by using the
each() method.
Here's an example:
$(function()
{
$('#myForm input[type=text]').each(function()
{
switch (this.name)
{
case 'first_name':
// validate the first name input field here
break;
case 'email':
// Something with email here
break;
}
});
}
If this isn't sufficient information I can make a more advanced example for
you.
On Thu, Jun 12, 2008 at 9:16 AM, mar10 [EMAIL PROTECTED] wrote:
Hi,
what would you consider the 'best practice' to access form input
values?
Having an input field
input value=New topic class=inputEdit name=title
type=text
I could use
$('[EMAIL PROTECTED]').val()
or
$('[EMAIL PROTECTED]title]').val()
or
$('[name=title]').val()
or
$('[name=title]').val()
(
I also once observed, that the right side of the '=' was evaluated, so
it was possible to write
var x = 'title';
$('[name=x]')
but i could not reproduce it today, so maybe I'm wrong.
)
Of course assigning an additional id
input value=New topic class=inputEdit name=title
type=text id=title
would allow for
$('#title')
but that appears to be somewhat redundant to me.
In short I am looking for the most simple built-in syntax to access
form values, like prototype's $F().
This means that querying option lists should return a list of selected
values (or texts), and text areas should work also.
Thanks
Martin
--
Isaak Malik
Web Developer
[jQuery] Re: Best Practice
I think you got the jist of it. Syntax looks just fine. The filter
isn't necessary, but I doubt it will be depreciated in future
releases.
function getRecord(id,URL){
jQuery(#ResultsTable tr .selected).removeClass(selected);
jQuery(#+id).addClass(selected);
...
~Sean
On 11/2/07, Doug [EMAIL PROTECTED] wrote:
Hello All, I am a newbie and am trying to learn jQuery. I created this
function:
function getRecord(id,URL){
jQuery(#ResultsTable
tr).filter(.selected).removeClass(selected);
jQuery(#+id).addClass(selected);
.
It goes on to return a record.
The first line above removes a highlighted (selected) rows in a table.
The next line highlights the currently selected row. This works but am
worried that it is not the best coding by using #ResultsTable tr and
that this type of naming become illegal in a future version of jQuery.
Any suggestions? Or is there a cleaner way to bind a selected row from
a master table to detail record(s).
[jQuery] Re: Best Practice
On 03/11/2007, Sean Catchpole [EMAIL PROTECTED] wrote:
function getRecord(id,URL){
jQuery(#ResultsTable tr .selected).removeClass(selected);
jQuery(#+id).addClass(selected);
...
~Sean
I think Sean meant jQuery(#ResultsTable tr.selected)... ...without a
space between tr and .selected as you want the tr that has the class
selected, not .selected descendants of any tr within
#ResultsTable.
Joel Birch.
[jQuery] Re: Best practice for form serialize?
If you know the form name, you have most of what you need. Using
jQuery's selectors, get a reference to the form:
$(form[name='myform']);
Then from there find each of the child form elements (luckily, most form
elements are input boxes:
$(form[name='myform'] input);
Repeat the above for the other form tags in your form - select,
textarea, etc.
Then apply your event handler:
$(form[name='myform'] input).blur(function () {
$.ajax({url: 'mypage.php', . . .});
});
Repeat this for each selector type you may need (selects, text areas,
etc.) - but the inner code will be the same, so you should probably
create a function that does the submission.
The $.ajax call really depends on your needs. You'll need the Success
parameter set so you can populate the DIV with the results (or use a
$.post() if you want to short cut a little). Serializing your data for
submission, well, that's what pulled me into this thread. I want to see
how others are doing it.
For myself, I create a string variable, and manually create the string
based on the form values. Maybe using the .serialize() or
.serializeArray() methods (http://docs.jquery.com/Ajax - bottom of list)
would be a better option.
There ARE plugins to help with form management/submission. The Form
plugin has helped me some. But, it's really just a shortcut to doing it
manually - under the hood I *think* it's just doing the same type of
thing as what I posted above...
Any better ways to do this? I'm not sure I'm steering you straight
here, but am relatively confident my suggestions will work. The
question is if my method is more work than I should be doing.. :)
Shawn
mo2g wrote:
I have a web page with two forms on it. It originally used Prototype
and I would like to convert it to jQuery.
The main form has text, checkboxes, radio buttons, etc.
I want to watch the form and if any form element changes I want to
serialize the entire form and post it to a URL, receive the result and
show it in a DIV.
Basically I will be using this form to return a live search result
total so that the user can see how many results will be returned with
certain search form choices.
I have viewed many different tutorials both with and without plugins.
I am posting here in hopes that the experts on this forum can point me
in the right direction. Should I use plugins and if so which ones?
Here are a couple of my requirements:
1. I need to be able to reference only the one form. There may be
multiple forms on the page.
2. I need to watch all the elements for change which includes
checkboxes and radiobuttons.
3. I would like the page to load as quickly as possible.
4. When i serialize the form to submit it for the live results, I need
all the form elements to post correctly including the checkboxes.
Thanks in advance.
[jQuery] Re: Best practice for form serialize?
I was asked why I couldn't just set an action on each field. I can't change the form as it is dynamically created. I just know the form name. In Prototype I used the Form Observer. On Oct 12, 1:07 pm, mo2g [EMAIL PROTECTED] wrote: I have a web page with two forms on it. It originally used Prototype and I would like to convert it to jQuery. The main form has text, checkboxes, radio buttons, etc. I want to watch the form and if any form element changes I want to serialize the entire form and post it to a URL, receive the result and show it in a DIV. Basically I will be using this form to return a live search result total so that the user can see how many results will be returned with certain search form choices. I have viewed many different tutorials both with and without plugins. I am posting here in hopes that the experts on this forum can point me in the right direction. Should I use plugins and if so which ones? Here are a couple of my requirements: 1. I need to be able to reference only the one form. There may be multiple forms on the page. 2. I need to watch all the elements for change which includes checkboxes and radiobuttons. 3. I would like the page to load as quickly as possible. 4. When i serialize the form to submit it for the live results, I need all the form elements to post correctly including the checkboxes. Thanks in advance.
[jQuery] Re: Best Practice? Sliding table rows up and down
Often padding, borders and margins get in the way of smooth animation. The same goes for UL structures as Tables. This is part of Box Model Hell (my own nightmare). Although I REALLY like clean code with virtually nothing in it, I often have to add divs and layer them so that I don't put padding and width/height on the same element. When slidingDown, you are changing the height and then at the very end, changing the display to none. This will result in the sliding only reaching the point of zero, but leaving the padding intact. Then the display:none kicks in and the padding jumps and disappears. Again, keep this padding issue in mind and rethink the problem. I usually use DIV with no padding to solve it for me. Hmm, I wonder if you could animate the padding down to zero after the table cell animates height to zero, but before the display none kicks in? Glen On 9/17/07, Andy Matthews [EMAIL PROTECTED] wrote: I've been in this situation before and gone a different route, but this time I'd really like to use a table for my data, but have the ability to show/hide certain rows using slideUp/slideDown. I originally tried sliding the actual TR up/down but it wasn't working correct. I ahve a table with 6 columns, with the hidden TR having a single column with colspan='6' on it. Sliding that down screwed up the table in both IE and FF. So I seemed to recall hearing that some people used colspan on the TD, but put a DIV inside that. That works but the animation is a little choppy AND the table has a miniscule shift left to right when I click the toggle switch. It goes away as soon as the animation is done, but I'd rather not have that chop. So my question is, what is the best, preferred way to show/hide additional information in this sort of situation? * Andy Matthews *Senior ColdFusion Developer Office: 877.707.5467 x747 Direct: 615.627.9747 Fax: 615.467.6249 [EMAIL PROTECTED] www.dealerskins.com inline: dealerskinslogo.bmp
[jQuery] Re: Best Practice? Sliding table rows up and down
Update. I found that one of the reasons the animation was a little choppy was that that I wasn't explicitly defining widths for the TD in my table. Once I defined those, the animation was much smoother. andy _ From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Glen Lipka Sent: Monday, September 17, 2007 10:54 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Best Practice? Sliding table rows up and down Often padding, borders and margins get in the way of smooth animation. The same goes for UL structures as Tables. This is part of Box Model Hell (my own nightmare). Although I REALLY like clean code with virtually nothing in it, I often have to add divs and layer them so that I don't put padding and width/height on the same element. When slidingDown, you are changing the height and then at the very end, changing the display to none. This will result in the sliding only reaching the point of zero, but leaving the padding intact. Then the display:none kicks in and the padding jumps and disappears. Again, keep this padding issue in mind and rethink the problem. I usually use DIV with no padding to solve it for me. Hmm, I wonder if you could animate the padding down to zero after the table cell animates height to zero, but before the display none kicks in? Glen On 9/17/07, Andy Matthews [EMAIL PROTECTED] wrote: I've been in this situation before and gone a different route, but this time I'd really like to use a table for my data, but have the ability to show/hide certain rows using slideUp/slideDown. I originally tried sliding the actual TR up/down but it wasn't working correct. I ahve a table with 6 columns, with the hidden TR having a single column with colspan='6' on it. Sliding that down screwed up the table in both IE and FF. So I seemed to recall hearing that some people used colspan on the TD, but put a DIV inside that. That works but the animation is a little choppy AND the table has a miniscule shift left to right when I click the toggle switch. It goes away as soon as the animation is done, but I'd rather not have that chop. So my question is, what is the best, preferred way to show/hide additional information in this sort of situation? Andy Matthews Senior ColdFusion Developer Office: 877.707.5467 x747 Direct: 615.627.9747 Fax: 615.467.6249 [EMAIL PROTECTED] www.dealerskins.com http://www.dealerskins.com/ dealerskinslogo.bmp
[jQuery] Re: Best Practice? Sliding table rows up and down
The other issue with table rows is the value applied to the display property when they are shown. IIRC, the display property is reset to block, but this messes up the layout in FF, because it requires display: table-row to be shown properly. There was an update to jquery.js back in late winter/early spring that fixed fadeIn and fadeOut with table rows, but the slideUp and slideDown still doesn't work right in FF as far as I know. --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On Sep 17, 2007, at 11:54 AM, Glen Lipka wrote: Often padding, borders and margins get in the way of smooth animation. The same goes for UL structures as Tables. This is part of Box Model Hell (my own nightmare). Although I REALLY like clean code with virtually nothing in it, I often have to add divs and layer them so that I don't put padding and width/height on the same element. When slidingDown, you are changing the height and then at the very end, changing the display to none. This will result in the sliding only reaching the point of zero, but leaving the padding intact. Then the display:none kicks in and the padding jumps and disappears. Again, keep this padding issue in mind and rethink the problem. I usually use DIV with no padding to solve it for me. Hmm, I wonder if you could animate the padding down to zero after the table cell animates height to zero, but before the display none kicks in? Glen On 9/17/07, Andy Matthews [EMAIL PROTECTED] wrote: I've been in this situation before and gone a different route, but this time I'd really like to use a table for my data, but have the ability to show/hide certain rows using slideUp/slideDown. I originally tried sliding the actual TR up/down but it wasn't working correct. I ahve a table with 6 columns, with the hidden TR having a single column with colspan='6' on it. Sliding that down screwed up the table in both IE and FF. So I seemed to recall hearing that some people used colspan on the TD, but put a DIV inside that. That works but the animation is a little choppy AND the table has a miniscule shift left to right when I click the toggle switch. It goes away as soon as the animation is done, but I'd rather not have that chop. So my question is, what is the best, preferred way to show/hide additional information in this sort of situation? Andy Matthews Senior ColdFusion Developer dealerskinslogo.bmp Office: 877.707.5467 x747 Direct: 615.627.9747 Fax: 615.467.6249 [EMAIL PROTECTED] www.dealerskins.com
[jQuery] Re: Best Practice? Sliding table rows up and down
@Andy. got a URL I can view? I've been trying to get smooth animation with tables for awhile and wonder what your solution is. @Dave. got a URL for your approach? Rick From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Andy Matthews Sent: Monday, September 17, 2007 12:14 PM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Best Practice? Sliding table rows up and down Update. I found that one of the reasons the animation was a little choppy was that that I wasn't explicitly defining widths for the TD in my table. Once I defined those, the animation was much smoother. andy _ From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Glen Lipka Sent: Monday, September 17, 2007 10:54 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Best Practice? Sliding table rows up and down Often padding, borders and margins get in the way of smooth animation. The same goes for UL structures as Tables. This is part of Box Model Hell (my own nightmare). Although I REALLY like clean code with virtually nothing in it, I often have to add divs and layer them so that I don't put padding and width/height on the same element. When slidingDown, you are changing the height and then at the very end, changing the display to none. This will result in the sliding only reaching the point of zero, but leaving the padding intact. Then the display:none kicks in and the padding jumps and disappears. Again, keep this padding issue in mind and rethink the problem. I usually use DIV with no padding to solve it for me. Hmm, I wonder if you could animate the padding down to zero after the table cell animates height to zero, but before the display none kicks in? Glen On 9/17/07, Andy Matthews [EMAIL PROTECTED] wrote: I've been in this situation before and gone a different route, but this time I'd really like to use a table for my data, but have the ability to show/hide certain rows using slideUp/slideDown. I originally tried sliding the actual TR up/down but it wasn't working correct. I ahve a table with 6 columns, with the hidden TR having a single column with colspan='6' on it. Sliding that down screwed up the table in both IE and FF. So I seemed to recall hearing that some people used colspan on the TD, but put a DIV inside that. That works but the animation is a little choppy AND the table has a miniscule shift left to right when I click the toggle switch. It goes away as soon as the animation is done, but I'd rather not have that chop. So my question is, what is the best, preferred way to show/hide additional information in this sort of situation? Andy Matthews Senior ColdFusion Developer Office: 877.707.5467 x747 Direct: 615.627.9747 Fax: 615.467.6249 [EMAIL PROTECTED] www.dealerskins.com http://www.dealerskins.com/ image001.png
[jQuery] Re: Best Practice? Sliding table rows up and down
One of the issues I ran into with animating tables (specifically, TRs), is that jQuery appears to change the 'display' style from table- row to block while animating, resulting in the row breaking completely while animating, then popping back into place when the animation is complete. I'd love to see a workaround for this which maintains the alignment of headings in the THEAD section.
[jQuery] Re: Best practice for image source change
I wrap each thumbnail with a link:
a href=javascript:; id=tnLink01img src=thumbnail01.jpg
alt= //a
This is the amateurish jQuery code I've conjured up:
$(a#tnLink01).click(function() {
$(#mainImage).attr({src:another_large_image.jpg});
});
I'll need one of these functions for every thumbnail and that seems
wrong somehow, so I'd really appreciate any helpfil tips and
strategies for switching a larger image when clicking thumnails.
You could make your css query less specific.
You could also automatically generate a large image url based on the content
of your thumbnail ie.
$(div.thumbnails img).click(function() {
var large_img = $(this).attr('src').split(.).shift() + '_large.jpg'
//gets image src part before period, adds suffix
$(#mainImage).attr('src'.large_img);
}
Above example is simple and assumes image on has 1 period in it!
Hope that helps,
Will
