help updating database using tablekit.js javascript inline table editor

Jnerocorp · March 27, 2010

Hello,

I am not sure how I would update a database to update the values to my database in this table I am using a javascript to run a page I am using tablekit a javascript table with an inline editor so you can edit without refreshing the page.

its available opensource here: http://millstream.com.au/upload/code/tablekit/

I have set it up here:

http://bypassmyproxy.com/1/forms/contactlist.php

Here is my code on the page:

<?php
include('config.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
	<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Form</title>	
</head>
<body>

<div id="content">
		<table class="sortable resizable editable">
			<thead>
				<tr>
				<th class="sortfirstdesc" id="id">ID</th>
				<th id="name-of-contact">Name of Contact</th>
				<th id="date-of-1st-contact">Date of 1st Contact</th>
				<th id="method-of-contact">Method of Contact</th>
				<th id="primary-email">Primary Email</th>
				<th id="secondary-email">Secondary Email</th>
				<th id="paypal-email">Paypal Email</th>
				<th id="contact-form">Contact Form</th>
				<th id="phone">Phone</th>
				<th id="skype">Skype</th>
				<th id="msn">MSN</th>
				<th id="yahoo">Yahoo</th>
				<th id="aol">AOL</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
				<td>ID</td>
				<td>Name of Contact</td>
				<td>Date of 1st Contact</td>
				<td>Method of Contact</td>
				<td>Primary Email</td>
				<td>Secondary Email</td>
				<td>Paypal Email</td>
				<td>Contact Form</td>
				<td>Phone</td>
				<td>Skype</td>
				<td>MSN</td>
				<td>Yahoo</td>
				<td>A</td>
				</tr>
			</tfoot>
			<tbody>

				<?php
				$result = mysql_query("SELECT * FROM contacts") 
or die(mysql_error());  

while($row = mysql_fetch_array( $result )) {
echo "<tr id='N938747839'> <td>"; 
echo $row['id'];
echo "</td><td>"; 
echo $row['nameofcontact'];
	echo "</td><td>"; 
echo $row['dateof1stcontact'];
	echo "</td><td>"; 
echo $row['methodofcontact'];
	echo "</td><td>"; 
echo $row['primaryemail'];
	echo "</td><td>"; 
echo $row['secondaryemail'];
	echo "</td><td>"; 
echo $row['paypalemail'];
	echo "</td><td>"; 
echo $row['contactform'];
	echo "</td><td>"; 
echo $row['phone'];
	echo "</td><td>"; 
echo $row['skype'];
	echo "</td><td>"; 
echo $row['msn'];
	echo "</td><td>"; 
echo $row['yahoo'];
	echo "</td><td>"; 
echo $row['aol'];
echo "</td></tr>"; 
} 
?>

			</tbody>
		</table>
</div>
	<script type="text/javascript" src="js//prototype.js"></script>
	<script type="text/javascript" src="js/fabtabulous.js"></script>
	<script type="text/javascript" src="js/tablekit.js"></script>
	<script type="text/javascript">
		TableKit.Sortable.addSortType(new TableKit.Sortable.Type('status', {
				pattern : /^[New|Assigned|In Progress|Closed]$/,
				normal : function(v) {
					var val = 4;
					switch(v) {
						case 'New':
							val = 0;
							break;
						case 'Assigned':
							val = 1;
							break;
						case 'In Progress':
							val = 2;
							break;
						case 'Closed':
							val = 3;
							break;
					}
					return val;
				}
			}
		));
		TableKit.options.editAjaxURI = 'process.php';
		TableKit.Editable.selectInput('nameofcontact', {}, [
					['1','1'],
					['2','2'],
					['3','3'],
					['4','4'],
					['5','5']																												
				]);
		TableKit.Editable.multiLineInput('title');
		var _tabs = new Fabtabs('tabs');
		$$('a.next-tab').each(function(a) {
			Event.observe(a, 'click', function(e){
				Event.stop(e);
				var t = $(this.href.match(/#(\w.+)/)[1]+'-tab');
				_tabs.show(t);
				_tabs.menu.without(t).each(_tabs.hide.bind(_tabs));
			}.bindAsEventListener(a));
		});
	</script>
	</body>
</html>

Then when you click on a cell it opens into a input box with a submit button when you click the button it it uses to javascript to run a .php page called process.php

the code I have for process.php right now is:

<?php
header('Content-Type: text/plain; charset=UTF-8');
echo $_POST['value'];

?>

so when you type in new data and click the submit button it updates it but when u refresh it it goes back to the original data.

I need it so on that process.php page it updates it in the database but i dont know how to make it update the correct row in the mysql database.

Is there anyone who understands how to do this?

-John

Sign In

help updating database using tablekit.js javascript inline table editor

Recommended Posts

Jnerocorp

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information