Modalpopup .hide and .show in page_load =?

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » Modalpopup .hide and .show in page_load =?

Shortcuts

Previous Next

Modalpopup .hide and .show in page_load =?

Last post 11-11-2009 6:09 AM by Sector0. 12 replies.

Sort Posts:

Modalpopup .hide and .show in page_load =?

11-10-2009, 7:15 AM

Contact

1 point Member
filix
Member since 06-08-2009, 6:00 PM
Posts 14

Hey

Im doing a gallery, and when its loading in images i wanted to do an overlay while the pictures was being loaded, but when i do ModalPopupExtender1.Show(); in the start and ModalPopupExtender1.hide(); in page_load it wont show. but if i remove .hide it shows but of course dosnt go away.

Im guessin its because that the events in the pageload is not being rendered until after the pageload.

So where can i call the .hide to get it to dissapear afterwards?

tryed googling it and browsin the forums but cannot find any on it ...

Re: Modalpopup .hide and .show in page_load =?

11-10-2009, 7:53 AM

Contact

24 point Member
Sector0
Member since 11-10-2009, 7:45 AM
Posts 8

The processing in page_load is happening on server side, so you wouldnt be able to hide and show the modalpop-up

on your client side, by having that code on server side.

There is a simple solution-

You need to have this is js-

Sys.WebForms.PageRequestManager.instance.add_beginRequest(beginRequestHandler);
Sys.WebForms.PageRequestManager.instance.add_endRequest(endRequestHandler);

function onBeginRequest(sender, args) {

$find("behaviourID").show();

}

function endRequestHandler(sender, args) {

$find("behaviourID").hide();

}

Hope this helps

Filed under: ModalPopup

Re: Modalpopup .hide and .show in page_load =?

11-10-2009, 8:18 AM

Contact

1 point Member
filix
Member since 06-08-2009, 6:00 PM
Posts 14

Im not that good in js .... ive goolged some of the stuff you wrote and found something but its still not workin

ive added this to the pages head :

  <script type="text/javascript" language="javascript">
         Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);
         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);

         function beginRequestHandler(sender, args) {

             $find("ModalPopupExtender1").Show();

         }

         function endRequestHandler(sender, args) {

             $find("ModalPopupExtender1").Hide();


         }

    </script>

its the right ID .. but its not workin ... maybe i didnt do it right :/

Re: Modalpopup .hide and .show in page_load =?

11-10-2009, 8:49 AM

Contact

24 point Member
Sector0
Member since 11-10-2009, 7:45 AM
Posts 8

What is the error that you get when you try through js?

I think show() and hide() should be lower case..

Re: Modalpopup .hide and .show in page_load =?

11-10-2009, 9:03 AM

Contact

1 point Member
filix
Member since 06-08-2009, 6:00 PM
Posts 14

im tryin to debug through IE .. and i says

Webpage error details


Message: 'Sys' is undefined
Line: 15
Char: 9
Code: 0
URI: http://localhost:61959/ImageGallery/gallery.aspx?path=\wallpapers


so im gussin i have to define Sys somehow ..

<script type="text/javascript">
        Shadowbox.init();

        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

        function BeginRequestHandler(sender, args) {

            $find("ModalPopupExtender1").show();
        }

        function EndRequestHandler(sender, args) {

            $find("ModalPopupExtender1").hide();
        }

    </script>

Re: Modalpopup .hide and .show in page_load =?

11-10-2009, 9:25 AM

Contact

Answer

24 point Member
Sector0
Member since 11-10-2009, 7:45 AM
Posts 8

'Sys' is defined in ASP.NET AJAX.

You have added a ScriptManager on the page right?

(You probably have, else you couldnt have used ModalPopUpExtender..)

Place the javascript in head.

Now encapsulate the first two lines like this-

function pageLoad(sender,args)

{

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

}

pageLoad is the client side function(asp.net ajax) which excetutes when the page has loaded.

You should be able to access SYS here.

:-)

Re: Modalpopup .hide and .show in page_load =?

11-10-2009, 9:34 AM

Contact

24 point Member
Sector0
Member since 11-10-2009, 7:45 AM
Posts 8

btw...You have everything within an updatepanel, right>?

