CODEWITHSUNDEEP
javascriptjquerysharepoint-2010spservices
habibg
habibg

Reputation: 185

Read from SharePoint with SPServices

I am trying to read from a SharePoint list("Winners") and display it on a page using content editor. This sounds really simple but for some reason I'm having a hard time with this. My code to do this is below:

<style type="text/css">
  h4{
  color: red

}
table{
border: #ccc solid 2px;
border-radius: 3px;

}

</style>

<script src="/_layouts/1033/FH/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/_layouts/1033/FH/jquery.SPServices-0.7.1a.js">
</script>

<script type="text/javascript">
$(document).ready(function(){
    GetWinners();

}):

//getWinners Function starts here.
function GetWinners(){

    //Variables to store information.
    var method = "GetListItems";
    var list = "Winners";
    var fieldsToRead =  "<ViewFields>" +
                            "<FieldRef Name='Title' />" +
                            "<FieldRef Name='Picture' />" +
                            "<FieldRef Name='Text' />" +
                        "</ViewFields>";

    var query = "<Query>" +
                    "<Where>" +
                        "<Neq>" +
                            "<FieldRef Name='ID'/><Value Type='Number'>0</Value>" + 
                        "</Neq>" +
                    "</Where>" +
                    "<OrderBy>" + 
                        "<FieldRef Name='Title'/>" +
                    "</OrderBy>" +
                "</Query>";

    //SPServices call where we pass the above variables.
    $().SPServices({
        operation: method,
        async: false,
        listName: list,
        CAMLViewFields: fieldsToRead,
            CAMLQuery: query,
                completefunc: function (xData, Status){
                     $(xData.responseXML).SPFilterNode("z:row").each(function() { 
                        var name = ($(this).attr("ows_Title"));
                        var pictureUrl = ($(this).attr("ows_Picture"));
                        var caption = ($(this).attr("ows_Text"));

                        AddRowToTable(name, pictureUrl, caption);

                    });

                }

    });
}//End

//Function to add content on the page starts here.
function AddRowToTable(name, pictureUrl, caption){
    $("#winnersTable").append("<tr align:'middle'>" +
                                "<td><img src='"+ pictureUrl + "'/><br><h4>" + name + "</h4><br><p>" + caption + "</p></td>" +
                               "</tr>");

}

</script>

<!-- table where the winners would go -->
<div>
<table id="winnersTable"></table>
</div>

It will be a great help if someone could point out what I'm doing wrong. I have all the internal name of fields and list correct, so that's not the issue. Perhaps I'm missing up when I try to reference it from content editor. I hope I explained this right, but please let me know if there is any questions.

Regards,

Upvotes: 0

Views: 1407

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59358

There is a typo at line:

}):

It is supposed to be semicolon instead of colon.

Some recommendations

Place markup in CEWP, but not a JavaScript code

In fact it depends, but still there are some Pros here. First of all it concerns the maintenance and support of JavaScript code base

Usage of common libraries

It is recommended to reference a JavaScript libraries (like jQuery) from a master pages rather than from web parts.

Upvotes: 1

Related Questions