PDA

View Full Version : JQuery syntax



The_Alligator
07-04-2010, 01:39 PM
Can I keep multiple CLASS attributes in HTML elements and retrieve them using JQuery ?

Example:

<td class=class1><input type="checkbox" class="class2" class="class3" name="str1" value="" align="middle" /></td>

I wish to find out how many elements have class="class3".

Can I retrieve those elements using JQuery $("#class3").size() ? this seems does not work...this gives wrong result.

jscheuer1
07-04-2010, 02:13 PM
$("#class3").size()

will return how many elements on the page have an id of class3.

You want:


$(".class3").size()

Also available in jQuery is the hasClass() function:


if($this).hasClass('class3')){
// do something here
}

Which can be useful inside an each() function or inside an event (click(), hover(), etc.) function.

The_Alligator
07-04-2010, 04:15 PM
Thanks for the post. That was helpful.

I need one more help here.

Could you please let me know whether there is a kind of function like doesnothasClass() in JQuery ?


Basically,I want to exclude some input types which has a particular class="CLASS1"

can JQuery help at this part.

As of now,I have a javascript like below



var inputs = document.getElementById("tableContainer").getElementsByTagName("input");
//alert('inputs.length='+inputs.length);

for (var index = 0; index < inputs.length; index++)
{
if (inputs[index].type == "checkbox") // I WANT to exclude input checkboxes containing class="CLASS1"
{
checkboxes.push(inputs[index]);
}
}




I want to modify this javascript . I want to use JQuery here and want to do the above red colored comment.

what changes I have to do here if I use JQuery here ?

jscheuer1
07-04-2010, 09:25 PM
It's hard to be certain without more of the code and without the markup. But in many scenarios (assuming, which isn't clear from your post, that checkboxes was an empty array before the code in your post), that would be roughly equivalent to:


var checkboxes = $('#tableContainer input:checkbox').not('.CLASS1');

Or (if checkboxes has already been declared in the scope where it is required and is available in this scope, and may be overwritten by this operation):


checkboxes = $('#tableContainer input:checkbox').not('.CLASS1');

Either way (whichever, if either, works), checkboxes could thereafter be treated in most respects as a normal array, and also as a jQuery collection of objects.

If neither works out for you, I would need to see the page and have more of an idea of what your ultimate objective is.

The_Alligator
07-05-2010, 06:12 AM
Thank you so much . Thats perfectly working fine.

Could you please help me to use JQuery for the problem below ?


I have multiple <td>'s as below.

<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAmericas column17 " name="strCustTerr1" value="" align="middle" /></td> //record-1

................................................................................
................................................................................


<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAsia column10 " name="strCustTerr19" value="" align="middle" /></td> //record-18


Let me explain what I need here

CASE 1:

When the user clicks on such a <td> say the //record-1 in the above, I want to show the below alert text .
alert text is "AgreeAmericasClustercolumn17" // "Agree" to add because 17 is odd

please see the color to understand how I have picked the data to build this alert string.

CASE 2:

When the user clicks on such a <td> say the //record-18 in the above, I want to show the below alert text .
alert text is "ViewAsiaClustercolumn10" // "View" to add because 10 is even

please see the color to understand how I have picked the data to build this alert string.



If I use javascript , then I have to put onclick() functions in each td's . Also , it wont be easy to get the multiple CSS values in a <td>.

So, I'm wondering whether JQuery can make it easier ?
Could you please help at this part.

