Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Jquery click event not working...

Posted on 2011-03-20
13
Medium Priority
?
324 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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
ID: 35178395
do you have an internet link that i can see here?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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:Gurvinder Pal Singh
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…
Suggested Courses

596 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