8 Replies - 952 Views - Last Post: 25 October 2015 - 06:55 PM

#1 dshrubb   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 25-October 15

html table inline edit with jquery - enter key not working

Posted 25 October 2015 - 04:43 PM

Hi, I have an html table that is drawing its values from a MySQL table, this is working well. I would like to click in a cell and edit the cell contents (also seems to be working), however it is not recognizing the ENTER key press.

HTML
<?php
//Start the session
session_start();

//Include our database connection
require 'includes/connect.php';

$stmt = $conn->prepare("SELECT * FROM `devices` ORDER BY INET_ATON(ipaddress) ");
$stmt->execute();

?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
		<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
		<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
			<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            	<script type="text/javascript" src="edit.js"></script>
</head>
<body>
<div id="container">
<table class="table">
<tr>
<th>IP Address</th>
<th>Device Name</th>
<th>Room Code</th>
<th>Room</th>
<th>First Seen</th>
<th>Last Seen</th>
<th>Link to Driver</th>
</tr>

<?php
	while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
	$id = $row['id'];
	$devicename = $row['device_name'];
	$roomcode = $row['room_code'];
	$room = $row['room'];
	$ipaddress = $row['ipaddress'];
	$serialnumber = $row['serialnumber'];
	$firstseen = $row['firstseen'];
	$lastseen = $row['lastseen'];
	$driverlink = $row['driver'];
?>
<tr id="<?php echo $id;?>">
<td><?php echo $ipaddress;?></td>
<td align="center" class="devicename:<?php echo $id;?>" contenteditable="true"><?php echo $devicename;?></td>
<td align="center" class="roomcode:<?php echo $id;?>" contenteditable="true"><?php echo $roomcode;?></td>
<td align="center" class="room:<?php echo $id;?>" contenteditable="true"><?php echo $room;?></td>
<td align="center" class="firstseen:<?php echo $id;?>" contenteditable="true"><?php echo $firstseen;?></td>
<td align="center" class="lastseen:<?php echo $id;?>" contenteditable="true"><?php echo $lastseen;?></td>
<td align="center" class="driver:<?php echo $id;?>" contenteditable="true"><a href = "<?php echo $driverlink;?>"><?php echo $devicename;?> driver</a></td>
</tr>

<?php }
?>

</table>
</div>
</body>
</html>



jquery

$(function() {

	//when a td element within tbody is clicked
	$('tbody').on('click','td',function() {
		//call displayform, passing td jQuery element
		displayForm( $(this) );
	});

});

function displayForm( cell ) {

	var column = cell.attr('class'),//class of td corresponds to database table column
		id = cell.closest('tr').attr('id'),//id of tr corresponds to database primary key
		cellWidth = cell.css('width'),//get width of cell for styling width of input field
		prevContent = cell.text(),//store previous value
		//form action prevents page refresh when enter pressed.  hidden fields pass primary key and column name
		form = '<form action="javascript: this.preventDefault"><input type="text" size="4" name="newValue" value="'+
			   prevContent+'" /><input type="hidden" name="id" value="'+id+'" />'+
			   '<input type="hidden" name="column" value="'+column+'" /></form>';

	//insert form into td and change focus to input field, set width
	cell.html(form).find('input[type=text]')
		.focus()
		.css('width',cellWidth);

	//disable listener on individual cell once clicked
	cell.on('click', function(){return false})

	//on keypress within td
	cell.on('keydown',function(e) {
		if (e.keyCode == 13) {//13 == enter
			changeField(cell, prevContent);//update field
		} else if (e.keyCode == 27) {//27 == escape
			cell.text(prevContent);//revert to original value
			cell.off('click'); //reactivate editing
		}
	});

}

function changeField( cell, prevContent ) {

	//remove keydown listener once action initiated
	cell.off('keydown');

	var url = 'ajax.php?edit&',//relative path to PHP processing script
		input = cell.find('form').serialize();//serialize form for passing via url
		
	//send ajax request
	$.getJSON(url+input, function(data) {//data argument is used to retrieve response from processing script

		//On success, update cell to new value
		if (data.success)
			cell.html(data.value);
		else {
			//On failure, revert to original value and alert
			alert("There was a problem updating the data.  Please try again.");
			cell.html(prevContent);
		}

	});

	//remove click handler to allow tbody handler to make field editable again
	cell.off('click');

}



