Here we will setup a SharePoint 2010 page that utilizes both jQuery Mobile as well as the jQuery SPServices library. Note: This post was updated Feb 21 to reflect an issue I’ve documented here with IE8.
- Create a new page
- Setup your html
- Create jQuery Mobile layout
- Create functions
- Call functions on page change
- Full Code
Create a new page
Create a new blank .aspx page in the “Site Pages” library (using SharePoint Designer 2010). I like to use a new .aspx page like this because I can create a document from scratch, I don’t have to deal with page layouts, master pages, etc. The same principals can be applied elsewhere, but this gives me a clean page to start from (which is way easier to debug).
Setup your html
Note: I’ve created my document using html5 standards (as does jQuery Mobile).
<!DOCTYPE html>
<html>
<head>
<meta name="WebPartPageExpansion" content="full" />
<title>SharePoint, SPServices, and jQuery Mobile!</title>
<link rel="apple-touch-icon" href="/Style Library/Images/apple-touch-icon.png"/>
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
<link rel="stylesheet" href="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/Style Library/scripts/jquery-1.6.4.min.js"></script>
<script src="/Style Library/scripts/jquery.SPServices-0.7.0.min.js"></script>
<script type="text/javascript">
//we'll put the SPServices functions here
//note the placement of this script tag BEFORE the jQuery Mobile javascript link
</script>
<script src="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
<!--[if lt IE 9]>
<script src="/Style Library/scripts/html5.js"></script>
<![endif]-->
</head>
<body>
<!--- we'll put the jQuery Mobile and HTML here --->
</body>
</html>Create jQuery Mobile layout
Now let’s setup our html within the body tag. We’ll use the standard setup you can find in the jQuery Mobile documentation.
<section id="page1" data-role="page">
<header data-role="header" data-position="fixed">
<h1>First Page</h1>
</header>
<div data-role="content">
Here's your first name: <span class="first-name" style="font-weight:bold;"></span><br/>
<a href="#page2">Click here</a> to see your last name
</div>
</section>Here’s our first pagelet. It has an ID of “page1″, and a title of “First page”. If you have everything setup right so far, you should see an image like this:
Now let’s setup page 2. You’ll notice above that we’ve used a link tag with a href=”#page2″. jQuery Mobile takes this and navigates us to “page” 2, even though it is simply another section on the same aspx page. Here’s what you’ll have, and the image follows:
<section id="page2" data-role="page">
<header data-role="header" data-position="fixed">
<h1>Second Page</h1>
</header>
<div data-role="content">
Here's your last name: <span class="last-name" style="font-weight:bold;"></span><br/>
<a href="#page1">Go back</a> to see your first name
</div>
</section>
Create functions
Now that we’ve created our pages, it’s time to create the functions. We’re going to create two functions. One will call the first name of the user, and one will call the last name. Once it gets the first/last name, it appends the value of that variable to the empty ‘span’ tags we created in the step above. This is a basic example, but you’ll get the point at least.
So the first thing we need to do is create the functions on document ready. But note that we won’t CALL the functions just yet.
First function (to get first name of the logged in user):
function getFirstName() {
firstname = $().SPServices.SPGetCurrentUser({fieldName: "FirstName"})
$(".first-name").append(firstname);
} Second function (to get last name of the logged in user):
function getLastName() {
lastname = $().SPServices.SPGetCurrentUser({fieldName: "LastName"})
$(".last-name").append(lastname);
}Call functions on page change
Right now these two functions are just sitting in the script tag, but we want to call them. You can do one of two things:
- call the functions right away
- call whenever the new pagelet loads
Because of the functions I am calling in one of my other projects, I’ve decided to call the function each time each pagelet loads. That means that even though jQuery Mobile loads the new pagelet without reloading the url, my data will still load in asynchronously. So when we click on “click here to see your last name”, it will then call the function when that pagelet comes into view.
The other way is fine as well, it just means that while you are using your new web app, the data only loads when the document is ready. This means if data changes while you are navigating, you won’t see the change until you refresh the page.
Note: If you call the functions each time the page is loaded, your script must remain above the jquery mobile js reference (see step 2). This because you need to tweak the DOM before jQuery Mobile applies its classes and functionality to the page.
So onto the code! We’re going to use the jQuery function “on” and pass the event “pagecreate”. Like I mentioned above, this means the function will only run when the page is created (every time).
$("section#page1").live("pagecreate", function(event){
getFirstName();
});
$("section#page2").live("pagecreate", function(event){
getLastName();
});Now you should see the following when you load each page:
Full Code
And for your copying and pasting pleasure, here’s the full code!
<!DOCTYPE html>
<html>
<head>
<meta name="WebPartPageExpansion" content="full" />
<title>SharePoint, SPServices, and jQuery Mobile!</title>
<link rel="apple-touch-icon" href="/Style Library/Images/apple-touch-icon.jpg"/>
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
<link rel="stylesheet" href="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/Style Library/scripts/jquery-1.6.4.min.js"></script>
<script src="/Style Library/scripts/jquery.SPServices-0.7.0.min.js"></script>
<!--[if lt IE 9]>
<script src="/Style Library/scripts/html5.js"></script>
<![endif]-->
<script type="text/javascript">
$(document).ready(function(){
function getFirstName() {
firstname = $().SPServices.SPGetCurrentUser({fieldName: "FirstName"})
$(".first-name").append(firstname);
}
function getLastName() {
lastname = $().SPServices.SPGetCurrentUser({fieldName: "LastName"})
$(".last-name").append(lastname);
}
$("section#page1").live("pagecreate", function(event){
getFirstName();
});
$("section#page2").live("pagecreate", function(event){
getLastName();
}); })
</script>
<script src="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header" data-position="fixed">
<h1>First Page</h1>
</header>
<div data-role="content">
Here's your first name: <span class="first-name" style="font-weight:bold;"></span><br/>
<a href="#page2">Click here</a> to see your last name
</div>
</section>
<section id="page2" data-role="page">
<header data-role="header" data-position="fixed">
<h1>Second Page</h1>
</header>
<div data-role="content">
Here's your last name: <span class="last-name" style="font-weight:bold;"></span><br/>
<a href="#page1">Go back</a> to see your first name
</div>
</section>
</body>
</html>
Enjoy!
Ben
