Okay, I’m stumped here. I have a control that is comprised of a table. I am allowing the user to click the hyperlink in the bottom row to go directly to the associated view.
On the other hand, the user can click anywhere else inside the table and a selection is made. This selection activates a tool bar that allows the user to perform some tasks on the selected item. If the user clicks the selected item again, I want to programatically click the hyperlink. But when I run the jQuery for programatically clicking a hyperlink, I keep getting the “Out of stack space” error. I’m fully aware that the click event is being called recursively but I have not idea of how to prevent it! Here’s my code…
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
.mouseOver, .mouseOut, .selected
{
width: 120px;
height: 120px;
text-align: center;
vertical-align: top;
display: inline-block;
margin: 5px;
cursor: pointer;
}
.mouseOver
{
border: solid thin #99defd;
background: #e9f8fe;
}
.mouseOut
{
border: solid thin White;
}
.selected
{
border: solid thin #e0a403;
background: #f8f4de;
}
</style>
<script>
(function($) {
$(document).ready(function() {
var $items = $('.mouseOut');
$items.mouseenter(function() {
if ($(this).attr('class') != 'selected')
$(this).attr('class', 'mouseOver');
});
$items.mouseleave(function() {
if ($(this).attr('class') != 'selected')
$(this).attr('class', 'mouseOut');
});
$items.click(function() {
if ($(this).attr('class') == 'selected') {
$(this).find('a').click();
}
else {
$('.selected').attr('class', 'mouseOut');
$(this).attr('class', 'selected');
}
});
});
})(jQuery);
</script>
</head>
<body runat="server">
<form id="form1" runat="server">
<table cellpadding="5" class="mouseOut">
<tr>
<td>
user module thumbnail...
</td>
</tr>
<tr>
<td>
<a id="A1" href="javascript:__doPostBack('ControlPanelHost1$cphCtrl0$lvCollectionView$ctrl0$lnkBtn','')">Users</a>
</td>
</tr>
</table>
<table cellpadding="5" class="mouseOut">
<tr>
<td>
stats module thumbnail...
</td>
</tr>
<tr>
<td>
<a id="A2" href="javascript:__doPostBack('ControlPanelHost1$cphCtrl0$lvCollectionView$ctrl1$lnkBtn','')">Stats</a>
</td>
</tr>
</table>
</form>
</body>
This stripped out version will demonstrate the issue fully. Thanks to anyone who can help!
For some strange reason this solution works.
Replace:
with:
The code that Frédéric Hamidi provided was great but the click() was never posting back to the server.