Tuesday, March 30, 2010

Mouse click not working in spry auto...

Hi,

?I had been using spry framework in two different pages in my web application. I have incoporated spry auto suggest in both the pages. I am facing the weird issue of mouse click not workin in one of the pages, where as choosing the suggested value using down arrow and hitting enter works perfectly fine. Only in one of the pages if i use mouse to select the value, it is not working. As far as i researched, the creation of auto suggest data widget, rendering auto suggest region everything is the same in both the pages. But i am not able to figure out why this issue is happening in one page alone. I have posted the code snippet here.

Javascript:

var agencyGroupsSuggest =

new Spry.Data.XMLDataSet(null,''list/groupDesc'');

var sprySearchSuggest =

new Spry.Widget.AutoSuggest(''groupSearchDiv'', ''groupSearchSuggestDiv'', ''agencyGroupsSuggest'', ''groupDesc'');

JSP:

%26lt;div id=''groupSearchDiv''%26gt;

?%26lt;input type='text' id=''groupLike'' onblur=''callSearch();'' name='groupLike' value=''%26lt;%=su.ifNull(groupLike, '''') %%26gt;'' size =''25''/%26gt;

?%26lt;div id=''groupSearchSuggestDiv'' spry:region=''agencyGroupsSuggest'' style=''width:175px''%26gt;

?%26lt;div spry:repeat=''agencyGroupsSuggestTemp'' spry:suggest=''{groupDesc}''%26gt;

?%26lt;div%26gt;{groupDesc}%26lt;/div%26gt;

?%26lt;/div%26gt;

?%26lt;/div%26gt;

%26lt;/div%26gt;

Can someone help me figure out the problem?

Mouse click not working in spry auto...

Do you have a online url where we can see complete code?

Mouse click not working in spry auto...

It is actually a secured web aplication. Will a html file containing this functionality help you in any way?

That could probably work, if you also supplied the code the make the page running. (scripts, css, data for autosuggest) Else it would hard for us to see your issue. If you don't feel happy with uploading it to the public, you can also email me: info@3rd-Eden.com

I have actually found out what the issue is. I have called a javascript method onblur of the text element which is present in the suggest region. This onblur method is interfering with the mouse click event of the auto complete suggestions shown. If i remove the onblur method, everything is working fine. I have simulated the issue in the html file present in the compressed folder attached herwith. In that i am actually throwing an alert on blur where as in real scenario i have some other functionalities to be handled on blur.

For clarity i will explain the real scenario as well. When the user selects a suggestion from the auto complete div, the value will be placed in the text box and on blur of the text box, the dataset will be filtered based on the value in the text box.?Few pointers on this issue:

  1. The on blur functionality does not interfere when we select a suggestion using down arrow in key board.
  2. If i use mouse click to select then i have to wait for few milliseconds extra with the mouse clicked on the value before releasing it, so that the selected value is available in the textbox. Within this few milliseconds, the onblur function gets executed and then self.nodeClick is executed thus placing the value in the textbox. But forcing the user to keep the mouse clicked on the value for sometime will not sound good.

Kindly advise as to how this issue could be handled.

Any updates on this?

The onblur is intervering because your are having it call a alert();, onblur comes before the onclick is called. And the alert is forcing you to click the alert...

So as long your don't put alerts on onblur it works just fine here.

No comments:

Post a Comment