Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I've very recently picked up SharePoint and have a limited knowledge of programming so you'll need to bear with me here.

I'm currently building on a development site collection in SharePoint Online (Office 365).

I've built a news ticker using HTML/jQuery which works using static values set in HTML. What I'm trying to do is link the ticker to a SharePoint List and have it scroll through the first five news titles.

Right now I have the following code in Default.aspx.

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div class="title"><p>On:trac News</p></div>
    <div class="cont"><ul id="ticker">
    <li>News item one.</li>
    <li>News item two.</li>
    </ul></div>        

</asp:Content>

This is then powered by the following jQuery.

<script type="text/javascript">
    $(document).ready(function () {
        function tick() {
            $('#ticker li:first').slideUp(function () { $(this).appendTo($('#ticker')).slideDown(); });
        }
        setInterval(function () { tick() }, 5000);
    });
</script> 

What is the best method of pulling information from SharePoint and then referencing the values in the default.aspx page? I have read around and found a couple of guides for pulling lists from SP but I'm struggling to find a way to write this to the ticker.

share|improve this question
    
We need o know the SharePoint version before we can really give you concrete advice. Is it 2007, 2010, or 2013? –  Robert Kaucher Sep 23 '13 at 16:26
    
Sorry, forgot to mention that. It's SharePoint Online (Office 365 deployment). –  Ben Short Sep 23 '13 at 22:27
    
I think the best solution for that is called jslink. msdn.microsoft.com/en-us/magazine/dn745867.aspx –  Sascha Apr 4 at 20:10

4 Answers 4

You need to know how to use the Sharepoint client object model. Firstly, you have to get the SP Context -> SP List -> SP ListItems.

Here is the complete basic operations using JavaScript Object Model code in SP. I think that will be really helpful for you: http://msdn.microsoft.com/en-us/library/office/jj163201.aspx

share|improve this answer

I've built SharePoint 2013 Client side Apps to do this kinda of thing but if you're new to all this I would suggest using OTB stuff as much as possible, you can get a lot done using list, display templates and some JQuery.

I would have a look a the following github project which contains ready made display templates and search display templates which you can plugin to content query web parts.

GitHub - SPCSR/DisplayTemplates - This repository contains all of the available Display Template samples provided by the SharePoint community members.

From these display templates (and JQuery) i have created news banner carousels, news tickers and accordion panels etc.

share|improve this answer

Have you tried SPServices yet? Check out the link it should work with SharePoint Online, too as far as i could read from the codeplex site.

The link given beforehand contains an example on how to retrieve list items with JavaScript/JQuery as you are already using it in your question.

You can retrieve all the information required directly into your script and either but the list Items in an array and dynamically create the list elements from the front end. There should be enough information on the latter. Just search for 'Dynamically creating li items'.

share|improve this answer

I usually use REST for this sort of thing. This example is looking for a list called 'FooterLinks' and populating them into a div with the jquery each method.

$.ajax({
    url: "/_api/web/lists/GetByTitle('FooterLinks')/items",
    type: "GET",
    headers: {
        "accept": "application/json;odata=verbose",
    },
    success: function (data) {
        $.each(data.d.results, function (index, item) {
            $('#FooterLinks').append("<dl id='item" + item.columnID + "'><dt>" + item.Title + "</dt></dl>");
        });
    },
    error: function (error) {
        //alert(JSON.stringify(error));
    }
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.