CODEWITHSUNDEEP
javascriptasp.netuser-controlsasp.net-ajax
tessa
tessa

Reputation: 45

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

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?

Upvotes: 3

Views: 2948

Answers (3)

IUnknown
IUnknown

Reputation: 22468

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 %>"]();

Upvotes: 3

Michael Christensen
Michael Christensen

Reputation: 1786

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.

Upvotes: 1

Lawrence Johnson
Lawrence Johnson

Reputation: 4043

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.

Upvotes: 0

Related Questions