[SOLVED] Mootools inline edit & php

[Kay1021]

i'm trying implement an inline edit feature into my website and it has to use Mootools. I found this one http://davidwalsh.name/editable-content-mootools-php-mysql

 

Below are the different parts from my code. It almost seems like it works but then it's not updating the content in the database. So when i refresh the page the content reverts to what it was before.

 

 

HTML:

<p class="editable textarea" title="Content Paragraph" rel="'.$cat_id.'" color="black">'.$comment.'</p>

 

JS:

//once the dom is ready
window.addEvent('domready', function() {
//find the editable areas
$$('.editable').each(function(el) {
	//add double-click and blur events
	el.addEvent('dblclick',function() {
		//store "before" message
		var before = el.get('html').trim();
		//erase current
		el.set('html','');
		//replace current text/content with input or textarea element
		if(el.hasClass('textarea'))
		{
			var input = new Element('textarea', { 'class':'box', 'text':before });
		}
		else
		{
			var input = new Element('input', { 'class':'box', 'value':before });
			//blur input when they press "Enter"
			input.addEvent('keydown', function(e) { if(e.key == 'enter') { this.fireEvent('blur'); } });
		}
		input.inject(el).select();
		//add blur event to input
		input.addEvent('blur', function() {
			//get value, place it in original element
			val = input.get('value').trim();
			el.set('text',val).addClass(val != '' ? '' : 'editable-empty');

			//save respective record
			var url = 'table.php?id=' + el.get('rel') + '&comment=' + el.get('text');
			var request = new Request({
				url:url,
				method:'POST',
				onRequest: function() {
					alert('making ajax call :: ' + url);
				}
			}).send();
		});
	});
});
});

 

PHP & MySQL

if(is_numeric($_POST['id']) && isset($_POST['comment']))
{
	$query = "UPDATE school1 SET comment = '".$_POST['comment']."' WHERE cat_id = ".$_POST['id'];
	$result = mysql_query($query,$db_link);

}

 

In the javascript it gives a little pop up that tells you what the url will be with the variables will equal....and everything seems good...but for some reason it's not updating to the database.

 

If anyone can see something i'm doing wrong...or another mootools inline edit i could use. please let me know

 

Thanks

[RichardRotterdam]

Maybe your table.php file doesn't save the data to your database

What happens if you do the following?

1. change $_POST to $_GET in your table.php

2. copy the url that's in the alert box

3. paste that in the url bar of you browser

 

Have you also tested your table.php separate ?

[Kay1021]

Thanks it was the GET.

 

I was following the example but when i changed all the POST to GET in the php section it immediately worked! Thanks

 

 

If you know anything about javascript....I wonder if you can help with one other portion. When you double click it lets you edit perfectly...but if you were to click again it puts <textarea></textarea> kinda stuff in it....is there any piece of good to prevent this.

 

Thanks

[RichardRotterdam]

You could use the mootools removeClass function to remove the class in the dbclick

//inside the dbclick event
el.removeClass('.editable');

 

Then you can re-add the class for the input element parent on the blur event using the mootools getParent function

//inside the onblur event
var inputParent=input.getParent();
inputParent.set('class','.editable');

 

haven't tested it but it might work