ThinkGeo.com    |     Documentation    |     Premium Support

Popup Closed Event

#1

Hi,


In my web application, I display a map, and when the user clicks on a feature, I display a Cloud Popup with the HasCloseButton property set to true.


Is there anyway to catch the event of when the user closes the Cloud Popup in the map?


Thanks!


Treasa



#2

 Hi Treasa,


 
Thanks for your post, I hope the following code could be helpful:
 


        var Map;
        function OnMapCreated(map) {
            Map = map;
            if (map.popups.length > 0) {
                OpenLayers.Event.stopObservingElement(map.popups[0].closeDiv, "click", OpenLayers.Function.bindAsEventListener(function () { this.hide(); }, map.popups[0]));
                OpenLayers.Event.observe(map.popups[0].closeDiv, "click", OpenLayers.Function.bindAsEventListener(closeCallBack, map.popups[0]));
           }
        }
        function closeCallBack() {
            Map.popups[0].hide();
            alert("good");
        }



If you have any problem, please feel free to let us know.

Hope it helps.

Johnny
</script>


#3

Hi Johnny, 
  
 Yes this works great on the client-side. Is there any way to catch this event on the server side? I was hoping to update other sections of the website using my code-behind page to do the work, not javascript. 
  
 Thanks, 
 Treasa

#4

Hi Treasa,


Please try the following code below,


Server side,



using System.Web.UI;
namespace CSSamples.Samples.Features
{
    public partial class AreaOfAFeature : System.Web.UI.Page,ICallbackEventHandler
    {
        string returnvalue = "";
        public string GetCallbackResult()
        { return returnvalue; }
        public void RaiseCallbackEvent(string eventArgument)
        {returnvalue = "ServerSideAlter";}
    }
}


Client side,



(script type="text/javascript")
        var Map;
        function OnMapCreated(map) {
            Map = map;
            if (map.popups.length > 0) {
                OpenLayers.Event.stopObservingElement(map.popups[0].closeDiv, "click", OpenLayers.Function.bindAsEventListener(function () { this.hide(); }, map.popups[0]));
                OpenLayers.Event.observe(map.popups[0].closeDiv, "click", OpenLayers.Function.bindAsEventListener(closeCallBack, map.popups[0]));
            }
        }
        function closeCallBack() {
            Map.popups[0].hide();
            var param="closeBoxClosed";
            <%= ClientScript.GetCallbackEventReference(this, "param", "receiveServerData", null)%>;
        }
        function receiveServerData(columnValue){
            alert(columnValue);
        }
    (/script)


The (script) means the <script>

Regards,


Edgar


 



#5

Hi Edgar, 
  
 Thank you - this also works great. 
  
 However, is there any way to capture this event as an asp:AsyncPostBackTrigger for an update panel? Does this make sense? 
  
 Thank you for any insight you have. 
  
 Treasa

#6

Hi Treasa, 
  
 I am afraid not, after setting “popup.HasCloseButton = true;”, the server side just write a “hasclosebox=true” into json, then the client will parse “hasclosebox=true” then create a div as a closebox, but as far as I know the updatepanel does not support . 
  
 Hope it helps 
  
 Edgar 


#7

Hi Edgar, 
  
 Just FYI, and for anyone else who may need it…I came up with an alternate solution. Thank you very much for getting me started in the right direction. 
  
 I did not use Callbacks, I used a Partial Postback. 
  
 Javascript Code: 
  
var Map;
            function OnMapCreated(map) {
                Map = map;
                if (map.popups.length > 0) {
                    OpenLayers.Event.stopObservingElement(map.popups[0].closeDiv, “click”, OpenLayers.Function.bindAsEventListener(function () { this.hide(); }, map.popups[0]));
                    OpenLayers.Event.observe(map.popups[0].closeDiv, “click”, OpenLayers.Function.bindAsEventListener(closeCallBack, map.popups[0]));
                }
            }
            function closeCallBack() {                
                Map.popups[0].hide();
                __doPostBack(’<%=UpdatePanel1.ClientID %>’, “PopupClosed”);
            }
 
  
 Then in the ASPX code, I added the OnLoad event to UpdatePanel1: 
  
<asp:UpdatePanel ID=“UpdatePanel1” runat=“server” OnLoad=“UpdatePanel1_Load”> 
 
  
 Then in the code-behind, I implemented the UpdatePane1_Load function: 
  
protected void UpdatePanel1_Load(object sender, EventArgs e)
        {
            if (Request["__EVENTARGUMENT"] == “PopupClosed”)
            {
                GridView1.SelectedIndex = -1;
            }
        }


#8

Hi Treasa, 
  
 I am glad to hear that you found a solution, and thanks for your sharing, if you have any question, please feel free to let me know. 
  
 Thanks, 
  
 Johnny