I am using FireQuery in Firefox. Here is what I am trying to do:
- The text "Items Ordered" exists within a tag somewhere on the page.
- The table that "Items Ordered" text exists in is also nested deep within several other tables.
Given the above scenario, I want to grab the <table> tag closest to the aforementioned string, and append a div to it. My standard methodology to ensure I've grabbed the correct DOM element is to change the background color and give it a 1px border so that it pops out and is easily discernable on the page. However, with my code that failed. So, I'm trying to understand why it failed and how to fix it before proceeding to append the div.
Following is my code I used for testing:
[HTML -- Actual code, with substituted personal information & links]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- 2013.04.20 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('div').css({
'border':'solid green 2px'
})
var elems_arr = jQuery('table:contains(Items Ordered)')
console.info('elems_arr:');
console.log(elems_arr);
console.info("elems_arr.length = " + elems_arr.length);
target = elems_arr[elems_arr.length - 1]
console.warn("target:");
console.log(target);
var elementType = target.tagName.toLowerCase();
alert(elementType);
// try wrapping target element in a div with id
target.wrap("<div id='target_wrap' />");
});
</script>
<style type='text/css'>
table {
border: solid blue 1px;
min-height: 30px;
}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr bgcolor="#FFFFFF">
<td valign="top" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tbody>
<tr bgcolor="#FFFFFF">
<td>
<center>
<b class="sans">Shipping Soon</b>
</center>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" valign="top" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tbody>
<tr valign="top">
<td width="100%">
<table border="0" cellspacing="0" cellpadding="2" align="right">
<tbody>
<tr valign="top">
<td align="right"> </td>
</tr>
</tbody>
</table><input type="hidden" name="qmsjtomutmooy" value="1">
<table border="0" cellspacing="2" cellpadding="0" width="100%">
<tbody>
<tr valign="top">
<td valign="top"><b>Items Ordered</b></td>
<td align="right" valign="top"><b>Price</b></td>
</tr>
<tr>
<td colspan="1" valign="top">1 of: <i>SET OF 3 NAIL FILES AT INTRODUCTION PRICE!!! Premium Manicure Crystal Glass Nail Files Nail File By Cheeky. Menicure / Pedicure Set of 3 Crystal Nail</i><br>
<span class="tiny">Condition: New<br>
Sold by: Cheeky-Beauty (<a href="#">seller profile</a>)<br></span></td>
<td align="right" valign="top" colspan="2">$8.99<br></td>
</tr>
</tbody>
</table><br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" valign="top" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td>
<b>Shipping Address:</b><br>
<div class="displayAddressDiv">
<ul class="displayAddressUL">
<li class="displayAddressLI displayAddressFullName">MY NAME</li>
<li class="displayAddressLI displayAddressAddressLine1">123 Sesame St.</li>
<li class="displayAddressLI displayAddressCityStateOrRegionPostalCode">Beverly Hills, CA 90210</li>
<li class="displayAddressLI displayAddressCountryName">United States</li>
</ul>
</div><br>
<b>Shipping Speed:</b><br>
Two-Day Shipping<br>
</td>
<td align="right">
<table border="0" cellpadding="0" cellspacing="1">
<tbody>
<tr valign="top">
<td nowrap="nowrap" align="right">Item(s) Subtotal:</td>
<td nowrap="nowrap" align="right">$8.99</td>
</tr>
<tr valign="top">
<td nowrap="nowrap" align="right">Shipping & Handling:</td>
<td nowrap="nowrap" align="right">$0.00</td>
</tr>
<tr valign="top">
<td nowrap="nowrap" align="right"> </td>
<td nowrap="nowrap" align="right">-----</td>
</tr>
<tr valign="top">
<td nowrap="nowrap" align="right">Total before tax:</td>
<td nowrap="nowrap" align="right">$8.99</td>
</tr>
<tr valign="top">
<td nowrap="nowrap" align="right">Sales Tax:</td>
<td nowrap="nowrap" align="right">$0.00</td>
</tr>
<tr valign="top">
<td nowrap="nowrap" align="right"> </td>
<td nowrap="nowrap" align="right">-----</td>
</tr>
<tr valign="top">
<td nowrap="nowrap" align="right"><b>Total for This Shipment:</b></td>
<td nowrap="nowrap" align="right"><b>$8.99</b></td>
</tr>
<tr valign="top">
<td nowrap="nowrap" align="right"> </td>
<td nowrap="nowrap" align="right">-----</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Using
- Firefox 20
- Windows Vista Business 32-bit SP2
- Firebug
- Firequery
- Google CDN-hosted jQuery
What I've found and why it was insufficient
A) No conflict
Many posts on the "is not an error" function indicate that the poster is using "$" instead of "jQuery" and have to do with setting no conflict mode as in this post. I don't believe this has anything to do with my issue, though the message is similar, because how I'm implementing jQuery is from FireQuery's "jQueryify" function. Also, I'm already using "jQuery" instead of "$".
B) jQuery versions issues
I also started to suspect the issue may be related to jQuery versions. As of this writing, version 2.0.0 was just released 3 days ago (Apr 18, 2013), and version 1.9.0 is already known to be significantly different from previous versions (including deprecating several popular functions), such that any code using the previous jQuery versions may need to be reworked, either manually or using the Migrate tool.
Results
So, I tested my code with KOMODO IDE 6.1.3 to eliminate any issues with how FireQuery implements jQuerify. I used three popular versions of jQuery; here are the results of my cross-browser tests:
* Chrome 26.0.1410.64 m
- jQuery 1.5.1
Uncaught TypeError: Object #<HTMLTableElement> has no method 'wrap' codeTest_jQuery_2013.04.20_01.php:28
(anonymous function) codeTest_jQuery_2013.04.20_01.php:28
f.resolveWith jquery.min.js:16
d.extend.ready jquery.min.js:16
c.addEventListener.A jquery.min.js:16
- jQuery 1.7.1
Uncaught TypeError: Object #<HTMLTableElement> has no method 'wrap' codeTest_jQuery_2013.04.20_01.php:28
(anonymous function) codeTest_jQuery_2013.04.20_01.php:28
n jquery.min.js:2
o.fireWith jquery.min.js:2
e.extend.ready jquery.min.js:2
c.addEventListener.B jquery.min.js:2
- jQuery 1.9.1
Uncaught TypeError: Object #<HTMLTableElement> has no method 'wrap' codeTest_jQuery_2013.04.20_01.php:28
(anonymous function) codeTest_jQuery_2013.04.20_01.php:28
c jquery.min.js:3
p.fireWith jquery.min.js:3
b.extend.ready jquery.min.js:3
H jquery.min.js:3
* Firefox 20.0.1
- jQuery 1.5.1
TypeError: target.css is not a function
http://localhost/codeTest_jQuery_2013.04.20_01.php
Line 30
- jQuery 1.7.1
(same error)
- jQuery 1.9.1
(same error)
* Internet Explorer 8.06
- jQuery 1.5.1
Object doesn't support this property or method
codeTest_jQuery_2013.04.20_01.php, line 28 character 17
- jQuery 1.7.1
(same error)
- jQuery 1.9.1
(same error)
C) Wrap target element with div
In my code I threw in something to return the type of object. This is what I used:
// report element type
var elementType = target.tagName.toLowerCase();
alert(elementType); // table
It returns "table", so I know I DO indeed have an html element.
Then I figured maybe since the table element is anonymous (no id or name) that was what was causing the problem? To resolve that I tried to wrap the target tag in a div thusly:
// try wrapping target element in a div with id
target.wrap("<div id='target_wrap' />");
However, it only returned the same "not a function" error, but this time referencing the wrap() method. I verified that "wrap()" is INDEED a valid jQuery function.
D) Other thoughts
This post mentions that Chrome's version of the "Not a Function" error is the "Uncaught TypeError" error. It suggests multiple instances of jQuery on the same page as a possible cause. Again, this has to do with noConflict, and I'm not exactly certain if this applies to me or not, though I'm leaning towards 'not'.
The only other thing I could come up with is that maybe the issue has somehting to do with discrepancies and differentiation and differences between jQuery objects, DOM objects, and JavaScript objects?
During the process of starting to post this, I found this jQuery post which may be relevant, but I can't understand it. It seems to recommend implementation of some plugin or package -- how can I tell if this is just someone trying to promote their code, or if it is an actual, "best practice", accepted module?