jQuery代码未在SharePoint中的页面加载上运行

时间:2011-07-25 06:33:30

标签: jquery onload

我无法让我的jQuery代码在SharePoint中运行。实际上,它曾经不是一个问题。我的一些页面需要jQuery来呈现页面的元素,特别是在定位和可见性方面。当我在开发环境中创建页面时,一切都很好。我所做的是将jQuery代码放在隐藏的内容编辑器Web部件中。

<script lang="en" type="text/jscript">

  function toggleContent(content)
    {
      var i;
      var x = "";

      for(i=1; i<=13; i++)
        {
          x = "#C"+i;
          $(x).css("visibility","hidden");
        }
      $(content).css("visibility","visible");
    }

  function toggleGblContent()
    {
      var i;
      var x = "";

      for(i=1; i<=13; i++)
        {
          x = "#gblD"+i;
          $(x).css("visibility","hidden");
        }
    }    

  function toggleImgMenu(menu,bol) // menu represents the selected tab, bol determines whether the 5th menu 
    {                              // will be inactive (0) or active (1)
      var i;
      var x = "";

      for(i=1; i<=5; i++)
        {
          x = "#menu"+i;
          $(x).attr("class","activelayer");
        }
      $(menu).attr("class","selectedlayer");

      if (menu != "#menu5")
      {
        if (bol==0) // meaning outer tab is First Day or First Month
          {
            $("#menu5").attr("class","inactivelayer");
          }
        else
          {
            $("#menu5").attr("class","activelayer");
          }
      }
    } 

  function posGblContent(content,src)
    {
        //var pos = $(content).height() - 10;
        var pos = $(content).height();
/*
        if (content == "#C1")
          {
            //alert(pos);
            //I know this code is kind of stupid, but SP keeps changing the height of DIV C1 in display mode
            //screwing up the look in the process. Other similar DIVs work fine.
            if (pos == "247")
              {
                $("#globalContent").css({"position":"absolute","top":"233px", "left":"0px"});
              }
            else
              {
                $("#globalContent").css({"position":"absolute","top": pos + "px", "left":"0px"});
              }
            //alert($("#globalContent").css("top"));
          }
        else
          {
            $("#globalContent").css({"position":"absolute","top": pos + "px", "left":"0px"});
          }
*/           
        $("#globalContent").css({"position":"absolute","top": pos + "px", "left":"0px"});
        //alert(src);
        toggleGblContent();
        //$("#gblIfrContent").attr("src","/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/" + src + ".html");

        $(src).css("visibility","visible");
    }     

  function innerTabState(state)
    {
      switch(state)
        {
          case "day":
        // change state of inner tabs               
                toggleImgMenu("#menu1",0);          
        // change visibility of RADEditors
                toggleContent("#C1");                  
        // change state of outer tabs
                $("#day1").attr("class","current");
                $("#week1").attr("class","active");
                $("#month1").attr("class","active");
        // change texts of menus
                $("#tabitem1").html("Payroll, Benefits,<br>& Personal Information");
                $("#tabitem1").attr("class","leftmostvlin");
                $("#tabitem2").text("Business Overview");
                $("#tabitem2").attr("class","tablink"); 
                $("#tabitem3").text("Office Resources");
                $("#tabitem3").attr("class","tablink");
                $("#tabitem4").text("Online Assignments");
                $("#tabitem4").attr("class","tablink"); 
                $("#tabitem5").text("");    
        // change global content
                posGblContent("#C1","#gblD1");       

            $("#tabitem1").click(function()
              {
                toggleImgMenu("#menu1",0);
                toggleContent("#C1"); 
                posGblContent("#C1","#gblD1");                                      
              }); 

            $("#tabitem2").click(function()
              {
                toggleImgMenu("#menu2",0);
                toggleContent("#C2");
                posGblContent("#C2","#gblD2");                              
              });

            $("#tabitem3").click(function()
              {
                toggleImgMenu("#menu3",0);
                toggleContent("#C3");
                posGblContent("#C3","#gblD3");                                              
              });

            $("#tabitem4").click(function()
              {
                toggleImgMenu("#menu4",0);
                toggleContent("#C4"); 
                posGblContent("#C4","#gblD4");                                              
              });
            break;

          case "week":
        // change state of inner tabs               
            toggleImgMenu("#menu1",1);          
        // change visibility of RADEditors
            toggleContent("#C5");                        
        // change state of outer tabs          
            $("#day1").attr("class","active");
            $("#week1").attr("class","current");
            $("#month1").attr("class","active");            
        // change texts of menus
            $("#tabitem1").text("Introductions");
            $("#tabitem1").attr("class","leftmost");            
            $("#tabitem2").text("Position Information");
            $("#tabitem2").attr("class","tablink"); 
            $("#tabitem3").text("Personal Safety");
            $("#tabitem3").attr("class","tablink");
            $("#tabitem4").text("Additional Resources");    
            $("#tabitem4").attr("class","tablink");
            $("#tabitem5").text("E-Learning"); 
            $("#tabitem5").attr("class","tablink");  
       // change global content 
            posGblContent("#C5","#gblD5");      

            $("#tabitem1").click(function()
              {
                toggleImgMenu("#menu1",1);
                toggleContent("#C5"); 
                posGblContent("#C5","#gblD5");              
              });

            $("#tabitem2").click(function()
              {
                toggleImgMenu("#menu2",1);
                toggleContent("#C6");
                posGblContent("#C6","#gblD6");                
              });

            $("#tabitem3").click(function()
              {
                toggleImgMenu("#menu3",1);
                toggleContent("#C7"); 
                posGblContent("#C7","#gblD7");               
              });

            $("#tabitem4").click(function()
              {
                toggleImgMenu("#menu4",1);
                toggleContent("#C8"); 
                posGblContent("#C8","#gblD8");               
              });

            $("#tabitem5").click(function()
              {
                toggleImgMenu("#menu5",1);
                toggleContent("#C9"); 
                posGblContent("#C9","#gblD9");               
              });

            break;
          case "month":
        // change state of inner tabs               
            toggleImgMenu("#menu1",0);          
        // change visibility of RADEditors
            toggleContent("#C10");  
       // change state of outer tabs                     
            $("#day1").attr("class","active");
            $("#week1").attr("class","active");
            $("#month1").attr("class","current");
        // change texts of menus
            $("#tabitem1").text("Policies & Procedures");
            $("#tabitem1").attr("class","leftmost");
            $("#tabitem2").html("Travel &amp; Expense <br>Policies &amp; Procedures");  
            $("#tabitem2").attr("class","vlin");
            $("#tabitem3").text("Training & Development");
            $("#tabitem3").attr("class","tablink");
            $("#tabitem4").html("Employee<br>Communications");
            $("#tabitem4").attr("class","vlin");    
            $("#tabitem5").text("");
       // change global content
            posGblContent("#C10","#gblD10");

            $("#tabitem1").click(function()
              {
                toggleImgMenu("#menu1",0);
                toggleContent("#C10");
                posGblContent("#C10","#gblD10");                
              });

            $("#tabitem2").click(function()
              {
                toggleImgMenu("#menu2",0);
                toggleContent("#C11");
                posGblContent("#C11","#gblD11");                
              });

            $("#tabitem3").click(function()
              {
                toggleImgMenu("#menu3",0);
                toggleContent("#C12"); 
                posGblContent("#C12","#gblD12");               
              });

            $("#tabitem4").click(function()
              {
                toggleImgMenu("#menu4",0);
                toggleContent("#C13");  
                posGblContent("#C13","#gblD3");              
              });              

            break;            
        }
    }

    $(document).ready(function()
      {
        // change state of inner tabs               
                toggleImgMenu("#menu1",0);      
        // change visibility of RADEditors
                toggleContent("#C1");
        // change state of outer tabs
                $("#day1").attr("class","current");
                $("#week1").attr("class","active");
                $("#month1").attr("class","active");  
        // change texts of menus
                $("#tabitem1").html("Payroll, Benefits,<br>& Personal Information");
                $("#tabitem2").text("Business Overview");   
                $("#tabitem3").text("Office Resources");
                $("#tabitem4").text("Online Assignments");  
                $("#tabitem5").text("");
        //change positions of global content
                posGblContent("#C1","#gblD1");  
                //$("#globalContent").css({"position":"absolute","top": $("#C1").height() - 3 + "px", "left":"0px"});                        

            $("#tabitem1").click(function()
              {
                toggleImgMenu("#menu1",0);
                toggleContent("#C1"); 
                posGblContent("#C1","#gblD1");                                      
              }); 

            $("#tabitem2").click(function()
              {
                toggleImgMenu("#menu2",0);
                toggleContent("#C2");
                posGblContent("#C2","#gblD2");                                          
              });

            $("#tabitem3").click(function()
              {
                toggleImgMenu("#menu3",0);
                toggleContent("#C3");  
                posGblContent("#C3","#gblD3");                              
              });

            $("#tabitem4").click(function()
              {
                toggleImgMenu("#menu4",0);
                toggleContent("#C4"); 
                posGblContent("#C4","#gblD4");                              
              });           
      });

