Sounds hard, but very simple.

Say I have a table on a page and a button to add rows to that table. On that button, I have added an ONCLICK to go to the function below.

Below, I gave my table a CLASS name because .Net screws up the ID — and I am able to call that when the button is clicked.
Here the .append function adds after the last element — THIS COULD BE PROBLEM FOR YOU if you have a TBODY. There are workarounds but I am not going to discuss those at this time.

function AddCustomSetting() {
    $('.cusSettingsTable').append("<tr><td onclick='RemoveRow(this);'>Remove</a></td><td><input type='textbox' /></td><td>Test Me</td><td></td></tr>");
}

That is all it would take to add a new Row to a table… now what if we want to remove it? Well notice in that append statement that I added another onclick function to remove the row and sent the TD (via this) element with the call. Here is that function:

function RemoveRow(c) {
    $(c).parent().remove();
}

And that is it! JQuery strikes again!
ciao!
t

$('#DIVID > div.CLASSNAME').each(function() {
           numOfColumns++;
                });

This asks for all divs within your holding div that have a certain class name. ** THE ‘ATGT’ after DIVID is a Greater Than sign**

You have a DIV and want to check if it is visible

Use the is() function passing “:visible” :

if( $('#myDiv').is(':visible') ) {}

Hidden

This is the same as checking if an element is visible but uses :hidden instead and the logic is the reverse:

if( $('#myDiv').is(':hidden') ) {}

Elements will return TRUE to the Hidden check even if they are not but take up no space!

Make the IS NOT check to combat this.

if( !$('#myDiv').is(':visible') {}
}

You can use the visible parameter to loop through all visible divs

$("#mydiv div:visible").each( function() {}

fyi – you can change one of your javascript variables on your javascript event tag!

For instance, I wanted to simply change a variable when someone went in and then out of the username text box… i didnt want to write a function JUST to change a variable so i tried this and it worked!
onblur=”g_uNameChanged=true”

OH YA,,,,, I also found out that you can actually do two javascript things on the same line, because I checked the variable like this:

onblur=”g_uNameChanged=true; alert(g_uNameChanged);”

cheers!

t

Have I mentioned that I love JQuery? Well I do, and I have…but I’m saying it again… I DO.

Here is a way to grab a keyCode (firefox) or CharCode (ie) with just couple total lines of code.

Say you make a textbox with an id of ‘tester’, the following code will give you the key(char)code of whatever is pressed WHEN it is pressed inside the textbox.

     $('#tester').bind("keydown", function(e) {
                var key = e.charCode || e.keyCode || 0;
                alert(key);
            });

NOTICE: var key = e.charCode || e.keyCode || 0;

This is a very nice way of grabbing the key code depending on what browser you are using.

Very nice snippet, thanks Javascript gurus!!!
t
======

AND BTW — Here is the Charcode table:

:even Selects every other (even) element from the matched element set.

dd Selects every other (odd) element from the matched element set.

:eq(0) and :nth(0) Selects the Nth element from the matched element set

:gt(N) Selects all matched elements whose index is greater than N.

:lt(N) Selects all matched elements whose index is less than N.

:first Equivalent to :eq(0)

:last Selects the last matched element.

:parent Selects all elements which have child elements (including text).

:contains(‘test’) Selects all elements which contain the specified text.

:visible Selects all visible elements (this includes items that have a display of block or inline, a visibility of visible, and aren’t form elements of type hidden)

:hidden Selects all hidden elements (this includes items that have a display of none, or a visibility of hidden, or are form elements of type hidden)

So working with a custom control and having trouble manipulating a couple input boxes in that control on the page that the control lives in.

So I had a custom control embedded on a page with two calendar input boxes. I wanted to check on the submit button to that the end date was after the start date. I could not get this to work in the control.

But I was able to give those text boxes class names (ie: cssClass=”DatesTB”) and on the page that the control resided in I simply did this on the submit button click (in html) ….

 if ($("input.DatesTB:first").val() > $("input.DatesTB:last").val()) {
            writeMessageToPage("The End Date must be after the Start Date.");
            return false;
 
        }

Notice how you can cooly grab the FIRST input box with a specific class name by the JQuery selector
$(“input.CLASSNAME:first) and subsequently get the last one with the “last” identifier!

Very nice and very helpful JQUERY! I love you!!!!

You can also do something like this $(“td:eq(2)”) to get a certain number of element on your page.

That example would be grabbing the 3rd TD on the page.

Love it, hope it helps!

jQuery 1.3 and above

jQuery 1.2

OK, there are alot of reasons why JQuery is nice to use OVER Javascript… (shorter syntax…cool stuff in very little code, etc…)… AND YES EVERYONE (my co-workers included) I know that JQUERY IS Javascript…

However, the gurus who created JQuery have apparently found a fix to a firefox/javascript problem that Mozilla has not wanted to address and because of that … JQUERY is officially better than Javascript!

With that out of the way… let me explain the situation…

We were trying to disable a checkbox based simply upon another checkbox being checked… it looked something like this:

if(document.getElementById(‘roleStateAdmin’).getAttribute(‘checked’)) {
document.getElementById(‘roleTechAdmin’).setAttribute(‘checked’,  false);
document.getElementById(‘roleTechAdmin’).setAttribute(‘disabled’, true);
}
else if(document.getElementById(‘roleTechAdmin’).getAttribute(‘checked’)) {
document.getElementById(‘roleStateAdmin’).setAttribute(‘checked’,  false);
document.getElementById(‘roleStateAdmin’).setAttribute(‘disabled’, true);
}
else {  // Neither checked.
document.getElementById(‘roleStateAdmin’).setAttribute(‘disabled’, false);
document.getElementById(‘roleTechAdmin’).setAttribute(‘disabled’, false);

This code worked just as intended in I.E.  but completely broke in FF. After several Google searches to find the problem, I officially chocked it up to being Broken in FF and decided that my only option was to see if JQuery could make it work.

It COULD and did… here it is the ALTERNATE Jquery code that makes this action work just fine:

if($(‘#roleStateAdmin’).attr(‘checked’)) {
$(‘#roleTechAdmin’).attr(‘checked’,  false);
$(‘#roleTechAdmin’).attr(‘disabled’, true);
}
else if($(‘#roleTechAdmin’).attr(‘checked’)) {
$(‘#roleStateAdmin’).attr(‘checked’,  false);
$(‘#roleStateAdmin’).attr(‘disabled’, true);
}
else {  // Neither checked.
$(‘#roleStateAdmin’).attr(‘disabled’, false);
$(‘#roleTechAdmin’).attr(‘disabled’, false);