jscheuer1
07-05-2010, 11:14 AM
Here's a little demo. The selector in this case is $('td'). It could be $('.cellTextGreyLeft'), $('td.cellTextGreyLeft'), or even $('td.cellTextGreyLeft[width=33]'). There are other possibilities for the selector. Things would be a little bit simpler if you were going for just the onclick of the inputs. Those are included here though, because they are in the td's.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('td').click(function(){
var cname = $(this).find('input').get(0).className.split(' '), cnum = cname[2].substr(6);
alert((cnum % 2 === 0? 'View' : 'Agree') + cname[1].substr(12) + 'Cluster' + cname[2]);
});
});
</script>
</head>
<body>
<table>
<tr>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAmericas column17 " name="strCustTerr1" value="" align="middle" /></td>
</tr>
<tr>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAsia column10 " name="strCustTerr19" value="" align="middle" /></td>
</tr>
</table>

</body>
</html>

The_Alligator
07-05-2010, 02:06 PM
Here's a little demo. The selector in this case is $('td'). It could be $('.cellTextGreyLeft'), $('td.cellTextGreyLeft'), or even $('td.cellTextGreyLeft[width=33]'). There are other possibilities for the selector. Things would be a little bit simpler if you were going for just the onclick of the inputs. Those are included here though, because they are in the td's.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('td').click(function(){
var cname = $(this).find('input').get(0).className.split(' '), cnum = cname[2].substr(6);
alert((cnum % 2 === 0? 'View' : 'Agree') + cname[1].substr(12) + 'Cluster' + cname[2]);
});
});
</script>
</head>
<body>
<table>
<tr>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAmericas column17 " name="strCustTerr1" value="" align="middle" /></td>
</tr>
<tr>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAsia column10 " name="strCustTerr19" value="" align="middle" /></td>
</tr>
</table>

</body>
</html>

The above code is giving compile error in IE browser.

