Jquery click event not working...
Javascript onclick event does not work in IE... but in other bowser it works like FF
The popup div does not close:
The script is below:
The popup div does not close:
The script is below:
ABC.Suggest = function() {
return {
//controls
_txtControl: null,
_suggestionDiv: "",
_instanceName: "",
//JSON mode variables
_templateDivId: "",
_JSONDataSourceFunction: "",
//Bound DOM elements prefixes
_rowIDPrefix: "rowMD",
_dataIDprefix: "dataMD",
//CSS properties
_expandCSSClass: "expand",
_collapseCSSClass: "collapse",
_highlightRowCSSClass: "highlight",
_dehighlightRowCSSClass: "dehighlight",
//event handlers
_onHighlightFunction: "",
_onDehighlightFunction: "",
//local tracking vars
_isClose: false,
_origVal: "",
_rowHighlighted: null,
_pos: 0,
_searchSuggestion: false,
_chosenRow: "",
_timeOut: null,
_totalRows: 0,
//defaults
_searchBoxText: "Enter Company Name",
InitForJSON: function(txtControlId, suggestionDivId, templateDivId, JSONDataSourceFunction, instanceName) {
this._txtControl = document.getElementById(txtControlId);
this._suggestionDiv = document.getElementById(suggestionDivId);
this._templateDivId = templateDivId;
this._JSONDataSourceFunction = JSONDataSourceFunction;
this._instanceName = instanceName;
//this._mode = "JSON";
this._txtControl.onfocus = function() { eval(instanceName + ".SearchBoxOnFocus(this);"); }
this._txtControl.onblur = function() { eval(instanceName + ".OnBlurSearchTextBox(this);"); }
this._txtControl.value = this._searchBoxText;
if (window.ActiveXObject) {
this._txtControl.onkeyup = function() { eval(instanceName + ".CloseSuggestOnKeyUp(this,event); " + instanceName + ".Detect(this,event);"); }
}
else if (document.implementation && document.implementation.createDocument) {
this._txtControl.onkeyup = function(event) { eval(instanceName + ".CloseSuggestOnKeyUp(this,event); " + instanceName + ".Detect(this,event);"); }
}
},
SearchBoxOnFocus: function(txtControl) {
if (this._searchSuggestion === false || this._txtControl.value === this._searchBoxText) {
txtControl.value = "";
}
},
Detect: function(txtControl, e) {
var KeyID = e.keyCode;
var backspaceKey = 8;
var enterKey = 13;
var escapeKey = 27;
var arrowUpKey = 38;
var rightKey = 39;
var arrowDownKey = 40;
var printScreenKey = 44;
var deleteKey = 46;
switch (KeyID) {
case printScreenKey:
break;
case enterKey:
this.Collapse(txtControl);
break;
case backspaceKey:
this._origVal = txtControl.value;
if (this._isClose === false) {
clearTimeout(this._timeOut);
this._timeOut = setTimeout(this._instanceName + ".Expand()", 200);
}
if (Ltrim(txtControl.value).length === 0) {
this._isClose = false;
}
pos = 0;
break;
case deleteKey:
this._origVal = txtControl.value;
if (this._isClose === false) {
clearTimeout(this._timeOut);
this._timeOut = setTimeout(this._instanceName + ".Expand()", 200);
}
if (Ltrim(txtControl.value).length === 0) {
this._isClose = false;
}
this._pos = 0;
break;
case escapeKey:
if (document.getElementById(this._rowIDPrefix + "1") !== null) {
this.Collapse(txtControl);
}
txtControl.value = this._origVal;
break;
case rightKey:
this._origVal = txtControl.value;
if (this._isClose === false) {
clearTimeout(this._timeOut);
this._timeOut = setTimeout(this._instanceName + ".Expand()", 200);
}
if (Ltrim(txtControl.value).length === 0) {
this._isClose = false;
}
pos = 0;
break;
case arrowDownKey:
this.OnDownKey(txtControl);
break;
case arrowUpKey:
this.OnUpKey(txtControl);
break;
default:
this._origVal = txtControl.value;
if (this._isClose === false) {
clearTimeout(this._timeOut);
this._timeOut = setTimeout(this._instanceName + ".Expand()", 250);
}
}
},
Expand: function() {
if (this._isClose === false) {
if ((this.Ltrim(this._txtControl.value).length) > 0) {
this._origVal = this.Ltrim(this._txtControl.value);
if (window.ActiveXObject) {
this._suggestionDiv.innerHTML = this.DisplayResult(this._origVal);
}
else if (document.implementation && document.implementation.createDocument) {
this._suggestionDiv.innerHTML = this.DisplayResult(this._origVal);
}
if (document.getElementById(this._rowIDPrefix + "1") === null) {
this.Collapse(this._txtControl);
}
else if (document.getElementById(this._rowIDPrefix + "1") !== null) {
this._suggestionDiv.className = this._expandCSSClass;
}
}
else {
this.Collapse(this._txtControl);
this._isClose = false;
}
}
},
Collapse: function(txtControl) {
this._suggestionDiv.className = this._collapseCSSClass;
this._suggestionDiv.innerHTML = "";
this._searchSuggestion = true;
txtControl.focus();
},
DisplayResult: function(input) {
input = input.replace(",", ",");
input = input.replace(";", ";");
var resultSuggestions = "";
var jSONData = eval(this._JSONDataSourceFunction + "('" + input + "')");
if (jSONData !== null) {
resultSuggestions = $("#" + this._templateDivId).bindTo(jSONData);
this._totalRows = jSONData.length;
}
this.Collapse(this._txtControl);
return (resultSuggestions);
},
OnUpKey: function(txtControl) {
if (document.getElementById(this._rowIDPrefix + "1") !== null) {
var row = document.getElementById(this._rowIDPrefix + this._pos);
if (this._pos === 0) {
//saves original value of search text field
this._origVal = txtControl.value;
this._pos = this._totalRows;
}
else {
this.Dehighlight(row);
this._pos--;
}
if (this._pos === 0) {
txtControl.value = this._origVal; //displays original value
this._chosenRow = "";
}
else {
var data = document.getElementById(this._dataIDprefix + this._pos);
row = document.getElementById(this._rowIDPrefix + this._pos);
this.Highlight(row);
if (window.ActiveXObject) {
txtControl.value = data.innerText; // IE
}
else if (document.implementation && document.implementation.createDocument) {
txtControl.value = data.textContent; //firefox
}
this._chosenRow = txtControl.value;
//alert("onkeyup" + this._chosenRow)
}
}
//alert("Onupkey txtControl.value" + txtControl.value)
},
OnDownKey: function(txtControl) {
if (document.getElementById(this._rowIDPrefix + "1") !== null) {
var row = document.getElementById(this._rowIDPrefix + this._pos);
if ((this._pos === 0) && (this._origVal.length !== 0)) {
this._origVal = txtControl.value;
}
else {
this.Dehighlight(row);
}
if (this._pos != (this._totalRows)) {
this._pos++;
}
else if (this._pos >= (this._totalRows)) {
this._pos = 0;
}
var data = document.getElementById(this._dataIDprefix + this._pos);
if (this._pos === 0) {
txtControl.value = this._origVal;
this._chosenRow = "";
}
else {
row = document.getElementById(this._rowIDPrefix + this._pos);
this.Highlight(row);
if (window.ActiveXObject) {
txtControl.value = data.innerText; // IE
}
else if (document.implementation && document.implementation.createDocument) {
txtControl.value = data.textContent; //firefox
}
this._chosenRow = txtControl.value;
//alert("onkeydown" + this._chosenRow)
}
}
//alert("Ondownkey txtControl.value" + txtControl.value)
},
OnBlurSearchTextBox: function(txtControl) {
var innerTextVar;
if (window.ActiveXObject) {
innerTextVar = this._suggestionDiv.InnerText;
}
else if (document.implementation && document.implementation.createDocument) {
innerTextVar = this._suggestionDiv.textContent;
}
if (innerTextVar === "") {
this.Collapse(txtControl);
}
if (this._suggestionDiv.innerHTML !== "") {
if (this._chosenRow === "") {
txtControl.value = this._origVal;
}
else {
txtControl.focus();
txtControl.value = this._chosenRow;
//alert("onblur" + this._chosenRow)
}
}
if (txtControl.value === "") {
txtControl.value = this._searchBoxText;
}
if (this._chosenRow != "") {
alert(this._chosenRow);
this._suggestionDiv.className = this._collapseCSSClass;
this._suggestionDiv.innerHTML = "";
this._searchSuggestion = true;
this._chosenRow = "";
this.Collapse(txtControl);
}
},
SuggestMouseOut: function() {
this._chosenRow = "";
},
SuggestMouseOver: function(row) {
this._rowHighlighted = document.getElementById(this._rowIDPrefix + this._pos);
if (this._rowHighlighted !== null) {
this.Dehighlight(this._rowHighlighted);
}
this.Highlight(row);
this._pos = row.id.replace(this._rowIDPrefix, "");
if (window.ActiveXObject) {
this._chosenRow = document.getElementById(this._dataIDprefix + this._pos).innerText;
//alert("SuggestMouseOver1" + this._chosenRow)
}
else if (document.implementation && document.implementation.createDocument) {
this._chosenRow = document.getElementById(this._dataIDprefix + this._pos).textContent;
//alert("SuggestMouseOver2" + this._chosenRow)
}
},
Highlight: function(row) {
if (row === null) {
return;
}
row.className = this._highlightRowCSSClass;
if (this._onHighlightFunction !== "") {
eval(this._onHighlightFunction + "(" + row + ")");
}
this._rowHighlighted = row;
},
Dehighlight: function(row) {
if (row === null) {
return;
}
row.className = this._dehighlightRowCSSClass;
if (this._onDehighlightFunction !== "") {
eval(this._onDehighlightFunction + "(" + row + ")");
}
this._rowHighlighted = null;
},
Ltrim: function(str) {
var chars = chars || "\\s";
return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
},
CloseSuggestOnKeyUp: function(txtControl, event) {
if (event.keyCode == 8 || event.keyCode == 46) {
if (Ltrim(txtControl.value).length === 0) {
this._isClose = false;
clearTimeout(this._timeOut);
this._timeOut = setTimeout(this._instanceName + ".Expand()", 250);
}
}
},
EnterKeyHandler: function(event, btn, txtControl) {
var isIE = window.navigator.appName.toLowerCase().indexOf("microsoft") > -1;
if (event.keyCode == 8 || event.keyCode == 46) {
if (Ltrim(document.getElementById(txtControl).value).length === 0) {
this._isClose = false;
clearTimeout(this._timeOut);
this._timeOut = setTimeout(this._instanceName + ".Expand()", 250);
}
}
if (event.keyCode == 13) {
var btnObj = document.getElementById(btn);
if (isIE === false) {
event.returnValue = false;
event.cancel = true;
window.releaseEvents(event.KEYPRESS);
if (btnObj !== null) {
btnObj.click();
}
}
else {
event.returnValue = false;
event.cancel = true;
if (btnObj !== null) {
btnObj.click();
}
}
}
return false;
}
};
};
Gurvinder Pal Singh
which part of the code is doing onclick? please tell the line number
ASKER
That is the problem, I admit that there is no such this as onClick event.
I will describe what this JS does... It is like the list in the dropdown, a lookup. When you type a letter in the textbox a dropdown will show containing all the data that starts with the typed letter.
The showing of the list works fine... the only problem is that when I select a value by clicking on the list the list does not collapse.
The JS works perfectly in FF and other browser but in IE it does not work...
Any ideas?
I will describe what this JS does... It is like the list in the dropdown, a lookup. When you type a letter in the textbox a dropdown will show containing all the data that starts with the typed letter.
The showing of the list works fine... the only problem is that when I select a value by clicking on the list the list does not collapse.
The JS works perfectly in FF and other browser but in IE it does not work...
Any ideas?
do you have an internet link that i can see here?
ASKER
I love to give you a link but the site is right protected and I am not allowed to do so...
This is the div that shows when you type on the dropdown:
This is the div that shows when you type on the dropdown:
<div style="display: none;">
<div id="CompanyFilterTemplate" style="overflow-x: hidden; overflow-y: auto; max-height: 200px; width: auto;">
<table class="tableSearchSuggest">
<tbody><tr>
<td>
<table id="searchSuggestMD" valign="top" border="0" cellpadding="0" cellspacing="0">
<!--data-->
<tbody><tr class="dehighlight" onmouseover="javascript:suggestObjMD.SuggestMouseOver(this)" onmouseout="javascript:suggestObjMD.SuggestMouseOut()" id="rowMD{key}">
<td id="dataMD{key}" nowrap="nowrap">{value}</td>
</tr>
<!--data-->
<tr class="dehighlight">
<td style="text-align: right; cursor: pointer;" onmouseover="chosenRow='CloseLink'" title="Close"><a>Close</a> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</div>ASKER
Sorry, If the above codes is the only thing that I can give you...
ASKER
I there a chance someone cah help me with the code I am able to give?
let me try.
Please tell me that 'onclick' event on which element is not working
Please tell me that 'onclick' event on which element is not working
ASKER
Working scenrio:
When you type a letter on the textbox, then click immediately on the list of lookups it works fine.
Not Working Scenario:
When you type a letter on the textbox, then scroll on the list of items in the lookup using the scrollbar the clicking an item in the list no longer working.
When you type a letter on the textbox, then click immediately on the list of lookups it works fine.
Not Working Scenario:
When you type a letter on the textbox, then scroll on the list of items in the lookup using the scrollbar the clicking an item in the list no longer working.
ASKER
This is the element:
<tbody><tr class="dehighlight" onmouseover="javascript:suggestObjMD.SuggestMouseOver(this)" onmouseout="javascript:suggestObjMD.SuggestMouseOut()" id="rowMD{key}">
<td id="dataMD{key}" nowrap="nowrap">{value}</td>
</tr>
<!--data-->
<tr class="dehighlight">
<td style="text-align: right; cursor: pointer;" onmouseover="chosenRow='CloseLink'" title="Close"><a>Close</a> </td>
</tr>ASKER
This is the element that is not working:
<tbody>
<tr class="dehighlight" onmouseover="javascript:suggestObjMD.SuggestMouseOver(this)" onmouseout="javascript:suggestObjMD.SuggestMouseOut()" id="rowMD{key}">
<td id="dataMD{key}" nowrap="nowrap">{value}</td>
</tr>
<tr class="dehighlight">
<td style="text-align: right; cursor: pointer;" onmouseover="chosenRow='CloseLink'" title="Close"><a>Close</a> </td>
</tr>ASKER
Please, inform me of any updates;
also note that it is working in FF but not in IE any version
also note that it is working in FF but not in IE any version
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Can't be done