Change and Keyup Event Handler in JQuery

Question

Hi,

I m using JQuery in my application .Also i am using Cakephp and Mysql. I m having a code like below in which instructions is a Textbox that when i type on it ,it will be shown in the Display panel ...

 $(".TextFieldSettings #instructions").keyup(function (){
   instr=$(".TextFieldSettings #instructions").val();

  $("#displayPanel .fieldInstructions"+counter).html(instr).show();
   });//Text field instructions keyup

This Code Works good.

Edit: If i change the value in the Textbox instructions ,the keyup value must be shown in the Display Panel .Mean while i need the final changed value in the instr to insert into the database. How can i do so.. Please suggest me..

Answer 1

You can delay your operation :

$(".TextFieldSettings #instructions").keyup(function (){
  setTimeout(function () {
    var instr=$(".TextFieldSettings #instructions").val();
    $("#displayPanel .fieldInstructions"+counter).html(instr).show();
  }, 1);
});//Text field instructions keyup

That way, when the function is executed, the input value has been updated with the keypress.

Answer 2

Depending on how much content your instructions is holding/how frequently keypressing, i think updating the database every keyup is a bit overkill. Maybe update the database every 5 seconds or something? with each keypress triggering/resetting a setTimeout function.

Also, you can replace your call to pull out the text value with just $(this);

$(".TextFieldSettings #instructions").keyup(function (){
    var instr = $(this).val();
    $("#displayPanel .fieldInstructions"+counter).html(instr).show();

    // Update database
    $.ajax({ 
              method: 'POST', 
              url: 'path/to/a/script_file/executing_the_sql.ext',
              data: { 'str': escape(instr.replace(/\n/g,'<br />')) },
              success: function(){},
              error: function(e){ alert(e.responseText); }
    });

});//Text field instructions keyup