1 Attachment(s)
[RESOLVED] CLICK Event THIS not working consistently - javascript question - using jQuery...
Ok - this I believe is really a javascript question - although I am using jQuery in the code...
So - I've got an IMAGE - a STAR - that when you click it it runs an event called addstarClick() - see code in the images below.
If you click the star when nothing on the screen is selected - it runs the event and you see in the top of the attached image that this, objWebParam, wesSave and wesThis all look properly setup - and the code works from that point forward.
The bottom image shows the star getting clicked when the focus is in a TEXTBOX in that SLICKGRID row. When addstarClick() fires you see that those same this, objWebParam, wesSave and wesThis variables all look "unselected" and thus undefined since they are not pointing to the correct star! If I click the "value" of this it goes to a single line of html that appears disconnected from anything. When you click the this in the first example FIREBUG brings you to the HTML you would expect that STAR to be within!!
At any rate - difference is that when you click the star with the textbox hot it runs the unwind code in this TextCellEditor - probably the isValueChanged, applyValue, serializeValue and the destroy...
I know this is one heck of a complicated post - but any assist on how to even debug it further would be greatly appreciated!!!
Code:
TextCellEditor: function(args) {
var $input;
var defaultValue;
var scope = this;
this.init = function() {
$input = $("<INPUT type=text class='editor-text' />")
.appendTo(args.container)
.bind("keydown.nav", function(e) {
if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
e.stopImmediatePropagation();
}
})
.focus()
.select();
};
this.destroy = function() {
$input.remove();
};
this.focus = function() {
$input.focus();
};
this.getValue = function() {
return $input.val();
};
this.setValue = function(val) {
$input.val(val);
};
this.loadValue = function(item) {
defaultValue = item[args.column.field] || "";
$input.val(defaultValue);
$input[0].defaultValue = defaultValue;
$input.select();
};
this.serializeValue = function() {
return $input.val();
};
this.applyValue = function(item, state) {
item[args.column.field] = state;
};
this.isValueChanged = function() {
return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
};
this.validate = function() {
if (args.column.validator) {
var validationResults = args.column.validator($input.val());
if (!validationResults.valid)
return validationResults;
}
return {
valid: true,
msg: null
};
};
this.init();
},
Re: CLICK Event THIS not working consistently - javascript question - using jQuery...
Ok - this is resolved.
The SlickGrid - when it put the row back - appears to disconnect the star image from the DOM. The event still fires - as I've shown - but the image is not in the DOM anymore so I cannot poll it for what row and such it is related to.
I did discover that the SlickGrid creation code I was using had an onCellChange event - when that happens I "store" the row and other info in some variables attached to the WINDOW object (some globals as they would be called in other languages).
Code:
function makeGrid(objGrid, sender, objWebParam) {
.
.
.
wesPanel = $(strPanel);
.
.
.
g_objGrid[intGO].onCellChange = function(currentRow, currentCell, item) {
g_lastintGO = intGO;
g_lastintRow = currentRow;
g_lastwesPanel = wesPanel;
toggleButton(true, $("#" + strPanelHeading + " .acs-panel-btn-save"));
changeCell(currentRow, currentCell, item);
if (g_objGrid[intGO].formula) {
try {
g_objGrid[intGO].formula(currentRow, currentCell, item);
} catch (e) {
errorMessage("onCellChange>formula", e);
} finally {
}
this.updateRow(currentRow);
}
};
With that said - now if the STAR image is no longer attached to the DOM I know I can rely on those global variables to tell me which row was hot when the star was clicked. If the star is on a row that is not "in a change" moment then that star is attached to the dom and I can poll it for information. The only way the star can be detached is if the current row was "in a change" when the star was clicked...
Code:
function addstarClick(event) {
if (g_blnInSproc) {
alert("Processing - please wait!");
} else {
g_blnInSproc = true;
var wesThis = $(this);
var wesSave = wesThis.closest('.acs-panel-work').find('.acs-panel-btn-save');
var objWebParam = {};
var intGO = 0;
var intRow = 0;
if (wesSave.length == 0) {
wesSave = g_lastwesPanel.find('.acs-panel-btn-save');
objWebParam = g_lastwesPanel.closest('.acs-ddreflector').data('objWebParam');
intGO = g_lastintGO;
intRow = g_lastintRow;
} else {
objWebParam = wesThis.closest('.acs-ddreflector').data('objWebParam');
intGO = wesThis.closest('.acs-ddreflector').data('objWebParam').gridoffset;
intRow = parseInt(wesThis.closest(".slick-row").attr("row"), 10); // and what row I am on
}
p_saveClick(wesSave, { addstar: true, nomsg: true, intGO: intGO, intRow: intRow });
return false;