Jquery TableEditor not working

LZ1
LZ1 used Ask the Experts™
on
Hey Experts!!

I have a regular HTML document, which I will end up using a MySQL database with PHP.  But for now I need a proof of concept.  

I can get the TableSorter to work and the box slide to work, but not the TableEditor.  
Here is the original Plugin/Demo: http://dev.iceburg.net/jquery/tableEditor/demo.php 
Any ideas?  I'm still trying to learn Jquery and Java, so please be gentle.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HeartAED Intranet Home</title>
<style type="text/css">
@import url("css/reset.css");
@import url("css/main.css");
@import url("css/slidebox.css");
@import url("css/table.css");

</style>
<script type="text/javascript" src="includes/jquery.js" ></script>
<script type="text/javascript" src="includes/slidebox.js" ></script>
<script type="text/javascript" src="includes/jquery.tablesorter.js"></script>
<script type="text/javascript" src="includes/jquery.tableEditor.js"></script>
<script type="text/javascript" src="includes/common.js"></script>

</head>

<body>
<div id="wrapper"> 
  <div id="header"> 
  		<h1>HeartAED Intranet  3.0</h1>
	<div id="hdr-srch">  
    <form id="gen-search" class="niceform"> Search: <br /> 
    <input name="textinput" type="text" size="30" maxlength="255" id="textinput" />
    <input type="button"  value="Go" />
    <br />
    <input name="client" type="radio" value="client" /><label> Client</label>
    <input name="client" type="radio" value="client" /><label> Serial</label>
    <input name="client" type="radio" value="client" /> <label> Notes</label> 
    </form>   <!--gen-search end-->
    
      <form id="exp-search" class="niceform"> Expirations: <br /> 
    <input name="" type="text" size="8" maxlength="15" /> And   <input name="" type="text" size="8" maxlength="15" />
<input type="button"  value="Go" />
    <br />
    <input name="client" type="radio" value="client" />
    <label> Adult</label>
    <input name="client" type="radio" value="client" />
    <label> Battery</label>
    <input name="client" type="radio" value="client" /> <label> Ped</label> 
    </form><!--exp-search end-->
    
        <form id="cat-search" class="niceform">
           Category/Subgroup Search: <br /> 
<select name="client-list">
<option value="1">Business - AAA</option>
      <option value="639">Business - Acheson Colloids Company</option>     
    <option value="640">Business - American Axle - Detroit</option>
    <option value="641">Business - American Axle - Three River</option>
      <option value="693">Business - AZ Automotive</option>
      <option value="675">Business - Bank</option>
      <option value="672">Business - Bank of America</option>
      <option value="2">Business - Business</option>
      <option value="654">Business - CLOSED</option>
      <option value="3">Business - CMS</option>
      <option value="642">Business - Cone Drive</option>
      <option value="643">Business - Detroit Tigers</option>
      <option value="644">Business - Dow Chemical</option>
      <option value="659">Business - Easter Seals of Eastern Michigan</option>
      <option value="4">Business - Environmental Quality Co.</option>
      <option value="645">Business - Florida</option>
        <option value="646">Business - Golling</option>
      <option value="670">Business - Granger III and Associates, LLC</option>
</select>
    <input type="button"  value="Go" />
    <br />
        </form>   <!--cat-search end-->
    
        <form id="model-search" class="niceform">
           Model Search: <br /> 
