GetListItems yields nothing

Aug 14, 2014 at 2:11 AM
Hello,

I'm having some trouble getting GetListItems working on my instance of SP2010. I've been reading the SPServices documentation and other discussions to no avail.

I'm trying to use SPServices to query the Documents Library and display the results in a table a la this tutorial: http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=5

Below is my jQuery and html (which is in a Site Page); the alert in the jQuery is firing, says "success" and the console says "Object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}" around 50 times.

jQuery
      $(document).ready(function(){
        alert("jQuery v" + $.fn.jquery + " | SPServices v" + $().SPServices.Version());
        GetRecruiting();
      });
      function GetRecruiting(){
        var method = "GetListItems";
        var list = "Documents";

        var fieldsToRead = "<ViewFields>" +
                                          "<FieldRef Name = 'Title' />" +
                                        "</ViewFields>";
        var query = "<Query>" +
                              "<Where>" +
                                "<Neq>" +
                                  "<FieldRef Name='ID' /><Value Type='Number'>0</Value>" +
                                "</Neq>" +
                              "</Where>" +
                              "<OrderBy>" +
                                "<FieldRef Name='Title'/>" +
                              "</OrderBy>" +
                            "</Query>";
        $().SPServices({
          operation: method,
          async: false,
          listName: list,
          CAMLViewFields: fieldsToRead,
            CAMLQuery: query,
              //this basically means "do the following code when the call is complete"
              completefunc: function (xData, Status) {
                //this code iterates through every row of data returned from the web service call
                $(xData.responseXML).SPFilterNode("z:row").each(function() {
                  var name = ($(this).attr("ows_Title"));
                  AddRowToTable(name);
                  alert(Status);
                  console.log(xData);
                });
              }
        });
      }
      function AddRowToTable(name){
          $("#recruitingTable").append("<tr align='middle'>" +
                                                            "<td> name</td>" +
                                                         "</tr>");
      }
html
<section class = "main-wrapper">
  <header ng-model="message">
    <h1>Home</h1>
    <table id="recruitingTable">

    </table>
  </header>
</section>

I'm using jQuery v1.11.1 | SPServices v2014.01

Let me know what other information I can provide to help diagnose.
Aug 14, 2014 at 3:52 AM
Looks like it's your 'AddRowToTable' function. Change this line:

" name" +

To:
    "" + name + "" +


Also, to be safe:
Do you have the code above wrapped in with a scoped $ variable? Like:

(function($){

// your code from above here.

})(jQuery);


I initially thought that was the problem.

Paul




--
Paul T.

-- Sent from Mobile

Coordinator
Aug 14, 2014 at 4:17 PM
Looks like something ate part of Paul's suggestion.
"<td> name</td>" +
should be:
"<td>" + name + "</td>" +
M.
Aug 14, 2014 at 7:32 PM
Wow, I can't believe I'm getting a response! I really appreciate you guys taking the time helping out someone new to SPServices. I've implemented the suggested changes and the results in the console indicate that I'm going down the right path. It looks like I'm successfully pulling the items but it's not displaying them now. Here's an example of what it's saying (like my last post, there's about 50 of them):
Object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
And if I drill down into this, I can see that the responseText contains a record's information within Documents.

Below is the new jQuery code. Note, I tried:
(function($){

// your code from above here.

})(jQuery);
but the })(jQuery); part was throwing an error so I removed (jQuery).
      $(document).ready(function($){
        alert("jQuery v" + $.fn.jquery + " | SPServices v" + $().SPServices.Version());
        GetRecruiting();
      });
      function GetRecruiting(){
        var method = "GetListItems";
        var list = "Documents";

        var fieldsToRead = "<ViewFields>" +
                                          "<FieldRef Name = 'Title' />" +
                                        "</ViewFields>";
        var query = "<Query>" +
                              "<Where>" +
                                "<Neq>" +
                                  "<FieldRef Name='ID' /><Value Type='Number'>0</Value>" +
                                "</Neq>" +
                              "</Where>" +
                              "<OrderBy>" +
                                "<FieldRef Name='Title'/>" +
                              "</OrderBy>" +
                            "</Query>";
        $().SPServices({
          operation: method,
          async: false,
          listName: list,
          CAMLViewFields: fieldsToRead,
            CAMLQuery: query,
              //this basically means "do the following code when the call is complete"
              completefunc: function (xData, Status) {
                //this code iterates through every row of data returned from the web service call
                $(xData.responseXML).SPFilterNode("z:row").each(function() {
                  var name = ($(this).attr("ows_Title"));
                  AddRowToTable(name);
                  alert(Status);
                  console.log(xData);
                });
              }
        });
      }
      function AddRowToTable(name){
          $("#recruitingTable").append("<tr align='middle'>" +
                                                            "<td>" + name  + "</td>" +
                                                         "</tr>");
      }
Wesley
Coordinator
Aug 14, 2014 at 8:02 PM
You're logging xData, which is the whole response. That's why you're seeing what you are in the console.

Try this:
$(xData.responseXML).SPFilterNode("z:row").each(function() {
  var name = $(this).attr("ows_Title");
  AddRowToTable(name);
  console.log(name);
});
M.
Aug 14, 2014 at 9:52 PM
Nice, console is logging all the Document record names now. However, these names aren't appending to #recruitingTable.

I moved the alert to be within AddRowToTable(name) to verify if it's actually firing and it is.

Any other ideas guys?

Here's the code as it is now, you can see that I tried moving AddRowToTable to be above GetRecruiting with no luck. Any other ideas?
$(document).ready(function($){
  GetRecruiting();
});
function AddRowToTable(name){
  alert("jQuery v" + $.fn.jquery + " | SPServices v" + $().SPServices.Version());
  $("#recruitingTable").append("<tr align='middle'>" +
                                                    "<td>" + name  + "</td>" +
                                                 "</tr>");
}
function GetRecruiting(){
  var method = "GetListItems";
  var list = "Documents";

  var fieldsToRead = "<ViewFields>" +
                                    "<FieldRef Name = 'Title' />" +
                                  "</ViewFields>";
  var query = "<Query>" +
                        "<Where>" +
                          "<Neq>" +
                            "<FieldRef Name='ID' /><Value Type='Number'>0</Value>" +
                          "</Neq>" +
                        "</Where>" +
                        "<OrderBy>" +
                          "<FieldRef Name='Title'/>" +
                        "</OrderBy>" +
                      "</Query>";
  $().SPServices({
    operation: method,
    async: false,
    listName: list,
    CAMLViewFields: fieldsToRead,
      CAMLQuery: query,
        //this basically means "do the following code when the call is complete"
        completefunc: function (xData, Status) {
          //this code iterates through every row of data returned from the web service call
          $(xData.responseXML).SPFilterNode("z:row").each(function() {
            var name = $(this).attr("ows_Title");
            AddRowToTable(name);
            console.log(name);
          });
        }
  });
}

Thanks for the continued help.

Regards,
Wesley
Coordinator
Aug 14, 2014 at 11:05 PM
Well, I'd check the $("#recruitingTable") selector. Maybe it isn't right? Also, if you're appending table rows into a container that isn't a table, you won't see them.

M.
Aug 14, 2014 at 11:20 PM
Aha! I haven't gotten it working yet but I failed to mention that I'm using AngularJS and partials and this table happens to be in a partial. The solution looks like I need to add a directive. I'll confirm and post once I figure this out so that anyone else experiencing the same thing can learn from my frustrations.

Wesley
Coordinator
Aug 15, 2014 at 2:40 AM
I'm not sure how that would go, but obviously the element with id="recruitingTable" has to be in the page when the script runs.

M.