Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 336
  • 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
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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