Within my User Control, there is an UpdatePanel containing a Repeater with Linkbuttons nested inside:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="RelatedEntityControl.ascx.cs" Inherits="MyApp.Controls.Layout.RelatedURLControl" %>
<asp:UpdatePanel ID="RelatedObjectsPanel" runat="server">
<ContentTemplate>
<script type="text/javascript">
function openPopup(url, h, w, t, link) {
{
if (url != null && h != null && w != null && t != null && link != null) {
var btn = document.getElementById(link);
var top_distance = btn.getBoundingClientRect().top;
var left_distance = btn.getBoundingClientRect().left;
var myDialogX = left_distance - w/2;
var myDialogY = top_distance;
$('#PreviewWindow').html('<iframe style="border: 0px; " width="100%" height ="100%" src="' + url + '"> </iframe>');
$("#PreviewWindow").dialog({
title: t,
modal: false,
autoOpen: true,
height: h,
width: w,
closeOnEscape: true,
position: [myDialogX, myDialogY],
dialogClass: 'dialog_fixed,ui-widget-header',
open: function (event, ui) {
$(this).css('overflow', 'hidden'); //this line does the actual hiding of the vertical scrollbar
}
});
}
};
}
</script>
<script type="text/javascript">
$(function () {
var btn = $('.previewLink');
btn.hoverIntent(function (e) {
e.target.click();
}, function () { });
});
</script>
<asp:Panel ID="URLPanel" runat="server" Visible="false">
<asp:CollapsiblePanelExtender ID="URLsCollapsiblePanel" runat="server" CollapseControlID="URLsLabel" ExpandControlID="URLsLabel" TargetControlID="URLsPanel" TextLabelID="URLsLabel"
CollapsedText="[ + ] Related URLs" ExpandedText="[ - ] Related URLs" />
<asp:Label ID="URLsLabel" runat="server" CssClass="collapsiblePanelHeader" Text="" Width="90%"></asp:Label>
<asp:Panel ID="URLsPanel" runat="server" CssClass="collapsiblePanelContent" style="height: auto;">
<asp:Repeater ID="URLsLocalRepeater" runat="server" OnItemDataBound="LocalRepeater_ItemDataBound" ItemType="SSPS.Models.Relationships.RelatedURL">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink ID="HyperLink1" Text='<%# Item.Title %>' NavigateUrl='<%# Item.ActualLink %>' runat="server" Target="_blank" ToolTip='<%# Item.ToolTip %>'></asp:HyperLink> <asp:LinkButton ID="PreviewButton" runat="server" CausesValidation="false" Text="preview" OnClick="PreviewButton_Click" Font-Size="X-Small" CssClass="previewLink"></asp:LinkButton>
<div id="PreviewWindow"></div>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</asp:Panel>
</asp:Panel>
</ContentTemplate>
The hoverIntent function in Javascript activates when hovering over the LinkButtons. Once activated, it triggers a click event on the LinkButton which leads to server-side processing within PreviewButton_Click() method:
protected void PreviewButton_Click(object sender, EventArgs e)
{
//figure out the loc, url and so forth
string loc = ResolveUrl("~/PreviewWindow.aspx");
loc += "?url=" + url.ActualLink;
ScriptManager.RegisterStartupScript(this, this.GetType(), "dlg", "openPopup('" + loc + "', " + url.HintHeight + ", " + url.HintWidth + ", '" + url.Title + "', '" + previewButton.ClientID + "')", true);
return;
}
After successfully opening the jQuery dialog through hovering or clicking on a LinkButton, encountering issues arise upon closing the dialog. Subsequent attempts to hover over another LinkButton fail to trigger the PreviewButton_Click() method as expected. This problem seems to be related to a postback issue that interferes with the Javascript functionality.
In attempting to resolve this issue, removal of the hoverintent function revealed that manual clicking on the LinkButton consistently opens the dialog without failure. It suggests that the root cause may lie within the handling of the postback event impacting the script execution flow.
Further exploration into this scenario has led to observations suggesting that any postback actions within the UserControl disrupt the stability of the jQuery dialog appearance. Despite troubleshooting efforts, including examining the JavaScript code for errors using Chrome's inspect window, the underlying issue remains unresolved.
Your insights and suggestions would be greatly appreciated.
Update: Following recommendations from @mjw and @WebDev, additional peculiar behavior patterns have surfaced. Notably, performing any action within the UserControl resulting in a postback directly affects the functioning of the jQuery dialog mechanism. The continuous loss of hoverIntent activation during subsequent interactions emphasizes the complexity of resolving the postback-related impediments on the JavaScript interaction dynamics.