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...