syntax error at line no 9 i.e here jQuery(function($){ ...What is the problem here ?


The selector in this case is $('td'). It could be $('.cellTextGreyLeft'), $('td.cellTextGreyLeft'),

Yes. you are right. I would rather change it to $('td.selectColumn') for my need.


The code looks fine. Except the compile syntax error . Could you please remove the syntax error and help me to try this out ?

By the way , jQuery(function($) ----> what is $ inside for ? is it the reason for syntax error ?

jscheuer1
07-05-2010, 02:57 PM
Works fine here in IE 6, 7, & 8. What version of IE are you using? Did you use the exact code that you quoted? Just to be sure I copied that (your quote) and it works here.

You don't have a:


$('td.selectColumn')

You could do a:


$('td').has('.selectColumn').click(function(){

Or, if you want your onclick to only apply to the input:


$('input.selectColumn').click(function(){

The_Alligator
07-05-2010, 05:22 PM
Works fine here in IE 6, 7, & 8. What version of IE are you using? Did you use the exact code that you quoted? Just to be sure I copied that (your quote) and it works here.

You don't have a:
You could do a:

$('td').has('.selectColumn').click(function(){
Or, if you want your onclick to only apply to the input:

$('input.selectColumn').click(function(){
NOW its working. My IE version is 7.0.5730.13
In order to fix this , I downloaded the JQuery JS library in my hard disk and then used <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Bingo .....Now it started working :)


$('input.selectColumn').click(function(){
yup , I'd love this . because I am interested in clicking checkboxes of class 'selectColumn' only.

You are very much helpful....Will you be kind enough to help me at the last part below ? I'm loving JQuery to implement. This is an awesome library.

Let me explain the last part of the problem here..

IF there is ALL the blue checkboxes are checked on PAGE LOAD then I want to check the RED checkbox below .

This would be very hard to implement using simple javascript. I'd love to apply JQuery here. I'd customize this into my page.

N.B : Here is the logic . All those blue checkboxes have same class ="AgreeAmericasClustercolumn17 " and the red checkbox has class cloumn17 ....so they all belong to same column17...so they will be grouped on PAGE LOAD.




<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAmericas column17 " name="strCustTerr0" value="" align="middle" /></td>




<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr1" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr2" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr3" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr4" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr5" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr6" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr7" value="" align="middle" /></td>

The_Alligator
07-05-2010, 05:57 PM
Works fine here in IE 6, 7, & 8. What version of IE are you using? Did you use the exact code that you quoted? Just to be sure I copied that (your quote) and it works here.

You don't have a:
You could do a:

$('td').has('.selectColumn').click(function(){

Or, if you want your onclick to only apply to the input:


$('input.selectColumn').click(function(){

NOW its working. my IE version is 7.0.5730.13

In order to fix this , I downloaded the JQuery JS library in my hard disk and then used

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

bingo .....now it started working :)




$('input.selectColumn').click(function(){

yup , I'd love this . because I am interested in clicking checkboxes of class 'selectColumn' only.


You are very much helpful


Will you be kind enough to help me at this last part ? I'm loving JQuery to implement. This is an awesome library.

Let me explain the problem first...

IF there is ALL the blue checkboxes are checked on PAGE LOAD then I want to check the RED checkbox below .

This would be very hard to implement using simple javascript. I'd love to apply JQuery here. I'd use this into my page.



<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAmericas column17 " name="strCustTerr0" value="" align="middle" /></td>




<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr1" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr2" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr3" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr4" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr5" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr6" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr7" value="" align="middle" /></td>

jscheuer1
07-05-2010, 06:07 PM
You didn't really 'fix' anything, rather you were having trouble connecting to the Google AJAX api server. There can be problems with that at times. It's a bit of a trade off. Using the api server will often speed the loading of your page as many folks have the script from that server cached. But sometimes there will be a problem connecting.

This assumes that there are no other name="strCustTerrwhatever" elements on the page and that strCustTerr0 comes first:


jQuery(function($){
var strCustTerr = $('[name^=strCustTerr]'), strCustTerr0 = strCustTerr.get(0);
strCustTerr = strCustTerr.not(strCustTerr0);
if(strCustTerr.size() === strCustTerr.filter(':checked').size()){
strCustTerr0.checked = true;
}
});

Now, you only said that if all of the blue were checked onload, check the red. That's what this does, but it could also uncheck the red if all of the blue aren't checked onload. It could even check all of the blue if the red is checked by the user. or onload, or both, as well as check the red if the user checks all the blue. You probably don't want all of those, but might want some.

The_Alligator
07-05-2010, 08:42 PM
My comments are below in color.





This assumes that there are no other name="strCustTerrwhatever" elements on the page and that strCustTerr0 comes first:

No. there are other name="strCustTerrwhatever" EXISTS. So,I would rather use the CSS values instead of name field.


the logic is, red boxes has css value "column17" . ALL blue boxes also have "....column17" inside the second CSS value ...so they are related .Hence , they'll be grouped.

So, when I'd click the red box , ALL the blue boxes be checked.

Also, when ALL the blue boxes are checked , I'd put a check on the red box.

I'd like to calculate in terms of CSS values but not with name field.

Could you please update the code using CSS attributes instead of name field ?



jQuery(function($){
var strCustTerr = $('[name^=strCustTerr]'), strCustTerr0 = strCustTerr.get(0);
strCustTerr = strCustTerr.not(strCustTerr0);
if(strCustTerr.size() === strCustTerr.filter(':checked').size()){
strCustTerr0.checked = true;
}
});

Now, you only said that if all of the blue were checked onload, check the red. That's what this does,



but it could also uncheck the red if all of the blue aren't checked onload. It could even check all of the blue if the red is checked by the user. or onload, or both, as well as check the red if the user checks all the blue. You probably don't want all of those, but might want some.

Yes. You are right . basically, I'll save/retrieve the blue checked values in the database . but I'll NOT save the checked status of the red box .

However , If I find ALL the blue boxes are checked by the user , then I'll apply JQuery to check the red box

Also, if the user click on red box , then ALL the blue boxes will be checked.

you know , I have really have 16 such groups i.e column1,column2,...column16....If this works out for column17 , then I'll use a loop and apply the same for all these related groups.

So,lets just work out for column17 only at first.