<select name="client-list">
    <option value="47">cc</option>
      <option value="52">CS Cardio Vive DM </option>
      <option value="34">CS First Save 9200</option>
      <option value="35">Defibtech Lifeline</option>
      <option value="7">Demo AC CR PLUS</option>
      <option value="8">Demo LP500BI</option>
      <option value="1">FA CR Plus</option>
      <option value="2">FA CR Plus-2005</option>
      <option value="9">FR2</option>
      <option value="31">FR2+ W/ ECG</option>
      <option value="38">G3 PH 9200RD</option>
      <option value="32">G3 PH FA</option>
      <option value="10">G3 PH PLUS FA</option>
      <option value="11">G3 PH PLUS SA</option>
      <option value="48">G3 PH SA</option>
      <option value="33">Heartsine Samaritan Pad</option>
      <option value="12">HS FRx</option>
      <option value="13">HS OnSite</option>
      <option value="45">LP 1000</option>
      <option value="36">LP 20</option>
      <option value="37">LP 9P</option>
      <option value="14">LP CR PLUS</option>
      <option value="5">LP Exp</option>
      <option value="6">LP Exp-5005</option>
      <option value="15">LP500</option>
      <option value="16">LP500BI</option>
      <option value="17">LP500BI 2005</option>
      <option value="18">LP500BI Pink</option>
      <option value="19">LP500MO</option>
      <option value="20">LP9</option>
      <option value="21">LP9A</option>
      <option value="46">Philips Forerunner</option>
      <option value="51">Reviver</option>
      <option value="3">SA CR Plus</option>
      <option value="4">SA CR Plus-2005</option>
      <option value="49">Samaritan PAD</option>
      <option value="50">Welch Allyn AED 10</option>
      <option value="29">Zoll AED PLUS</option>
</select>
    <input type="button"  value="Go" />
    <br />
      </form>   <!--model-search end-->    
    

	</div><!--end hdr-srch-->
<br /> <br /> <br /> <div class="hdr-left">  
Welcome Lenny
</div><!--end hdr-left-->
  </div><!--end header-->		
        
        <div id="content">  
        <h2> Search Results </h2>
        <form><!-- note; the <form> is not necessary. it just populates <input type="text"> with correct values -->
<table width="963" border="0" cellpadding="0" cellspacing="0" id="editableTable">
	<thead>
		<tr>
			<th width="10%" name="ID">ID</th>
			<th width="22%" name="first">First Name</th>
			<th width="16%" name="last">Last Name</th>
			<th width="16%">Phone</th>
			<th width="16%" name="city">City</th>
			<th width="20%" name="email">Email</th>
		</tr>
		<tr>
			<td><key>233</key> <a href="#.php" class="tsEditLink">(edit)</a></td>
			<td><input type="text" name="XXXX" value="I'm a text input"/></td>
			<td>Not a form element</td>
			<td><input type="checkbox" checked name="check1"/></td>
			<td><input type="checkbox" name="check2"/></td>
			<td><select name="selection"><option>XXX</option><option SELECTED>YYY</option><option>ZZZ</option></select></td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><key>1</key> <a href="#" class="tsEditLink">(edit)</a></td>
			<td>Brice</td>
			<td>Burgess</td>
			<td>(800)768-5283</td>
			<td>Milwaukee</td>
			<td>b@b.com</td>
		</tr>
		<tr>
			<td><key>2</key> <a href="#" class="tsEditLink">(edit)</a></td>
			<td>Christian</td>
			<td>Bach</td>
			<td>(800)768-6288</td>
			<td>Chicago</td>
			<td>c@c.com</td>
		</tr>
		<tr>
			<td><key>3</key> <a href="#" class="tsEditLink">(edit)</a></td>
			<td>Abe</td>
			<td>Lincoln</td>
			<td>(800)223-2331</td>
			<td>Washington D.C.</td>
			<td>l@l.com</td>
		</tr>
		<tr>
			<td><key>8</key> <a href="#" class="tsEditLink">(edit)</a></td>
			<td>Sam Lightning</td>
			<td>Hopkings</td>
			<td>(800)728-1221</td>
			<td>Houston</td>
			<td>s@s.com</td>
		</tr>
		<tr>
			<td><key>15</key> <a href="#" class="tsEditLink">(edit)</a></td>
			<td>Rudyard</td>
			<td>Kipling</td>
			<td>(512)121-1280</td>
			<td>London</td>
			<td>r@r.com</td>
		</tr>
	</tbody>
</table>
</form>

  </div><!--end content-->


