asked on

Jquery TableEditor not working

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

SleepinDevil

Are you getting any Javascript errors when you try to run that page?

LZ1

ASKER

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

ASKER

Bump

R-Byter

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

ASKER

Here you guys go. I hope this helps
zip.zip

LZ1

ASKER

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

R-Byter

includes folder so I can replicate Your situation? Its missing.

LZ1

ASKER

Sorry. I completely missed it. The includes are in the top level. You'll see all of the js file extensions.
zip.zip

ASKER CERTIFIED SOLUTION

R-Byter

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

LZ1

ASKER

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.

R-Byter

Looking forward to it. And yes, old version is causing too much mess.

LZ1

ASKER

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!

R-Byter

Good point, feel free to ask for help.