[jQuery] Error: 'nodeName is null or not an object' (What am I doing wrong?)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Courier New, Courier, monospace">Hi folks,
I'm creating several divs which represent "rows" of a "table". It's not
really a table though, it's table-like using divs and spans. It works
great. Just the way I want.
But...
I'm trying to make it so that when you click on one of the "rows" it
changes the background color. It already does this on mouseover and
mouseout, and that works great. When clicking the row highlights and
stays highlighted whether the user rolls over it or not. This works
great for all but the very last row. When I click on the last row
nothing happens. If I attempt to alert its "RowState" (On/Off i.e.
selected/not selected), I get the "nodeName is null or not an object"
error.
Basically, the user creates this "table" on the fly, by choosing dates
from a calendar (along with some other items on the screen) and
clicking "add". This information is written to a structure on my server
using ajax and the array indexes that were added to the structure get
returned. These index numbers get attached to each "row" so that I can
identify it later (like when the user wants to remove it).
The following are the two functions involved (the one that makes the
ajax call and makes the divs) and the other is the click handler. There
is a div (not shown) with an ID of "OrderList".
NOTE: The double pounds (##) are not a mistake. This is the way
ColdFusion escapes the pound sign. So that's not any part of it.
Can anybody tell me what the heck I'm doin' wrong here? :o/
Cheers,
Chris
PS. There is a side issue I'm having in that for the "rows" that will
highlight properly, it's a bit slow. probably a second to a
second-and-a-half before the background color changes. Is there a
better way I should be doing this? I'm trying to use classes instead of
changing the css directly (i.e. $("#ID").css("backgroundcolor", "red");
). Thanks again! Chris
------ snip ------
function AddToPending(){
var OTAIndex = 0;
var i, NumberOfRows, ThisRow, RowClass, ThisIndex;
var SelectedDates = "";
var OrdersToAdd = new Array;
// gather relevant data from the DOM
var CostCenterInfo = $("##CostCenterName_ID").val();
CostCenterInfo = CostCenterInfo.split("~");
//var CostCenterID = CostCenterInfo[0];
var CostCenterName = CostCenterInfo[1];
var ShiftData = $("##Shift_ID").val();
ShiftData = ShiftData.split("~");
var ShiftCode = ShiftData[0];
var ShiftID = ShiftData[1];
var ShiftName = ShiftData[2];
var Classification = $("##Classification_ID").val();
var Quantity = $("##Quantity_ID").val();
var SpecialInstructions = $("##SpecialInstructions_ID").val();
// this one gets the dateValue of each selected cell and adds
everything to the array of structs.
$("td[@status=on]").each(function() {
OrdersToAdd[OTAIndex] = new Object;
OrdersToAdd[OTAIndex].ShiftDate = this.dateValue;
OrdersToAdd[OTAIndex].CostCenterName = CostCenterName;
OrdersToAdd[OTAIndex].ShiftName = ShiftName;
OrdersToAdd[OTAIndex].ShiftID = ShiftID;
OrdersToAdd[OTAIndex].ShiftCode = ShiftCode;
OrdersToAdd[OTAIndex].Classification = Classification;
OrdersToAdd[OTAIndex].Quantity = Quantity;
OrdersToAdd[OTAIndex].SpecialInstructions = SpecialInstructions;
OTAIndex++;
});
if(!OTAIndex){alert("Please select at least one date from the
calendars on the left.");return;}
/*
<!---
<div class="OrderEntryListRow">
<span class="Date Cell">10/12/2005</span>
<span class="CostCenter Cell">ER</span>
<span class="ShiftName Cell">First Shift</span>
<span class="Classification Cell">RN</span>
</div>
--->
*/
OrdersToAddJSON = $.toJSON(OrdersToAdd);
$.ajax({
type: "POST",
url: "JSON_WriteOrderData.cfm",
datatype: "html",
data: "ClientNumber=#ThisClientNumber#&OrderStruct=" +
OrdersToAddJSON,
success: function(IndexList) {
NumberOfRows = CFJS.ListLen(IndexList);
for(i = 0; i < NumberOfRows; i++){
ThisIndex = CFJS.ListGetAt(IndexList, i + 1);
ThisTmpDate =
$.odbcDateTimeParse(OrdersToAdd[i].ShiftDate);
ThisMonth = ThisTmpDate.getMonth() + 1;
ThisDay = ThisTmpDate.getDate();
ThisYear = ThisTmpDate.getFullYear();
ThisDate = ThisMonth + "/" + ThisDay + "/" +
ThisYear;
RowClass = "OddRow";
if(i % 2){
RowClass = "EvenRow";
}
ThisRow = "";
ThisRow += "<div class=\"OrderEntryListRow " +
RowClass + "\" RowType=\"" + RowClass + "\" RowState=\"Off\"
ListRowIndex=\"" + ThisIndex + "\">\n";
ThisRow += "<span class=\"Date Cell\">" +
ThisDate + "</span> \n";
ThisRow += "<span class=\"CostCenter Cell\">"
+ CostCenterName + "</span> \n";
ThisRow += "<span class=\"ShiftName Cell\">"
+ ShiftName + "</span> \n";
ThisRow += "<span class=\"Classification
Cell\">" + Classification + "</span> \n";
ThisRow += "<span class=\"Quantity Cell\">" +
Quantity + "</span>\n";
ThisRow += "</div>";
$("##OrderList").append(ThisRow);
}
$(".OrderEntryListRow").mouseover(function(){
if($(this).attr("RowType") == "OddRow"){
$(this).removeClass("OddRow");
$(this).addClass("OddOver");
}
else{
$(this).removeClass("EvenRow");
$(this).addClass("EvenOver");
}
}).mouseout(function(){
if($(this).attr("RowType") == "OddRow"){
$(this).removeClass("OddOver");
$(this).addClass("OddRow");
}
else{
$(this).removeClass("EvenOver");
$(this).addClass("EvenRow");
}
}).click(function(){
//$(this).attr("RowType", "Selected")
OrderListClickEvents($(this).attr("RowState"),
$(this).attr("RowType"), $(this).attr("ListRowIndex"));
});
},
error: function(){
alert("Error: Please note the username and the time and
called the Nursefinders helpdesk for assistance.");
}
});
}
function OrderListClickEvents(RowState, RowType, ListRowIndex){
//alert(RowState + " " + RowType + " " + ListRowIndex);
obj = $("[@ListRowIndex=" + ListRowIndex + "]");
//dump(obj);
if(RowState == "Off"){ // Off = Not Selected
obj.attr("RowState", "On");
if(obj.RowType == "OddRow"){
obj.removeClass("OddRow");
}
else{
obj.removeClass("EvenRow");
}
obj.addClass("Selected");
alert(obj.attr("RowState"));
}
else{
obj.attr("RowState", "Off");
obj.removeClass("Selected");
if(RowType == "OddRow"){
obj.addClass("OddRow");
}
else{
obj.addClass("EvenRow");
}
}
}
------ snip ------
</font></font>
<pre class="moz-signature" cols="72">--
<a class="moz-txt-link-freetext" href="http://www.cjordan.info">http://www.cjordan.info</a></pre>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/