I'm in the process of debugging my web application and have hit a wall. I'm experiencing a behavior in Google Chrome only and my javascript ineptitude is keeping me from the solution.
I have an ASP page with an <asp:Panel> control. Within the panel, I've setup a simple search textbox and am using an <asp:LinkButton> to launch the search. The user enters their search text and should be able to hit enter (for usability sake) and the search results will display. This works in IE, but not in FireFox. There is a documented fix which I've applied to my page and have successfully gotten FireFox to function. Golden.
Except, the fix doesn't work in Google Chrome! A bit fishy, I fire up Firebug to debug the code... oh wait... it's a Chrome only issue. OK, fine I can handle debugging javascript without Firebug (sob) - I fire up the Chrome debugger and step through the code. It turns out that the javascript fix, previously mentioned, is being dropped by Chrome.
The fix script runs on page load and modifies the click handler of the LinkButton:
var defaultButton = document.getElementById('<%= lnkSearch.ClientID %>');
if (defaultButton && typeof(defaultButton.click) == 'undefined') {
defaultButton.click = function() {
alert('function fired');
var result = true;
if (defaultButton.click) result = defaultButton.onclick();
if (typeof(result) == 'undefined' || result) {
eval(defaultButton.getAttribute('href'));
}
};
alert(typeof(defaultButton.click) != 'undefined');
}
And when running the page in the chrome debugger I step into function WebForm_FireDefaultButton() and get to the line:
if (defaultButton && typeof(defaultButton.click) != "undefined") { ... }
and for some reason defaultButton.click has become "undefined". I'm stumped... What am I missing?
Also, I'm not using jQuery and it isn't a viable solution.
The HTML produced:
<div id="abc_pnlSearchPanel" language="javascript" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'abc_lnkSearch')">
<div class="searchPanel">
<span class="searchText">
Type in stuff to search:
</span>
<span style="float: left;">
<input name="abc:txtSearch" type="text" id="abc_txtSearch" style="width:312px;" />
</span>
<a onclick="this.blur();" id="abc_lnkSearch" class="ButtonLayout" href="javascript:__doPostBack('abc$lnkSearch','')"><span>Search</span></a>
<div style="clear: both"></div>
</div>
</div>