Solved

Jquery click event not working...

Posted on 2011-03-20
13
269 Views
Last Modified: 2012-05-11
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
Comment
Question by:PagodNaUtak
  • 10
  • 3
13 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35178119
which part of the code is doing onclick? please tell the line number
0
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 35178387
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35178395
do you have an internet link that i can see here?
0
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 35178471
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
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 35178498
Sorry, If the above codes is the only thing that I can give you...
0
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 35178519
I there a chance someone cah help me with the code I am able to give?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 40

Expert Comment

by:gurvinder372
ID: 35178534
let me try.

Please tell me that 'onclick' event on which element is not working
0
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 35178585
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
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 35178595
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
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 35178600
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
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 35178631
Please, inform me of any updates;

also note that it is working in FF but not in IE any version
0
 
LVL 8

Accepted Solution

by:
PagodNaUtak earned 0 total points
ID: 35187107
Can't be done I think...
0
 
LVL 8

Author Closing Comment

by:PagodNaUtak
ID: 35221391
Can't be done
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now