Re: Modalpopup .hide and .show in page_load =?

11-10-2009, 9:59 AM

Contact

1 point Member
filix
Member since 06-08-2009, 6:00 PM
Posts 14

Arh okay :)

Jup i have a scriptmanager and its all runnin inside an updatepanel :)

Yea got it to work Semi .. but didnt do exactly what i wanted so i just threw out the hole modalpopup. Im trying to use a div instead .. but it seems like it cannot find it, hope you can help me again, since im not quite the JS champ :)

This is all that is running..

<head runat="server">
    <title></title>
    <link href="Css/styles.css" rel="stylesheet" type="text/css" />

    <script src="Engines/Shadowbox/shadowbox.js" type="text/javascript"></script>

    <link href="Engines/Shadowbox/shadowbox.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        Shadowbox.init();


        function BeginRequestHandler(sender, args) {

            // get the element name

            var _updateProgress = document.getElementById("Loader");
            // display ajax loading indicator

            _updateProgress.style.display = 'Block';

            //$find("ModalPopupExtender1").show();
        }

        function EndRequestHandler(sender, args) {

            var _updateProgress = document.getElementById("Loader");
            _updateProgress.style.display = "none";

            // $find("ModalPopupExtender1").hide();
        }

        function pageLoad(sender,args)
        {
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        }

    </script>

</head>
<body >
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="upImages" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <div>
                <asp:Label ID="lblImages" runat="server" Text=""></asp:Label>
            </div>
            <div class="modalPopup" id="Loader" style="display:none;">
                <p>
                    <img src="images/ajax-loader.gif" />Loading</p>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>

Re: Modalpopup .hide and .show in page_load =?

11-10-2009, 11:58 PM

Contact

24 point Member
Sector0
Member since 11-10-2009, 7:45 AM
Posts 8

If this is supposed to be for this page alone, I would suggest you to use update progress.

Google for 'Update progress with update panel', in case you need more info.

<asp:UpdateProgress DynamicLayout="false" ID="UpdateProgress2"
 runat="server">
    <ProgressTemplate>
        <div class="Progress">
            <img src="Images/ajax-loader.gif" />
            Loading ...
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

If you plan to make it global, proceed with the current script, place it in a seperate file.

Are you sure that the events are being fired?

I don't see a reason why it shouldn't get the div.

Please let me know, I could try running this code here.

You might also want to change this line here-

_updateProgress.style.display = 'Block';

_updateProgress.style.display = 'block';

Re: Modalpopup .hide and .show in page_load =?

11-11-2009, 4:19 AM

Contact

1 point Member
filix
Member since 06-08-2009, 6:00 PM
Posts 14

Well basicly it should work i guess ..

Just so you understand my lifespan of the program, its a web galleri that scans folders.

it is using the query string to keep the path. then it runs through all the code, where it gets folder images, generates some html etc. etc.

then in the end i just call my updatepanel .update.

But im gussin that its never really fires an async since its just "links" when you click a folder and it loads a new bunch of files.

.. Because then it fires an aynch call when it fills the label with some html.

think ill check if it actually does an async call.

Re: Modalpopup .hide and .show in page_load =?

11-11-2009, 5:25 AM

Contact

24 point Member
Sector0
Member since 11-10-2009, 7:45 AM
Posts 8

You have set update mode to conditional, and not specified any triggers.

You can set the trigger as the button (which will start this scan,etc operation)

Re: Modalpopup .hide and .show in page_load =?

11-11-2009, 5:39 AM

Contact

1 point Member
filix
Member since 06-08-2009, 6:00 PM
Posts 14

Jup, and my updatepanel its being triggered from codebehind .. but i just relealized that its not doing an async postback..

so im kinda slappin myself right now .. all that we have done would have worked easily .. just tried it in another app .. its beucase my pictures uses <a> (anchor) tags så its reloadin the page ... sry for wastin your time there .. guess that is what we call a mindfart

Re: Modalpopup .hide and .show in page_load =?

11-11-2009, 6:09 AM

Contact

24 point Member
Sector0
Member since 11-10-2009, 7:45 AM
Posts 8

All is well that ends well!

Page 1 of 1 (13 items)

RSS Available