Link to home
Start Free TrialLog in
Avatar of Angel02
Angel02

asked on

Unable to load jquery in Sharepoint 2010

I have written a jquery script and I need to load it in my Sharepoint website. For testing I included an alert() in the .js file. When I load the SharePoint page, it is not accessing the jquery. this is what I have done:

(1) Downloaded jquery-1.6.1.min.js and jquery-1.6.1.js and copied them into /SiteAssets/jquery folder.
(2) Created a file jsbranding.js in the same folder /SiteAssets/jquery. It looks like:

jQuery(document).ready(function ()
{
alert("Reached");
// on resize
 jQuery(window).resize(function (e) {
fixLeftPanelHeight();
});
// on load
 fixLeftPanelHeight();
});
function fixLeftPanelHeight() {
 var windowHeight = jQuery(window).height();
 var leftPanel = jQuery("#s4-leftpanel-content");
 if (windowHeight  >= leftPanel.height()) {
      leftPanel.height(windowHeight);
 }
 else {
      // reset height – important on resizing  
      leftPanel.css("height",'auto');

 }
}

(3) I included the script tag in masterpage

<SharePoint:ScriptLink language="javascript" name="core.js" runat="server"/>
      <SharePoint:ScriptLink language="javascript" name="/SiteAssets/jQuery/jquery-1.6.1.js" runat="server"/>


Now, when I load my home page, it does not show the Alert meaning the jquery is not being loaded. What wrong am I doing?

Is it important to copy the jquery int the /_layouts folder? Please advise.
Avatar of svetaye
svetaye
Flag of Israel image

Hello,
Just write
<script type="text/javascript" src="/SiteAssets/jQuery/jquery-1.6.1.js"></script>

Open in new window

instead of using SharePoint:ScriptLink
Avatar of Angel02
Angel02

ASKER

I tried that. Added the <script> tag inside the <head> like below

<script type="text/javascript" src="../../SiteAssets/jQuery/jquery-1.6.1.js"></script>
<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server"/>

It still doesn't work.
The second thing to do is to set a full URL in the "src" attribute.
Avatar of Angel02

ASKER

I made the following change but no difference

<script type="text/javascript" src="http://sharepoint/SiteAssets/jQuery/jquery-1.6.1.js"></script>
<script type="text/javascript" src="http://sharepoint/SiteAssets/jQuery/jsbranding.js"></script>
<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server"/>

Is there a way to debug?
Sure,
You can run IE developer Toolbar (F12 in the internet explorer) or FireBug in firefox or Developer Tools in Google Chrome.

Open your page on Internet Explorer
Press F12
Switch to the "Script" tab and choose the jQuery file from the list.

If you will see the code - your file loaded fine.
If not - the link isn't correct.

User generated image
Avatar of Angel02

ASKER

In the developer toolbar, I did not find the script tag I added for jquery. As you said the link might be wrong, I changed it as below:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>

I still cannot see the above script tag in the developer toolbar. Please advise.
Are you adding the <script> tags to a single page or to a Master Page?
Avatar of Rainer Jeschor
Hi,
which master page are you using?
Which SharePoint Edition do you use?
It might be that you have to publish / approve the master page before your updates are visible.

Second:
You should not use jQuery(document).ready but instead create your own function which will then be added to the built-in load utility using _spBodyOnLoadFunctionNames.push("myCustomFunctionName");

Ref:
http://www.stephanrocks.com/2011/10/05/_spbodyonloadfunctionnames-in-sharepoint-vs-jquerys-document-ready/

HTH
Rainer
Avatar of Angel02

ASKER

@svetaye
I adding the script tag to the Master page

@RainerJ
I am using a custom master page and Sharepoint 2010
Any other changes I make to the design of the master page are visible on the Site.

I added the following script to the Master Page <head> tag. Does this look good?

      <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
      <script type="text/javascript">
      _spBodyOnLoadFunctionNames.push("testjs");
      function testjs(){
      alert("test")
}</script>
Hi,
SharePoint Server 2010 or SharePoint Foundation?

The code is nearly perfect - you just missed the ";" after the alert ;-)

HTH
Rainer
ASKER CERTIFIED SOLUTION
Avatar of svetaye
svetaye
Flag of Israel image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I often get tripped up because I forget to "Publish" files that are used by the master page.

Make sure that after uploading the js scripts and all other resources, to visit the libraries that they are stored in with the web browser and publish the files as a major version.

Of course, any changes to the master page may require the publishing/approval of the master page itself, too, depending on your particular settings.

As an admin with "god" rights to my sites, the site looks fine to me. But despite the fact that  _I_as_admin see everything acting hunky-dory, the Joe Bloggs end user gets error messages because files like master pages, page layouts,  CSS files, scripts linked to in CEWP, Images, JavaScript, and so on, have not been published for general consumption.

cheers, teylyn
Avatar of Angel02

ASKER

@RainerJ

I think it is SharePoint Server 2010. How do I confirm?

@ svetaye/  teylyn
To make sure the issue is not with the Master page, I copied this code directly in the page. There were few Sharepoint tags which were not editable. I copied this code right above the first <div> I found on that page.

 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script>
      <script type="text/javascript">
      _spBodyOnLoadFunctionNames.push("testjs");
      function testjs(){
      alert("test")
}</script>

Neither does the alert come up nor does the script show up on the 'Script' tab of developer toolbar.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Angel02

ASKER

Thank you!
I inserted the code exactly where you suggested inside asp:content in the page and it worked!
Looks like the correct Master page is not being accessed from the page I am working on. I'll check that out.

I inserted the following jquery script


<script type="text/javascript">
      _spBodyOnLoadFunctionNames.push("testjs");
      function testjs()
      {
      // on resize
 jQuery(window).resize(function (e) {
 alert("ReachedResize");
fixLeftPanelHeight();
});
// on load
 fixLeftPanelHeight();
}
function fixLeftPanelHeight() {
alert("Reached");
var windowHeight = jQuery("#parentDiv > DIV").height();
 var leftPanel = jQuery("#s4-leftpanel-content");
 alert(windowHeight);
  if (windowHeight  >= leftPanel.height()) {
leftPanel.height(windowHeight);
}
else {
// reset height – important on resizing  
leftPanel.css("height",'auto');
   }
  }</script>


I tried to obtain the window height using

var windowHeight = jQuery(window).height();
var windowHeight = jQuery(docuement).height();

But these were not giving me the height of the entire page which is (2000px). Looks like they were giving the height of the visible window (620px). I then obtained the height of the outermost <div> and it worked fine. But this method is tedious because I will have to add this ParentDiv in every page.
Is there any other way to obtain the height os the entire page including the scroll-able area? Any help is appreciated. Thanks!
Hello,
Try this:
var windowHeight=document.documentElement.scrollHeight

Open in new window


This is pure JavaScript and it should take the actual page height include the scrolled area and it usually works for me.