Adding jQuery to a SharePoint Page: Step One, Always
No matter how many times I add jQuery to a page in SharePoint, this is absolutely *always* the first thing that I do:
<script language="javascript" type="text/javascript" src="/Scripts/jquery-1.5.min.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jquery.SPServices-0.6.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("jQuery");
});
</script>
If that alert in line 7 which is wrapped in a $(document).ready fires, then my script references are good. I can’t tell you how many times I’ve talked people through that simple step. It even hangs me up, so it’s always good to do that alert first. (Sure, the alert can say “Bob’s your Uncle” or “Strawberry Jam”, but alert *something*.)
How about alert(“jQuery:”+window.jQuery); ? I mean, sometimes you need jQuery before the document is ready.
Also, what do you mean by “No matter how many times I add jQuery to a page”? Once should be enough, right? ;-)
Wiseacre.
Hey, did I mention that jQuery 1.6 is out ;-)
Help! The pop-up does not appear for me, leading me to the obvious conclusion – I am doing something wrong. Where can I start troubleshooting why the calls to the .js files are not working? The paths are correct (they work via a browser) and the permissions seems to be correct as well.
Any advice?
Andrew:
If you’re not getting the popup, then the references to the .js files aren’t right. If you open the page in SharePoint Designer, you can Ctrl-Click on the src links to see if they are valid.
M.
Hi, I am adding the script to a customized NewForm.aspx. i have added the v0.7.0 inside PlaceHolderMain. From the SPDesigner i can navigate to the .js references but still no pop-up. i am new to jquery. please assist. thanks.
Jim:
Undoubtedly your references aren’t correct. Make sure that the file(s) are exactly where you are pointing.
M.
@Marc: Thanks for the super quick response. i was missing the http://jquery.com/ …. 1.7.1.js. I assumed that the only files that needed to be ref was the 2 .js files from your download. Apologies for the bother. cheers.
Sure thing. I always prefer to keep a local copy of the files, usually in a Document Library, but you can also use the CDNs, as you are.
M.
hey, i am using exactly what you say but still my alert is not working.. this is the script i am using in the content editor __ source editor, please can you help me:
$(document).ready(function() {
alert(“Hello world!”);
});
Hi
Naomi:
Are you referencing the jquery library elsewhere?
M.
Hi thank you for your reply, no i am not. but i have tried out something else in the meantime: i have pasted the whole jQuery build in my source editor and then it did work.
That’s not a great idea from a maintainability perspective. you should store the .js file somewhere accessible by HTTP, like a Document Library, the _layouts folder on the WFEs, or by referencing an external CDN.
M.
well i tried to reference an externam cdn but thats what didnt work because the site is secured by vpn, which is i think also why when i add it to a library it also didnt work. when i refered to tht library it wud give page not found.
Naomi:
That sounds like a permissions issue. Wherever you store the file(s), you need to have at least read permissions on the files. It also may be that you just had the path wrong.
M.
ok i will look into it. Thank you very much Marc!
Marc – I am having problems getting the alert to fire.
Steps taken:
Created new doc library named scripts
Added both .js files to the new document library called Scripts
Created http://sitename/qtest.aspx via sharepoint designer
Tested accessing the new page successfully via browser
I also tried placing the .js files in _layouts and referenced this path in the src but same behavior occurred – page opened fine without errors just did not fire the jquery alert.
—-
qtest.aspx page output is as follows:
$(document).ready(function() {
alert(“hello jQuery”);
});
test 1
This is a test
I am not seeing any errors when accessing the page. It returns “This is a test” with no problems. It just does not fire the jquery alert. Tried this on IE9.x firefox 11.x and IE8.x
Any ideas?
kc:
You don’t mention adding the references to the script files in the aspx page. Have you done that?
M.
Thank you for your response. Yes the js references are entered as follows:(placed in brackets/quotes hopefully this time they are accepted:)
[“…
$(document).ready(function() {
alert(“hello jQuery”);
});…”]
kc:
That means that your reference to the jQuery file isn’t valid. If you have the page open in SharePoint Designer, you can Ctrl-Click the src. If it is valid, the file will open for editing; if not, you’ll get a message saying so.
M.
Well I had forgotten to include the actual jquery library.(like in line 1 of your example)…
1. downloaded from http://docs.jquery.com/Downloading_jQuery#Download_jQuery
2. uploaded to my scripts (sharepoint) library.
3 included src reference to the jquery file in the aspx file
4. opened the file via browser and the jquery fired this time around.
Thanks very much for your help. On to the next step.
It’s usually the little things that hang us up, eh? Glad you got it working.
M.
Hey Marc,
having jquery links markup in my page or in CEWP works great on my local environment. Jquery files are in one of the document library. But not able to understand when I put this on client server page loads a while and then gives 404 (wierd Isnt it ??)
Can you please assist ? Is it because of some configuration ? this happens for CSS links too :(
Swapnil:
I’m not sure I follow what’s going on, but take a look at the Net traffic with Fiddler or Firebug to see if there are issues with the file references or authorization.
M.
I have a list that has three columns [Cust] [Site] [Line] each are of type lookup. What is the simplest way to get a combination of the three ie “MyCustomer MySite MyLine” back into a column as a single line of text in the same list.
Any help appreciated!!
Thanks
Drew:
You wont be able to use the Lookup columns in a formula, so you’ll can resort to a little workflow to populate the fourth column. In the workflow, you can concatenate the three values.
I would probably do it with script in the forms, though. In the PreSaveAction(), I’d populate the fourth column based on the contents of the first three before saving the form.
M.