CODEWITHSUNDEEP
javascriptjquery
Dezigo
Dezigo

Reputation: 3256

jquery click (remember OLD VALUE)

While I click on select element, I need to remember old value of the selected element.
This code works in FF,CHROME and OPERA instead of IE.

  1. Remember the old value.
  2. Choose select option and replace old value remembered with a selected option!

Code:

   $(document).ready(function() {
        $('#viewTableOrders tr td > select').click(function() {
          oldCurrentPath = $(this).val();
          oldId = $(this).attr('title');
          oldCurrentDate = $('#viewTableOrders tr#vagon' + oldId + '> td >input.input_ver1').val();
          dataAjax = {};
       });


        /* event on change path  */
        $('#viewTableOrders tr td > select').change(function() {
            //do something... + old value
        });  
    });

Upvotes: 7

Views: 14020

Answers (3)

Matt
Matt

Reputation: 1358

The question is a little old, but I think we also need to look at the key up/down events, otherwise using the cursor to change the select values doesn't cause the old value to get updated. This worked for me, based on @Dr.Molle's code:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>Old value is:<span></span>
    <script>
    $(document).ready(
      function()
      {
        $('select').focus(function()
          {
            //store old value
            $(this).data('oldValue',$(this).val());
          });
        $('select').change(function()
            {
              //do something
              $('span').text($(this).data('oldValue'));
              //trigger focus to set new oldValue
              $(this).trigger('focus');
            });
        $('select').keydown(function()
            {
            //store old value
            $(this).data('oldValue',$(this).val());
            });
        $('select').keydown(function()
            {
              //do something
              $('span').text($(this).data('oldValue'));
              //trigger focus to set new oldValue
              $(this).trigger('focus');
            });

      }
    );
    </script>

Upvotes: 0

Dr.Molle
Dr.Molle

Reputation: 117334

It looks like the problem is that the 2nd click(choosing new option) will fire before the change-event.

Try using focus instead of click:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>Old value is:<span></span>
<script>
$(document).ready(
  function()
  {
    $('select').focus(function()
                      {
                          //store old value
                        $(this).data('oldValue',$(this).val());}
                      );
    $('select').change(function()
                       {
                          //do something
                        $('span').text($(this).data('oldValue'));
                          //trigger focus to set new oldValue
                        $(this).trigger('focus');
                       });

  }
);
</script>

(Example also uses data suggested by prodigitalson)

Upvotes: 11

prodigitalson
prodigitalson

Reputation: 60413

I would use the data infrastructure for this:

$('#viewTableOrders tr td > select').click(function() {
  var old = {};
  old.currentPath = $(this).val();
  old.id = $(this).attr('title');
  old.currentDate = $('#viewTableOrders tr#vagon' + old.id + '> td >input.input_ver1').val();
  old.ajaxData = {};
  $(this).data('oldData', old);

}).change(function() {
  var oldData = $(this).data('oldData');
  if(typeof old == 'object'){
    // do stuff with oldData
  }      
});

Upvotes: 6

Related Questions