master page javascript load event

Question

i add a new menu in my master page i should use a javascript function in master page to setup my menu ,the first time i load the page all work fine but when i click in my menuitem to redirect to another aspx page the setupmenu () function which is in the master didn't work this is my code

<%@ Master Language="VB" AutoEventWireup="false" CodeFile="MasterPage.master.vb"
    Inherits="MasterPage" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Qualipro Net</title>
    <script type="text/javascript">
    $( document ).ready(function() {
        function setupmenu() {
            $("#section-menu")
        .accordion({
            "header": "a.menuitem"
        })
        .bind("accordionchangestart", function (e, data) {
            data.newHeader.next().andSelf().addClass("current");
            data.oldHeader.next().andSelf().removeClass("current");
        })
        .find("a.menuitem:first").addClass("current")
        .next().addClass("current");

            $('#section-menu .submenu').css('height', 'auto');
        }
        });
        </script>
         <script  src="js/scripts.js" type="text/javascript"></script>
        <script  type="text/javascript" src="js/jqPlot/jquery.jqplot.min.js"></script>
        <script  type="text/javascript" src="js/jqPlot/plugins/jqplot.barRenderer.min.js"></script>
        <script  type="text/javascript" src="js/jqPlot/plugins/jqplot.pieRenderer.min.js"></script>
        <script  type="text/javascript" src="js/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
        <script  type="text/javascript" src="js/jqPlot/plugins/jqplot.highlighter.min.js"></script>
        <script  type="text/javascript" src="js/jqPlot/plugins/jqplot.pointLabels.min.js"></script>
        <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/jquery-ui/jquery.ui.core.min.js"></script>
        <script src="js/jquery-ui/jquery.ui.widget.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui/jquery.ui.accordion.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui/jquery.effects.core.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui/jquery.effects.slide.min.js" type="text/javascript"></script>
        <body id="Body1" dir="ltr" runat="server">
    <form id="form1" runat="server">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
           <asp:Panel ID="panelAModif" runat="server" align="left" CssClass="panelmod">
                    <div class="grid_2">
                        <div class="box sidemenu">
                            <div class="block" id="section-menu">
                                <ul class="section menu">
                                    <li><a class="menuitem">G.R.H</a>
                                        <ul class="submenu">
                                            <li><a >Employés</a> 
                                            </li>
                                            <li><a runat="server"  href="~/employe/RemplacerPersonne.aspx">Remplacer Personne</a> </li>
                                        </ul>
                                    </li>
                                    <li><a class="menuitem">Documentation</a>
                                        <ul class="submenu">
                                            <li><a>Documents internes</a> </li>
                                     </ul>
                                    </li>
                                    <li><a class="menuitem">Audits</a>
                                        <ul class="submenu">
                                            <li><a>Audits</a> </li>

                                        </ul>
                                    </li>
                                    <li><a class="menuitem">Actions</a>
                                        <ul class="submenu">
                                            <li><a>Actions</a> </li>
                                            <li><a>Demandes d'actions</a> </li>
                                            <li><a>Modèle d'actions</a> </li>

                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </asp:Panel>
      </asp:ContentPlaceHolder>
    </form>
    </body>

i didn't find a solution to call the javascript function from another content page. thanks in advance

Do you get a client side error?

mason
– mason

2015-04-13 16:10:57 +00:00
Commented Apr 13, 2015 at 16:10 — mason
– mason, Commented Apr 13, 2015 at 16:10

iCollect.it Ltd · Accepted Answer · 2015-04-13 16:31:13Z

2

First problem:

Your javascript/jQuery script has to occur after jQuery is included or it will not know what $ means.

e.g in this order:

<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        function setupmenu() {
            $("#section-menu")
        .accordion({
            "header": "a.menuitem"
        })
        .bind("accordionchangestart", function (e, data) {
            data.newHeader.next().andSelf().addClass("current");
            data.oldHeader.next().andSelf().removeClass("current");
        })
        .find("a.menuitem:first").addClass("current")
        .next().addClass("current");

            $('#section-menu .submenu').css('height', 'auto');
        }
   });
</script>

At the moment your jQuery code is the first thing, before even jQuery is included.

Second problem:

Your setupmenu function is declared in the scope of a DOM ready handler, so is not visible to anything outside of that anonymous function!

Put that code outside of any DOM ready handler as it is only called by things that have already waited for DOM ready. This will make it a global function:

<script type="text/javascript">
    function setupmenu() {
        $("#section-menu")
            .accordion({
            "header": "a.menuitem"
        })
            .bind("accordionchangestart", function (e, data) {
            data.newHeader.next().andSelf().addClass("current");
            data.oldHeader.next().andSelf().removeClass("current");
        })
            .find("a.menuitem:first").addClass("current")
            .next().addClass("current");

        $('#section-menu .submenu').css('height', 'auto');
    }
</script>

edited Apr 13, 2015 at 16:31

answered Apr 13, 2015 at 16:11

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

hamza437 Over a year ago

this is a problem i fix it but the big problem is :i look for a method to active the function setupmenu() when i go to another page

hamza437 Over a year ago

thank you @TrueBlueAussie but how i can call this function from another page

iCollect.it Ltd Over a year ago

@hamza437: Have you resolved this now? By making it global you can just call it from anywhere. Just make sure the calling code is in a DOM ready handler :)

hamza437 Over a year ago

the problem that it is in the master page i didn't find the way to call it in every load of page

Collectives™ on Stack Overflow

master page javascript load event

1 Answer 1

First problem:

Second problem:

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

First problem:

Second problem:

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related