</script>

但是,当我在生产环境中复制它时,尽管代码和设置相同,但代码不会运行onload:(

以下是生产中的代码:

<script lang="en" type="text/jscript">

  function toggleContent(content)
    {
      var i;
      var x = "";

      for(i=1; i<=13; i++)
        {
          x = "#C"+i;
          $(x).css("visibility","hidden");
        }
      $(content).css("visibility","visible");
    }

  function toggleGblContent()
    {
      var i;
      var x = "";

      for(i=1; i<=13; i++)
        {
          x = "#gblD"+i;
          $(x).css("visibility","hidden");
        }
    }    

  function toggleImgMenu(menu,bol) // menu represents the selected tab, bol determines whether the 5th menu 
    {                              // will be inactive (0) or active (1)
      var i;
      var x = "";

      for(i=1; i<=5; i++)
        {
          x = "#menu"+i;
          $(x).attr("class","activelayer");
        }
      $(menu).attr("class","selectedlayer");

      if (menu != "#menu5")
      {
        if (bol==0) // meaning outer tab is First Day or First Month
          {
            $("#menu5").attr("class","inactivelayer");
          }
        else
          {
            $("#menu5").attr("class","activelayer");
          }
      }
    } 

  function posGblContent(content,src)
    {
        //var pos = $(content).height() - 10;
        var pos = $(content).height();
/*
        if (content == "#C1")
          {
            //alert(pos);
            //I know this code is kind of stupid, but SP keeps changing the height of DIV C1 in display mode
            //screwing up the look in the process. Other similar DIVs work fine.
            if (pos == "247")
              {
                $("#globalContent").css({"position":"absolute","top":"233px", "left":"0px"});
              }
            else
              {
                $("#globalContent").css({"position":"absolute","top": pos + "px", "left":"0px"});
              }
            //alert($("#globalContent").css("top"));
          }
        else
          {
            $("#globalContent").css({"position":"absolute","top": pos + "px", "left":"0px"});
          }
*/           
        $("#globalContent").css({"position":"absolute","top": pos + "px", "left":"0px"});
        //alert(src);
        toggleGblContent();
        //$("#gblIfrContent").attr("src","/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/" + src + ".html");

        $(src).css("visibility","visible");
    }     

  function innerTabState(state)
    {
      switch(state)
        {
          case "day":
        // change state of inner tabs               
                toggleImgMenu("#menu1",0);          
        // change visibility of RADEditors
                toggleContent("#C1");                  
        // change state of outer tabs
                $("#day1").attr("class","current");
                $("#week1").attr("class","active");
                $("#month1").attr("class","active");
        // change texts of menus
                $("#tabitem1").html("Payroll, Benefits,<br>& Personal Information");
                $("#tabitem1").attr("class","leftmostvlin");
                $("#tabitem2").text("Business Overview");
                $("#tabitem2").attr("class","tablink"); 
                $("#tabitem3").text("Office Resources");
                $("#tabitem3").attr("class","tablink");
                $("#tabitem4").text("Online Assignments");
                $("#tabitem4").attr("class","tablink"); 
                $("#tabitem5").text("");    
        // change global content
                posGblContent("#C1","#gblD1");       

            $("#tabitem1").click(function()
              {
                toggleImgMenu("#menu1",0);
                toggleContent("#C1"); 
                posGblContent("#C1","#gblD1");                                      
              }); 

            $("#tabitem2").click(function()
              {
                toggleImgMenu("#menu2",0);
                toggleContent("#C2");
                posGblContent("#C2","#gblD2");                              
              });

            $("#tabitem3").click(function()
              {
                toggleImgMenu("#menu3",0);
                toggleContent("#C3");
                posGblContent("#C3","#gblD3");                                              
              });

            $("#tabitem4").click(function()
              {
                toggleImgMenu("#menu4",0);
                toggleContent("#C4"); 
                posGblContent("#C4","#gblD4");                                              
              });
            break;

          case "week":
        // change state of inner tabs               
            toggleImgMenu("#menu1",1);          
        // change visibility of RADEditors
            toggleContent("#C5");                        
        // change state of outer tabs          
            $("#day1").attr("class","active");
            $("#week1").attr("class","current");
            $("#month1").attr("class","active");            
        // change texts of menus
            $("#tabitem1").text("Introductions");
            $("#tabitem1").attr("class","leftmost");            
            $("#tabitem2").text("Position Information");
            $("#tabitem2").attr("class","tablink"); 
            $("#tabitem3").text("Personal Safety");
            $("#tabitem3").attr("class","tablink");
            $("#tabitem4").text("Additional Resources");    
            $("#tabitem4").attr("class","tablink");
            $("#tabitem5").text("E-Learning"); 
            $("#tabitem5").attr("class","tablink");  
       // change global content 
            posGblContent("#C5","#gblD5");      

            $("#tabitem1").click(function()
              {
                toggleImgMenu("#menu1",1);
                toggleContent("#C5"); 
                posGblContent("#C5","#gblD5");              
              });

            $("#tabitem2").click(function()
              {
                toggleImgMenu("#menu2",1);
                toggleContent("#C6");
                posGblContent("#C6","#gblD6");                
              });

            $("#tabitem3").click(function()
              {
                toggleImgMenu("#menu3",1);
                toggleContent("#C7"); 
                posGblContent("#C7","#gblD7");               
              });

            $("#tabitem4").click(function()
              {
                toggleImgMenu("#menu4",1);
                toggleContent("#C8"); 
                posGblContent("#C8","#gblD8");               
              });

            $("#tabitem5").click(function()
              {
                toggleImgMenu("#menu5",1);
                toggleContent("#C9"); 
                posGblContent("#C9","#gblD9");               
              });

            break;
          case "month":
        // change state of inner tabs               
            toggleImgMenu("#menu1",0);          
        // change visibility of RADEditors
            toggleContent("#C10");  
       // change state of outer tabs                     
            $("#day1").attr("class","active");
            $("#week1").attr("class","active");
            $("#month1").attr("class","current");
        // change texts of menus
            $("#tabitem1").text("Policies & Procedures");
            $("#tabitem1").attr("class","leftmost");
            $("#tabitem2").html("Travel &amp; Expense <br>Policies &amp; Procedures");  
            $("#tabitem2").attr("class","vlin");
            $("#tabitem3").text("Training & Development");
            $("#tabitem3").attr("class","tablink");
            $("#tabitem4").html("Employee<br>Communications");
            $("#tabitem4").attr("class","vlin");    
            $("#tabitem5").text("");
       // change global content
            posGblContent("#C10","#gblD10");

            $("#tabitem1").click(function()
              {
                toggleImgMenu("#menu1",0);
                toggleContent("#C10");
                posGblContent("#C10","#gblD10");                
              });

            $("#tabitem2").click(function()
              {
                toggleImgMenu("#menu2",0);
                toggleContent("#C11");
                posGblContent("#C11","#gblD11");                
              });

            $("#tabitem3").click(function()
              {
                toggleImgMenu("#menu3",0);
                toggleContent("#C12"); 
                posGblContent("#C12","#gblD12");               
              });

            $("#tabitem4").click(function()
              {
                toggleImgMenu("#menu4",0);
                toggleContent("#C13");  
                posGblContent("#C13","#gblD3");              
              });              

            break;            
        }
    }

    $(document).ready(function()
      {
        alert("hello");
        // change state of inner tabs               
                toggleImgMenu("#menu1",0);      
        // change visibility of RADEditors
                toggleContent("#C1");
        // change state of outer tabs
                $("#day1").attr("class","current");
                $("#week1").attr("class","active");
                $("#month1").attr("class","active");  
        // change texts of menus
                $("#tabitem1").html("Payroll, Benefits,<br>& Personal Information");
                $("#tabitem2").text("Business Overview");   
                $("#tabitem3").text("Office Resources");
                $("#tabitem4").text("Online Assignments");  
                $("#tabitem5").text("");
        //change positions of global content
                posGblContent("#C1","#gblD1");  
                //$("#globalContent").css({"position":"absolute","top": $("#C1").height() - 3 + "px", "left":"0px"});                        

            $("#tabitem1").click(function()
              {
                toggleImgMenu("#menu1",0);
                toggleContent("#C1"); 
                posGblContent("#C1","#gblD1");                                      
              }); 

            $("#tabitem2").click(function()
              {
                toggleImgMenu("#menu2",0);
                toggleContent("#C2");
                posGblContent("#C2","#gblD2");                                          
              });

            $("#tabitem3").click(function()
              {
                toggleImgMenu("#menu3",0);
                toggleContent("#C3");  
                posGblContent("#C3","#gblD3");                              
              });

            $("#tabitem4").click(function()
              {
                toggleImgMenu("#menu4",0);
                toggleContent("#C4"); 
                posGblContent("#C4","#gblD4");                              
              });           
      });

</script>

我添加的唯一内容是警报(“你好”);检查代码是否正在呈现onload,而不是:(我在开发环境中的另一个页面中注意到了这个疾病。看起来我创建的新页面无法呈现jQuery页面onload:(

请帮助:(

1 个答案:

答案 0 :(得分:0)

可能的情况是您没有对生产中的jQuery库的有效引用。确保.js文件可用,并且您的页面包含某处的引用。该引用可以在母版页,页面布局或特定页面中,具体取决于您的需要。