Question

Im curious about what might be a larger question than I think.

I am using the following code to listen for ‘keyup’ on a group of text input fields. If the user stops typing for a given amount of time, I send the data to a controller using AJAX.

I decided to try my hand at OOP in javascript to accomplish this. This is because I want a new instance of the timer method for each input field. (To be absolutely clear, Im very new to OOP in javascript so this might be dreadful. Let me know.)

Here is the main class with its methods:

    function FieldListener(entity){
      t = this;

      t.typingTimer;                // Timer identifier
      t.doneTypingInterval = 1000;  // Time in ms. e.g.; 5000 = 5secs        
      t.entity = entity;

      entity.bind("keyup", function(){t.setTimer();});
    }

    FieldListener.prototype.setTimer = function(){
      t = this;

      // User is still typing, so clear the timer.
      clearTimeout(t.typingTimer);

      // Get the field name, e.g.; 'username'
      t.entityType = t.entity.attr("name");
      // If the value is empty, set it to a single space.
      if(!(t.val = t.entity.val())){
         t.val = ' ';
      }
      t.noticeSpan = t.entity.siblings("span");
      // Display 'waiting' notice to user.
      t.noticeSpan.html('...')

      t.typingTimer = setTimeout(function(){t.doneTyping();},t.doneTypingInterval);
    }

    FieldListener.prototype.doneTyping = function(){
       // Encode for passing to ajax route.
      t = this;

      valueType = encodeURIComponent(t.entityType);
      value = encodeURIComponent(t.val);

      $.ajax({
        url: '/check/'+valueType+'/'+value,
        type: 'GET',
        processData: false
      })
      .done(function(validationMessage){
        t.noticeSpan.html(validationMessage);
      })
      .fail(function(){
        t.noticeSpan.html("Something went wrong. Please try again.");
      });       
    }

So from here I’d like to be able to create an object of the FieldListener class for every input field.

I know I can do it easily if I have an id for each like so:

   var fieldListener = new FieldListener($("#someFieldID"));

But I’d like to iterate over every field with a given class name. Something close to this perhaps?:

   i = 0;
   $(".info-field").each(function(){
      i = new FieldListener($(this));
   });

But that doesn’t work (and doesn’t look very nice).

Any thoughts? (Im also curious about critiques/improvements to the class/methods code as well.)

edit: As per @ChrisHerring’s question: The issue is that it seems to create the object but only for the last element in the each() method. So the span associated with the last input field with the class ‘.info-field’ displays the validationMessage returned from AJAX regardless of which field I am typing in.

UPDATE:

It seems like something is wrong with the creation of new objects. For example, if, rather than iterating through the each() method, I simply follow one class initiation with another, like so:

   var fieldListener1 = new FieldListener($("#someFieldID"));
   var fieldListener2 = new FieldListener($("#someOtherFieldID"));

that fieldListener2 overwrites variables being saved when initiating fieldListener1. This means that when I type into the input field with id “#someFieldID”, it behaves as if I am typing into the input field with id “#someOtherFieldID”. Thoughts?

UPDATE #2 (solved for now):

It seems that I have solved the issue for now. I needed to add ‘var’ before ‘t = this;’ in the FieldListener class. Any comments/critiques are still welcome of course. 😉

Answer 1

The t variable is global. The function for the “keyup” event is evaluated dynamically which means it picks up the last value of t.

Change

  t = this;

to

  var t = this;