Using Telligent.Glow to create popup containing the search control

Reply

Dave replied on Fri, Aug 31 2007 4:57 AM

rated by 0 users

You can see it in action here

<script type="text/javascript">
// <![CDATA[
var menu = document.getElementById('searchPanel';
if (menu)             
   menu.onmouseover = new Function('navigation_showPanel(ctl00_ctl00_bhcr_Navigation_SearchPanel, this);';                   
ctl00_ctl00_bhcr_Navigation_SearchPanel.OnPanelOutFunction = navigation_hidePopup; 
// ]]>
</script>

<script type="text/javascript">
// <![CDATA[
window.ctl00_ctl00_bhcr_Navigation_SearchPanel = new Telligent_PopupPanel('ctl00_ctl00_bhcr_Navigation_SearchPanel','CommonContextMenuGroup CommonContextPanel','updown',101,null,null,false,'    \r\n    <input type="text" style="border:1px solid #000;margin-bottom:2px;padding:2px" id="popupSearchQuery" />\r\n    <input type="button" style="border:1px solid #000" value="Go" onclick="window.location = \'/search/SearchResults.aspx?q=999999\'.replace(\'999999\', encodeURIComponent(document.getElementById(\'popupSearchQuery\'.value)); return false;" />\r\n    <input type="button" style="border:1px solid #000" value="Cancel" onclick="ctl00_ctl00_bhcr_Navigation_SearchPanel.Hide(); return false;" />\r\n';
// ]]>
</script> 

Reply

Ben Tiedt replied on Fri, Aug 31 2007 10:10 AM

rated by 0 users

Add OnMouseOutClientFunction="navigation_hidePopup" to the <TWC:PopupPanel /> control that contains the search form and remove the existing OnPanelOutFunction = navigation_hidePopup; line from your javascript.

The PopupPanel doesn't exist on the page when that script is executed (resulting in an error).  Specifying the function on the control will allow the control to assign the event handler itself when it initializes.

Reply

Dave replied on Sat, Sep 1 2007 5:41 PM

rated by 0 users

Ben Tiedt:

Add OnMouseOutClientFunction="navigation_hidePopup" to the <TWC:PopupPanel /> control that contains the search form and remove the existing OnPanelOutFunction = navigation_hidePopup; line from your javascript.

The PopupPanel doesn't exist on the page when that script is executed (resulting in an error).  Specifying the function on the control will allow the control to assign the event handler itself when it initializes.

Tried that an still no luck. 

Reply

Ben Tiedt replied on Tue, Sep 4 2007 11:00 AM

rated by 0 users

I'm sorry this is taking to long to figure out!  It turns out that the OnMouseOutClientFunction property isn't wired up property in the CS2007 version of Telligent.Glow (but is in CS2008).  Additionally, using this function results in greedy pop-up closing, so I've implemented logic similar to Telligent.Glow.PopupMenu's CloseOnMouseOut feature...

The following scripts implement support for opening (navigation_showPanel), closing (navigation_hidePopup) and automatically hiding the popup-panel...

 <script type="text/javascript">
// <![CDATA[
var navigation_panel = null;
var navigation_panelCloseTimeout = null;
function navigation_showPanel(panel, element) { if (panel && !panel.IsShown()) { navigation_hidePopup(); panel.ShowAtElement(element); navigation_panel = panel; navigation_panel.OnMouseOutFunction = navigation_hidePopupTimeout; navigation_panel.OnMouseOverFunction = navigation_hidePopupReset; navigation_panelCloseTimeout= null } }
function navigation_hidePopup() { if (navigation_panel) { navigation_panel.Hide(); navigation_panel = null; } }
function navigation_hidePopupTimeout() { if (navigation_panelCloseTimeout) { clearTimeout(navigation_panelCloseTimeout); } navigation_panelCloseTimeout = setTimeout(navigation_hidePopup, 249); }
function navigation_hidePopupReset() { if (navigation_panelCloseTimeout) { clearTimeout(navigation_panelCloseTimeout); } }
// ]]>
</script>

And the following is the required markup...

<a href="#" mce_href="#" onclick="navigation_showPanel(<%= CSControlUtility.Instance().FindControl(this, "SearchPanel" ).ClientID %>, this); return false;">Search</a>
<TWC:PopupPanel ID="SearchPanel" runat="server" HideOnDocumentClick="false" ZIndex="101" CssClass="CommonContextMenuGroup">
    <input type="text" id="popupSearchQuery" />
    <input type="button" value="Go" onclick="window.location = '<%= CommunityServer.Components.SiteUrls.Instance().SearchForText("q=999999" ) %>'.replace('999999', encodeURIComponent(document.getElementById('popupSearchQuery' ).value)); return false;" <input type="button" value="Cancel" onclick="<%# CommunityServer.Controls.CSControlUtility.Instance().FindControl(this, "SearchPanel" ).ClientID %>.Hide(); return false;" />
    <input type="button" value="Cancel" onclick="<%= CommunityServer.Controls.CSControlUtility.Instance().FindControl(this, "SearchPanel" ).ClientID %>.Hide(); return false;" />
</TWC:PopupPanel>

Using this script and markup in CS2007 will result in a link that, when clicked, opens a pop-up containing a simple search form.  If the mouse enters and then exists the pop-up, the pop-up will be automatically closed (similar to pop-up menus on cs.org).

Reply

Dave replied on Wed, Feb 27 2008 8:42 AM

rated by 0 users

Ben Tiedt:

Ben Tiedt:

Unfortunately, the PopupPanel renders its contents outside of the <form> tag (which we should probably change). 

I've logged this issue as #GLOW-2019.

Ben, was this fixed in CS2007.1?

Reply

Ben Tiedt replied on Wed, Feb 27 2008 8:53 AM

rated by 0 users

Dave:

Ben, was this fixed in CS2007.1?

This was a pretty significant change, so it was applied to CS2008 only.