CODEWITHSUNDEEP
jqueryasp.netwebformsmaster-pages
hamza437
hamza437

Reputation: 259

master page javascript load event

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

Upvotes: 1

Views: 1554

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

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>

Upvotes: 2

Related Questions