views:

321

answers:

0

I have an Ajax problem.

There is an input field and I want to submit the changed value on the onblur() event. It all works fine except that there is an irritating flicker.

I type in the new value and click away. The old value then flashes back before the value changes to the new value...

This is how I am doing it. I attach an onblur function to the input element:

  onblurevent = function()
  {
    HN.Gui.HTML.post(bindingpage, bindingref, this.value);
  };
  HN.Util.addEvent(elem, "blur", onblurevent);

The event is bound with a util function:

HN.Util.addEvent = function(obj, type, fn)
{
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );};
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
};

And it triggers a jquery post when it fires:

HN.Gui.HTML.post = function(page, ref, value)
{
    var json = (value == "")
    ? {clear: "contents"}
    : {set: {formula: value}};

  var url = page + ref + "?attr";

  $.post(url, JSON.stringify(json));
};

It is all pretty straight forward.

FIXED

Turned out to be an artefact of our Ajax update cycle:

change in front end
POST to back end
COMET change notification to front-end from back-end
redraw the front-end

Problem was the notification was triggering twice - once before the 'new' value had come through and then when it did, which was causing the flicker...