Ok - here's a good example of jQuery making my life way easy. I'm currently working on a Purchase order entry screen. I did not want to use a grid for this as it needs some extra functionality that's hard to get in a grid.
First screen shot in the image shows two lines of the PO - when you walk off the end of the 2nd line a 3rd line is created. This is not a grid, so the DOM needs to be instantly modified for the user. That is the second screen shot in the attached image.
At the end of each row is a cool-little button that splits the row of the PO into several lines - as you click it it opens up new lines - and hides the button so you can't click it again. That is the third screen in the image. The split lines appear with AA, AB, AC (I'm going to hide that when I'm done with this code - just there for debugging purposes now). They are DISABLED textboxes - as you see they are greyed out.
So - first I need an event to fire when a certain field gets a FOCUS OUT - jQuery to set that up is this
Code:
$('.acs-input-field').live('focusout', focusoutField);
That is a LIVE event - meaning I can add new fields to the DOM that have the class ".acs-input-field" and they automagically get the event assigned. I only execute this line of code ONCE - when the DOM READY moment happens. That's really cool. I never have to worry about creating a new field on the screen and forgetting to assign the events it needs to function!
Now - this is the FOCUSOUT function - the one that adds the NEW rows as you walk off an existing row
Code:
function focusoutField(sender) {
var wesAWC = $(sender.target);
var strRow = "";
var intRow = 0;
var strNew = "";
var wesNew = [];
if (wesAWC.hasClass("acs-newrow")) {
strRow = findClass(wesAWC.parent(), "acs-rownumber");
intRow = parseInt(String(strRow).replace("acs-rownumber", ""), 10) + 1;
strNew = "acs-rownumber" + intRow;
wesNew = wesAWC.parent().siblings("." + strNew);
if (wesNew.length == 0) {
wesNew = wesAWC.parent().clone().removeClass(strRow).addClass(strNew).addClass("acs-clone"); //.appendTo(wesAWC.parent().parent());
wesNew.find(".awc-POLines,.awc-POLines1").removeAttr("disabled");
wesNew.find(".acs-input-field").val("");
wesNew.appendTo(wesAWC.parent().parent());
wesNew.children().first().focus();
}
}
}
That's javascript calling jQuery methods. Note the IF statement about
hasClass("acs-newrow") and then look in the attached image - and the HTML. See
acs-newrow down on the awc-POLine6 row? The trick to jQuery is that you put classes on things that you want to behave a certain way and then you can do really uber-cool stuff with those classes. Look back at the code above - see the line that starts with
wesNew = wesAWC.parent().clone()... That line and the next few lines are all that is needed to CLONE the row - add a class that labels the row (acs-rownumber3 for instance) - add a class that says it's a clone. Then it finds two elements in the clone - the clone isn't even in the DOM yet and jQuery can manage it - and it clears the values in those input elements. Then it appends it to the parent - and then it magically sets the focus to the first child element in the clone item it just dropped into the DOM.
Yes - you could do that with javascript alone. And you would have to worry about all the browser differences that can burn you. jQuery removes that nightmare.
Now - obvious problem is that when the user calls up a new PO - or starts a new entry - you somehow have to get the DOM back to a single row again.
Code:
function p_fillEditPanel(objPanel, strNewId, blnRefill, repeaterInfo, repeaterCur) {
var wesEP = $("#" + strNewId);
var wesPOClone = wesEP.find(".acs-clone"); //.remove();
if (wesPOClone.length != 0) {
wesPOClone.remove();
wesEP.find(".acs-panel-btn-split").show();
}
That's cool code! Since I labeled each row that was cloned with a class of
acs-clone I can remove all that HTML from the DOM instantly with just a couple of lines of code.
wesEP - wes means "wrapped element set" to me - jQuery always returns an array of elements that are to be worked on. So wesEP is a pointer to the EDIT PANEL I am working on in the DOM. wesPOClone is an array of elements that have the ACS-CLONE class set - easy to find with .FIND(). Then a single line of javascript code - wesPOClone.remove() - removes all that HTML. And of course I have to re-show the SPLIT button in case they used that and it was .HIDE hidden...
jQuery makes DOM manipulation really easy. If you want to make a perpetual page - that uses ajax - and modifies the DOM as data comes flying in - jQuery is the tool that makes it work for you.
