How to keep the height and width of a div inside AJAX UpdatePanel

Question

I'm using the library subgurim to work with google maps. How to keep the height and width of GMap1 inside AJAX UpdatePanel when partial PostBack occurs?

Default.aspx:

   <div id="mainContent" style="width: 100%; height: 90%;">           
    <div id="content" style="width: 75%; border-left-style: groove; border-width: 1px;
        overflow: auto; float: left;">            
        <asp:UpdatePanel ID="updtepnl_map" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Timer runat="server" ID="timer1" OnTick="upt_Tick" Enabled="False">
                </asp:Timer>
                <cc1:GMap ID="GMap1" runat="server" Key="AIzaSyDPnaewjFYzDu1acq_NorccJ_VNx_nOgio"
                    Height="100%" Width="100%" Version="3" Language="es" enableServerEvents="true" enableRotation="true"
                    OnClick="GMap1_Click" OnMapLoad="GMap1_MapLoad" OnMoveEnd="GMap1_MoveEnd" OnDragEnd="GMap1_DragEnd" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Bttn_Search" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="Bttn_startRefresh" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="timer1" EventName="Tick" />
                <asp:AsyncPostBackTrigger ControlID="Center_Map" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="CkBxList_ADFSA" />
                <asp:AsyncPostBackTrigger ControlID="CkBx_ADFSA" />
                <asp:AsyncPostBackTrigger ControlID="CkBx_FEMSA" />
                <asp:AsyncPostBackTrigger ControlID="CkBxList_FEMSA" />
                <asp:AsyncPostBackTrigger ControlID="ImgBttn_SearchByS" />
                <asp:AsyncPostBackTrigger ControlID="ImgBttn_SearchByIP" />
            </Triggers>
        </asp:UpdatePanel>                     
    </div>         
    <div id="menu" style="width: 25%; border-style:hidden; border-width: 1px; overflow: auto;">

    </div>
    <div id="footer">
        ADFSA © 2015
    </div>
</div>

This is my javascript code where you assign a width and height to GMap1 in window.onload and window.resize:

var w = window, d = document, e = d.documentElement,
    g = d.getElementsByTagName('body'),
    x = w.innerWidth || w.clientWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight || e.clientHeight || g.clientHeight;

window.onresize = function () {
    var obj3 = document.getElementById('divTop');
    var obj1 = document.getElementById('general'),
        footer = document.getElementById('footer'),
         gmap1 = document.getElementById('GMap1'),
         content= document.getElementById('content');

    y = w.innerHeight || e.clientHeight || g.clientHeight;

    window.content.style.height = y - (obj3.clientHeight + footer.clientHeight) + 'px';
    window.menu.style.height = y - (obj3.clientHeight + footer.clientHeight) + 'px';

    window.GMap1.style.height = content.clientHeight - 20 + 'px';
    window.GMap1.style.width = content.clientWidth - 20 + 'px';
    window.GMap1.style.margin = 10 + 'px';
}

window.onload = function () {
    var obj3 = document.getElementById('divTop');
    var obj1 = document.getElementById('general'),
        footer = document.getElementById('footer'),
         gmap1 = document.getElementById('GMap1'),
         content= document.getElementById('content');

    y = w.innerHeight || e.clientHeight || g.clientHeight;

    window.content.style.height = y - (obj3.clientHeight + footer.clientHeight) + 'px';
    window.menu.style.height = y - (obj3.clientHeight + footer.clientHeight) + 'px';

    window.GMap1.style.height = content.clientHeight - 20 + 'px';
    window.GMap1.style.width = content.clientWidth - 20 + 'px';
    window.GMap1.style.margin = 10 + 'px';
}

score 0 · Answer 1 · edited May 23 '17 at 10:33

There is an existing question here that talks about controls in UpdatePanels losing their subscribed JavaScript functions on Partial PostBacks. I strongly recommend reading through this to understand what is happening here, it's a great read with several different solutions!

The accepted answer from the above link shows you how to rebind events on a Partial Postback in jQuery, which in your case would allow you to set your control width and height again. I'm not sure if you are using jQuery though or just plain JavaScript, but it should at least provide some insight into your problem.

The easiest way to achieve what you are trying to do is start using jQuery if you aren't already. Then you can use the code below to bind your events initally, as well as re-bind them after a partial Postback:

$(document).ready(function() {
    // bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

Hope it helps!

my problem is, any control that causes a postback to GMap1, it loses the width and height allocated earlier in the onload or onresize functions. My question, how can I assign the width and height to GMap1 after a partial postback same? I am using javascript to assign the width and height to GMap1, as the code shown above and if the solution is jQuery so I will. — jupem3n, May 15 '15 at 18:25

How to keep the height and width of a div inside AJAX UpdatePanel

1 Answers1