Solved

Jquery click event not working...

Posted on 2011-03-20
13
301 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

732 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