Jump to content

MySQL table editable via Ajax


JasonO

Recommended Posts

Hi guys,

 

I have a table, where each row is loaded from the database. At the end of the row is the word Edit. When I click Edit I would like all the data in that row to change to text boxes, and the word Edit changing to Done and Cancel

 

I am currently using jQuery but am very new to it. How would I go about this? What do I need from where etc?

 

I have no idea if something out there like a plugin for jQuery exists or not. I tried searching and got something called jEditable but have no idea how to modify it for a table-based system.

 

Thanks for your help

 

Jason

Link to comment
Share on other sites

jEditable will be of no use to you, it allows editing of data when you click it, not en-masse.

 

You will need to write a custom function to do this. I am very proficient with jQuery and if you're really stuck on this then PM me and we can talk about a solution.

 

You will need to select all of the elements you have displayed, use jQuery to replace all of these elements with forms with the correct data and action etc... or alternatively you can replace everything with 1 big form, I think this would be the way to go, but would need to see your layout and data to confirm.

 

This is essentially what jEditable does but you'd be doing ti on a larger scale. The form action would then be a php script which would do the processing of the data.

 

Example:

 

<html>
<head></head>
<body>
<table>
	<tr><td id="uniqueRowId1" class="editable">Data 1</td></tr>
	<tr><td id="uniqueRowId2" class="editable">Data 2</td></tr>
</table>

<script type="text/javascript">
	jQuery('table').before('<form action="save.php" method="post">');
	jQuery('table').after('<input name="submit" type="submit" value="Save" /> </form>');

	jQuery('.editable').each(function(){
		var v = jQuery(this).html();
		var i = jQuery(this).attr('id');

		jQuery(this).replaceWith('<input type="text" name="'+i+'" value="'+v+'" />');
	});
</script>
</body>
</html>

 

example of save.php

 

<?php
if(isset($_POST['submit']){
	foreach($_POST as $key=>$val){
		if($key != 'submit'){
			$sql = 'UPDATE {TABLE} SET data = '.$val.' WHERE id = '.$key;
			mysql_query($sql);
		}
	}
}
?>

 

please keep in mind that the sql query is not optimised, it could all be done as 1 string rather than a foreach, and none of the values are escaped so somebody could easily SQL Inject this code.

 

Hope this helps though.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.