</div><!--end wrapper-->
<script type="text/javascript"> 
$(document).ready(function(){ 
         $("#hdr-srch").slideBox({width: "100%", height: "75px", position: "top"}); 
       	 $("#editableTable").tableSorter({
		sortColumn: 'First Name',			// Integer or String of the name of the column to sort by.  
		sortClassAsc: 'headerSortUp', 		// class name for ascending sorting action to header
		sortClassDesc: 'headerSortDown',	// class name for descending sorting action to header
		headerClass: 'header', 				// class name for headers (th's)
		disableHeader: ' ' 	// DISABLE Sorting on <th>ID</th>
	}).tableEditor({
		EDIT_HTML: 'EDIT2',
		SAVE_HTML: 'Save',
		FUNC_UPDATE: 'updateTable'
	});
});
    </script>
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Are you getting any Javascript errors when you try to run that page?
LZ1
Top Expert 2011

Author

Commented:
In IE I'm getting the error on line 357 of:
Webpage error details

Message: Object doesn't support this property or method
Line: 357
Char: 10
Code: 0
URI: file:///C:/heartaed/table-editor.html
 
Line 357 is below:

         $("#hdr-srch").slideBox({width: "100%", height: "75px", position: "top"}); 

Open in new window

LZ1
Top Expert 2011

Author

Commented:
Bump
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Top Expert 2010

Commented:
It would be really helpful If You could upload Your files packed as zip (styles, scripts, images) so we can have clear situation about plugins and their version. It could also save a lot of time.
LZ1
Top Expert 2011

Author

Commented:
Here you guys go.  I hope this helps
zip.zip
LZ1
Top Expert 2011

Author

Commented:
The page that I uploaded I have the slidebox and table sorter working, however I don't have the table editor working.
The error in IE is:
Message: 'constructor' is null or not an object
Line: 269
Char: 3
Code: 0
URI: file:///C:/heartaed/includes/jquery.js
 
Top Expert 2010

Commented:
includes folder so I can replicate Your situation? Its missing.
LZ1
Top Expert 2011

Author

Commented:
Sorry.  I completely missed it.  The includes are in the top level.  You'll see all of the js file extensions.
zip.zip
Top Expert 2010
Commented:
Well, not so good news for You.

1) Combination of two jquery plugins that You used is made for very old version of jquery 1.0.3. Current one is 1.4.1.
2) Slidebox works with new version.
3) Tableeditor plugin works only if You remove these:

<script type="text/javascript"> $(document).ready(function(){         $("#hdr-srch").slideBox({width: "100%", height: "75px", position: "top"}); });    </script>

$("#hdr-srch").slideBox({width: "100%", height: "75px", position: "top"});

Change jquery reference from:

<script type="text/javascript" src="includes/jquery.js" ></script>

to

<script type="text/javascript" src="includes/jquery.pack.js" ></script> (older version)

Which can be downloaded from:

http://dev.iceburg.net/jquery/tableEditor/jquery.pack.js

Then replace block in document ready part with:

$("#editableTable").tableSorter({        sortColumn: 'First Name',            // Integer or String of the name of the column to sort by.          sortClassAsc: 'headerSortUp',         // class name for ascending sorting action to header        sortClassDesc: 'headerSortDown',    // class name for descending sorting action to header        headerClass: 'header'                 // class name for headers (th's)    }).tableEditor({        EDIT_HTML: 'Edit Again',        SAVE_HTML: 'Save'    });});

disableheader is removed and also FUNC_UPDATE (its calling a javascript function that You commented).

Too much problems with this combination of plugins You picked.
Since slidebox is good for new version of jquery, I suggest You to change tableeditor and tablesorter plugin. Therefore I recommend You this one:

http://www.myphpetc.com/2009/01/in-this-tutorial-i-go-over-some-cool.html

And demo is here:

http://comp345.awardspace.com/sorter/sorter.php

If You need further help, feel free to ask.

Regards
Bosko
LZ1
Top Expert 2011

Author

Commented:
Thanks Bosko.  I will look into the newer Jquery plugin this evening when I get home.  I knew that it was using an older version but didn't think it would cause this much havoc.  
The new plugin looks great and as long as it ends up functioning with my program, I'm good.  
I will post back tonight with more results or points if I get it working.
Top Expert 2010

Commented:
Looking forward to it. And yes, old version is causing too much mess.
LZ1
Top Expert 2011

Author

Commented:
It looks like I need to setup my PHP/MySQL DB for it to work.  That's fine considering I'm going that route anyways.  
Thanks!
Top Expert 2010

Commented:
Good point, feel free to ask for help.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial