0

I am having an awful hard time with understand the SPService and JQuery files and how to use them to get what I want done.

I am looking to take a list/library on my SharePoint site and input the data into html coding that I am hosting on the same SharePoint site (through the page viewer option). I am doing this to get a more web based look, but to make updating and adding items easier by keeping the SharePoint lists/libraries.

Can someone help me as to where to start?

This works to pull into a cewp, but I need it to be able to work within the HTML coding of the page viewer webpart.

<script type="text/javascript" src="filelink/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="filelink/jquery.SPServices-0.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
      $().SPServices({
        operation: "GetListItems",
        webURL: "http://myURL.aspx",
        async: false,
        listName: "Announcements",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
        completefunc: function (xData, Status) {
          $(xData.responseXML).SPFilterNode("z:row").each(function() {
            var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
            $("#tasksUL").append(liHtml);
          });
        }
      });
    });
</script>
<ul id="tasksUL"/>  
<body>
</body>
</html>
Improve this question
3
  • Why do you need page viewer webpart.? Commented Sep 15, 2016 at 14:11
  • What version of SharePoint? Commented Sep 15, 2016 at 14:32
  • If you're doing this simply to maintain the look, I recommend you look at branding and style options rather than using a page viewer. I also recommend using newer SPServices and JQuery versions. Yours are quite old. Commented Sep 15, 2016 at 16:09

2 Answers 2

Reset to default
1

You can get anonymous list items in a HTML page using below code

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
 <html xmlns=”http://www.w3.org/1999/xhtml”&gt;
 <head>
 <title></title>
 <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script&gt;

<style type=”text/css”>
table.hovertable {
 font-family: verdana,arial,sans-serif;
 font-size:11px;
 color:black;
 border-width: 1px;
 border-color: black;
 border-collapse: collapse;
 width: 100%;

}
 table.hovertable th {
 background-color:#D3E2E5;
 border-width: 1px;
 padding: 8px;
 border-style: solid;
 border-color: black;
 }
 table.hovertable tr {
 background-color:white;
 }
 table.hovertable td {
 border-width: 1px;
 padding: 8px;
 border-style: solid;
 border-color: black;
 color:#666666;
 }
 </style>

</head>
 <body>
 <div>

<script type=”text/javascript”>

$(document).ready(function () {

$(“#tblCalendar > tbody:last”).children().remove();

var soapEnv =
“<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org/soap/envelope/’&gt; \
 <soapenv:Body> \
 <GetListItems xmlns=’http://schemas.microsoft.com/sharepoint/soap/’&gt; \
 <listName>AnonymousList</listName> \
 <query> \
 <Query> \
 <Where> \
 <Eq> \
 <FieldRef Name=’DateValue’ /> \
 <Value Type=’DateTime’><Today/></Value> \
 </Eq> \
 </Where> \
 </Query> \
 </query> \
 <viewFields> \
 <ViewFields><FieldRef Name=’Title’ /></ViewFields> \
 </viewFields> \
 <rowLimit>4</rowLimit> \
 </GetListItems> \
 </soapenv:Body> \
 </soapenv:Envelope>”;

$.ajax({
 url: “http://<Server URL>/sites/JDT/_vti_bin/lists.asmx”,
type: “POST”,
dataType: “xml”,
data: soapEnv,
 complete: processListAccessResult,
 contentType: “text/xml; charset=\”utf-8\””
});
 });

// Process result
 function processListAccessResult(xData, status) {

$(xData.responseXML).find(“z\\:row”).each(function () {

var tbl = document.getElementById(‘data’);
 var lastRow = tbl.rows.length;
 // if there’s no header row in the table, then iteration = lastRow + 1
 var iteration = lastRow+1;
 var row = tbl.insertRow(lastRow);

// Title cell
 var cellTitle = row.insertCell(0);
 var NodeTitle = document.createElement(‘a’);
NodeTitle.setAttribute(‘href’,”http://<Server URL>/sites/JDT/Lists/AnonymousList/DispForm.aspx?ID=” + $(this).attr(“ows_ID”));
 NodeTitle.style.textDecoration = “none”;
NodeTitle.innerHTML = “. ” + $(this).attr(“ows_Title”);
cellTitle.appendChild(NodeTitle);

// Date cell
 var cellDate = row.insertCell(1);
 var NodeDate = document.createElement(‘span’);
NodeDate.innerText=$(this).attr(“ows_DateValue”).substring(5,7) + ‘/’ + $(this).attr(“ows_DateValue”).substring(8,10) + ‘/’ + $(this).attr(“ows_DateValue”).substring(0,4);
 cellDate.appendChild(NodeDate);
 cellDate.setAttribute(‘align’,’right’);

});
 }

</script>

<table id=”data” class=”hovertable”>
 <thead>
 <tr>
 <th align=”left” width=”70%”>AMK Calendar</th>
 <th align=”right” width=”30%”><a href=”http://<Server URL>/sites/JDT/Lists/AnonymousList/AllItems.aspx”>more-></a></th
 </tr>
 </thead>
 <tbody></tbody>
 </table>

</div>

</body>
 </html>

There is also one more method mentioned in below given link

Read SharePoint List Data and Display it in a HTML Page Using jQuery & SPservices Dynamically

Improve this answer
1

When we are using Page Viewer webpart, it's added a iframe tag into the html. so instead of page viewer you can add your own iframe tag in the html and bind the data in this iframe.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.