This
//on keypress within td
	cell.on('keydown',function(e) {
		if (e.keyCode == 13) {//13 == enter
			changeField(cell, prevContent);//update field
		} else if (e.keyCode == 27) {//27 == escape
			cell.text(prevContent);//revert to original value
			cell.off('click'); //reactivate editing

is the bit that doesn't seem to work.

Any help would be appreciated

Regards

This post has been edited by JackOfAllTrades: 25 October 2015 - 04:52 PM
Reason for edit:: Fixed code tags


Is This A Good Question/Topic? 0
  • +

Replies To: html table inline edit with jquery - enter key not working

#2 andrewsw   User is offline

  • blow up my boots
  • member icon

Reputation: 6549
  • View blog
  • Posts: 26,553
  • Joined: 12-December 12

Re: html table inline edit with jquery - enter key not working

Posted 25 October 2015 - 04:55 PM

Quote

however it is not recognizing the ENTER key press.

What happens? Are there errors in your browser's console?

preventDefault is a method, it should be followed with parentheses to call the method preventDefault().



Note that td's don't have an align attribute (they haven't for ages), use CSS instead. Using javascript: is also obsolete.

I will also note that it is a poor, and old, practice to put JS code directly into an attribute.

How to use code tags:

Attached Image

This post has been edited by andrewsw: 25 October 2015 - 04:56 PM

Was This Post Helpful? 0
  • +
  • -

#3 dshrubb   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 25-October 15

Re: html table inline edit with jquery - enter key not working

Posted 25 October 2015 - 05:09 PM

No erros, I can click in the td and it becomes a form that I can type the new data in. However, on pressing enter nothing happens in both ie and firefox.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • blow up my boots
  • member icon

Reputation: 6549
  • View blog
  • Posts: 26,553
  • Joined: 12-December 12

Re: html table inline edit with jquery - enter key not working

Posted 25 October 2015 - 05:20 PM

Put a breakpoint in changeField() to see if it is called on pressing Enter, or use console.log or an alert.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw   User is offline

  • blow up my boots
  • member icon

Reputation: 6549
  • View blog
  • Posts: 26,553
  • Joined: 12-December 12

Re: html table inline edit with jquery - enter key not working

Posted 25 October 2015 - 05:34 PM

Did you put the parens after preventDefault?

But
<form action="javascript: this.preventDefault">

this isn't correct because preventDefault is a method of the event object.

You’re using jQuery, so
$("form").submit(function (e) {
      e.preventDefault(); // this will prevent from submitting the form.
      ...

This post has been edited by Dormilich: 26 October 2015 - 12:55 AM

Was This Post Helpful? 0
  • +
  • -

#6 dshrubb   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 25-October 15

Re: html table inline edit with jquery - enter key not working

Posted 25 October 2015 - 05:42 PM

I see in firebug that it is capturing the enter key but there is also an error that is stopping it working.
I have attached a grab of the console.

Thanks for your help

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#7 andrewsw   User is offline

  • blow up my boots
  • member icon

Reputation: 6549
  • View blog
  • Posts: 26,553
  • Joined: 12-December 12

Re: html table inline edit with jquery - enter key not working

Posted 25 October 2015 - 06:14 PM

"cell is not defined" because it has gone out of scope when the event code is executed. You can use $(this).

Actually, I'm not sure why it has dropped out of scope because the jQuery event code creates a closure(?).

This post has been edited by andrewsw: 25 October 2015 - 06:20 PM

Was This Post Helpful? 0
  • +
  • -

#8 dshrubb   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 25-October 15

Re: html table inline edit with jquery - enter key not working

Posted 25 October 2015 - 06:52 PM

Hey, thanks for your help. I need to learn a bit more, I don't really understand enough to follow your suggestions and I think I am probably wasting your time. If you have time could you suggest code to replace where my error is happening, otherwise I'll try again once I have done some more research.

Regards
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw   User is offline

  • blow up my boots
  • member icon

Reputation: 6549
  • View blog
  • Posts: 26,553
  • Joined: 12-December 12

Re: html table inline edit with jquery - enter key not working

Posted 25 October 2015 - 06:55 PM

You've already used $(this) elsewhere. Use it in place of cell in the keydown event.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1