• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 328
  • Last Modified:

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:

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(",", "&#44");
            input = input.replace(";", "&#59");

            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;
        }

    };
};

Open in new window

0
PagodNaUtak
Asked:
PagodNaUtak
  • 10
  • 3
1 Solution
 
Gurvinder Pal SinghCommented:
which part of the code is doing onclick? please tell the line number
0
 
PagodNaUtakAuthor Commented:
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?
0
 
Gurvinder Pal SinghCommented:
do you have an internet link that i can see here?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
PagodNaUtakAuthor Commented:
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:
<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>&nbsp;</td>
                                                </tr>
                                            </tbody></table>
                                        </td>
                                    </tr>
                                </tbody></table>
		                    </div>
		                </div>

Open in new window

0
 
PagodNaUtakAuthor Commented:
Sorry, If the above codes is the only thing that I can give you...
0
 
PagodNaUtakAuthor Commented:
I there a chance someone cah help me with the code I am able to give?
0
 
Gurvinder Pal SinghCommented:
let me try.

Please tell me that 'onclick' event on which element is not working
0
 
PagodNaUtakAuthor Commented:
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.
0
 
PagodNaUtakAuthor Commented:
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>&nbsp;</td> 
                                                </tr>

Open in new window

0
 
PagodNaUtakAuthor Commented:
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>&nbsp;</td>  
</tr>

Open in new window

0
 
PagodNaUtakAuthor Commented:
Please, inform me of any updates;

also note that it is working in FF but not in IE any version
0
 
PagodNaUtakAuthor Commented:
Can't be done I think...
0
 
PagodNaUtakAuthor Commented:
Can't be done
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 10
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now