I’m having trouble with getting my jQuery codes to run in SharePoint. Actually, it used to not be a problem. Some of my pages require jQuery to render elements of the page, particularly in positioning and visibility. when I created the page in the development environment, everything worked great. What I did was to place the jQuery codes in a hidden Content Editor Web Part.
<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 & Expense <br>Policies & 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>
However, when I replicated it in the production environment, the codes won’t run onload, despite having the same codes and settings 🙁
Here’s the code in production:
<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 & Expense <br>Policies & 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>
The only thing I added is the alert(“hello”); check just to see if the codes are being rendered onload, and it’s not 🙁 I noticed this malady in another page in the development environment as well. Its seems like the new pages I create can’t render jQuery pages onload 🙁
Please help 🙁
Odds are that you don’t have a valid reference to the jQuery library in production. Be sure that the .js file is available and that your page contains a reference somewhere. That reference could be in the master page, page layout, or the specific page, depending on your needs.