neliza neliza - 1 year ago 60
Ajax Question

Edit data after double click like in phpmyadmin

I have a table and that displays data from a database. I would like to have the users to click on the record that they want to edit and once they have double clicked on it, then have the system update in the database. Just like the tables in phpmyadmin.

How do i go about it?

Answer Source

Here is a sample code with the suggestions made by @rickdenhaan using jquery.

// On double click show the input box
$( "#text1" ).dblclick(function() {

  $( "#text1" ).hide();
  $( "#text1_input" ).val($( "#text1" ).html()); // Copies the text of the span to the input box.
  $( "#text1_input" ).show();
  $( "#text1_input" ).focus();
  
});

// What to do when user changes the text of the input
function textChanged(){

  $( "#text1_input" ).hide();
  $( "#text1" ).html($( "#text1_input" ).val()); // Copies the text of the input box to the span.
  $( "#text1" ).show();
      
  // Here update the database
      
}

// On blur and on enter pressed, call the textChanged function
$( "#text1_input" ).blur(textChanged);
$( "#text1_input" ).keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    textChanged();
    return false;  
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="text1">Double click me to change me</span>
<Input id="text1_input" style="display:none"/>

For updating the database using javascript see posts like this in Stack Overflow.

In the code above, there is a span with the plain text and a input box for the user to change the text.

The input box is invisible at the beggining (style="display:none"). When the user double clicks the span ($( "#text1" ).dblclick(function() {...});) then the span disappears ($( "#text1" ).hide();) and the input box appears ($( "#text1_input" ).show();) with the content of the span bying copied to the input box for the user to be able to change it.

When the user presses the enter ($( "#text1_input" ).keypress(function (e) {...});) or clicks somewhere outside the input box ($( "#text1_input" ).blur(textChanged);) then the input box dissapears and the span reappears but now having the edited text of the input box.

I hope this was helpful. If you wanted somthing more or something else please let me know.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download