how can i use javascript pageLoad() event with each user control at one aspx page?

Question

I've got one aspx page with multiple usercontrols. Page is like this,

<asp:Content ID="Content2" ContentPlaceHolderID="chpMainBody" runat="server">

            <en:ProfileInfo ID="ucProfileInfo" runat="server" />

            <br />
             <en:WorkingExperienceInfo ID="ucWorkingExperienceInfo" runat="server" />
            <br />
              <en:TechnicalInfo ID="ucTechnicalInfo" runat="server" />

   <br />
           <en:EducationInfo ID="ucEducationInfo" runat="server" />
</asp:Content>

I use this script in each user control for dropdownextender with treeview, this is for "ucEducationInfo" usercontrol

<script type="text/javascript">
    var DDE4;
    var DDE5;
    function pageLoad() {
        DDE4 = $find('<%= dde_CountryUniversity.ClientID %>');
        DDE5 = $find('<%= dde_UniversityMajors.ClientID %>');


        DDE4._dropWrapperHoverBehavior_onhover();
        DDE5._dropWrapperHoverBehavior_onhover();

        $get('<%= pnl_CountryUniversity.ClientID %>').style.width = $get('<%= txt_CountryUniversity.ClientID %>').clientWidth;
        $get('<%= pnl_UniversityMajors.ClientID %>').style.width = $get('<%= txt_UniversityMajors.ClientID %>').clientWidth;


        if (DDE4._dropDownControl) {
            $common.removeHandlers(DDE4._dropDownControl, DDE4._dropDownControl$delegates);
        }
        if (DDE5._dropDownControl) {
            $common.removeHandlers(DDE5._dropDownControl, DDE5._dropDownControl$delegates);
        }



        DDE4._dropDownControl$delegates = {
            click: Function.createDelegate(DDE4, ShowMe),
            contextmenu: Function.createDelegate(DDE4, DDE4._dropDownControl_oncontextmenu)
        }
        DDE5._dropDownControl$delegates = {
            click: Function.createDelegate(DDE5, ShowMe),
            contextmenu: Function.createDelegate(DDE5, DDE5._dropDownControl_oncontextmenu)
        }


        $addHandlers(DDE4._dropDownControl, DDE4._dropDownControl$delegates);
        $addHandlers(DDE5._dropDownControl, DDE5._dropDownControl$delegates);
    }

    function ShowMe() {
        DDE4._wasClicked = true;
        DDE5._wasClicked = true;
    }

but i noticed scipt works only "ucEducationInfo" usercontrol. i tried with changing usercontrol's line and i think it is because of the user control is at the end of the page. i m not good with javascript. what is wrong?

Yuriy Rozhovetskiy · Answer 1 · 2012-11-10T20:35:26.047

To iplement custom ajax control should be the best decision in my opinion. But as you not experienced in JavaScript it's quite complicated task for you. Try to replace pageLoad function in user controls with script below:

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {

    // code from pageLoad method here

    window.showControl = window.showControl || {};

    window.showControl["<%= this.ClientID %>"] = function () {
        DDE4._wasClicked = true;
        DDE5._wasClicked = true;
    };
});

And here is example of usage showControl function from a page for the ucEducationInfo control:

showControl["<%= ucEducationInfo.ClientID %>"]();

i tried this but maybe i can't implement with my code. it did not work. but thank you — tessa, Nov 10 '12 at 21:20

score 1 · Accepted Answer · answered Nov 10 '12 at 20:07

1

Since you tagged AJAX you can try the information here.

http://www.asp.net/ajax/documentation/live/overview/AJAXClientEvents.aspx

The problem with your code is when the user controls are rendered eqch one may overwrite the last load. You would need to add a handler as in the link above and possibly check so they dont get double added in an async postback, depending on where you use ajax.

answered Nov 10 '12 at 20:07

Michael Christensen

1,768
1
13
11

Ok i added script's top,and it has solved Sys.Application.add_load(myEducationFunction); Sys.Application.add_load(ShowMe); var DDE4; var DDE5; function myEducationFunction() ................ – tessa Nov 10 '12 at 21:14

score 0 · Answer 3 · answered Nov 10 '12 at 20:07

Isolate the function so the variables are localized and dont conflict. Try this:

<script type="text/javascript">
(function() {
    var DDE4;
    var DDE5;
    function pageLoad() {
        DDE4 = $find('<%= dde_CountryUniversity.ClientID %>');
        DDE5 = $find('<%= dde_UniversityMajors.ClientID %>');


        DDE4._dropWrapperHoverBehavior_onhover();
        DDE5._dropWrapperHoverBehavior_onhover();

        $get('<%= pnl_CountryUniversity.ClientID %>').style.width = $get('<%= txt_CountryUniversity.ClientID %>').clientWidth;
        $get('<%= pnl_UniversityMajors.ClientID %>').style.width = $get('<%= txt_UniversityMajors.ClientID %>').clientWidth;


        if (DDE4._dropDownControl) {
            $common.removeHandlers(DDE4._dropDownControl, DDE4._dropDownControl$delegates);
        }
        if (DDE5._dropDownControl) {
            $common.removeHandlers(DDE5._dropDownControl, DDE5._dropDownControl$delegates);
        }



        DDE4._dropDownControl$delegates = {
            click: Function.createDelegate(DDE4, ShowMe),
            contextmenu: Function.createDelegate(DDE4, DDE4._dropDownControl_oncontextmenu)
        }
        DDE5._dropDownControl$delegates = {
            click: Function.createDelegate(DDE5, ShowMe),
            contextmenu: Function.createDelegate(DDE5, DDE5._dropDownControl_oncontextmenu)
        }


        $addHandlers(DDE4._dropDownControl, DDE4._dropDownControl$delegates);
        $addHandlers(DDE5._dropDownControl, DDE5._dropDownControl$delegates);
    }

    function ShowMe() {
        DDE4._wasClicked = true;
        DDE5._wasClicked = true;
    }
})();
</script>

Also, if you do that you'll need to call page_Load from within that function block or adding a ready listener within it.

pageLoad is a special function called by asp.net AJAX. It would need to be in scope? — Michael Christensen, Nov 10 '12 at 20:09
Can you call it manually? Sorry I don't use AJAX.NET but assuming it just needs to be called on document.ready, you can either call it with jQuery or add the event using plain Javascript. But to answer your question specifically, in my answer, page_Load cannot be called outside of that function block. — Lawrence Johnson, Nov 10 '12 at 21:28

how can i use javascript pageLoad() event with each user control at one aspx page?

3 Answers3