Pretty new to jQuery trying to do something (hopefully) simple with SPServices

Apr 22, 2014 at 12:44 PM
Edited Apr 22, 2014 at 12:58 PM
Hey guys, so I'm pretty new at jQuery and I'm trying to write a script that does:
  • Gets list items (calendar)
  • Gets and saves in a var the items' 'Title' and whether a checkbox is checked or not
  • If checkbox.checked > parse a div on another page for a title match.
  • If the title is matched > CSS override to turn the text in that div red.
Hopefully that was a clear explanation. Essentially, I've got a web part on the front page that displays come calendar events (among other things) from a calendar elsewhere in SP. I want to add an "alert" function (a checkbox column in the calendar) so that when the checkbox is checked for that calendar event, it turns the text for that event red in the front page web part. I'm set on doing this externally (CEWP instead of altering the actual web part, which I don't have access to). Hopefully this is possible to do...Here's what I've got using spservices to get the list items:
$(document).ready(function () {
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "calendar",
    webURL: "http://myintranet/calendar.aspx",
    CAMLViewFields: "<ViewFields><FieldRef Name='Checkbox' /><FieldRef Name='Title' /></ViewFields>",
    })

// If checkbox is checked -- save the title of the calendar event in a variable
// Search the front page inside the div that displays the calendar events for a match to that title

$(".divThatContainsTheCalendarEvents('VariableThatHoldsTheTitleOfTheEvent')").css("color", "red");
});
Pretty much stuck here. I know what I want to do, but not really how to do it.
Apr 24, 2014 at 2:08 PM
Your 'GetListItems' call is nearly formed properly to get a successful return (an xml object), except that there should be no comma after the last option used. Additionally, you do need to employ the 'completefunc:' option with the SPServices call. The 'completefunc' operation is where you perform actions with the returned data.

So, it will look like...
$(document).ready(function () {
    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "calendar",
        webURL: "http://myintranet/calendar.aspx",
        CAMLViewFields: "<ViewFields><FieldRef Name='Checkbox' /><FieldRef Name='Title' /></ViewFields>",
        completefunc: function(xData, Status) {
              //parse the xData.responseXML to enumerate the records, extract/evaluate fields, and update div elements on the target page.  Most of what you want to do here will be covered in jQuery API documentation (http://api.jquery.com/) since SPServices has done all it can do for you by this point.
        }
    });
});
Geoff
Marked as answer by doryphoros on 5/5/2014 at 1:43 AM
May 5, 2014 at 9:43 AM
Edited May 5, 2014 at 12:30 PM
Hey thanks a lot. I've got it reading out the xData object in an alert box. The only problem is that it seems to be reading out a lot of fields, not just 'Checkbox' and 'Title' like the caml query is set up to do. Will read up and figure out how to parse the xData then figure out some logic for updating the divs on the other page.

One quick question I thought of, what is the Status parameter in the function? I understand the xData is the xml object with the fields
function(xData, Status) {
May 5, 2014 at 12:55 PM
There are certain fields that are going to be included in the XML return always. You can include the option...
CAMLQueryOptions: "<QueryOptions><IncludeMandatoryColumns>FALSE</IncludeMandatoryColumns></QueryOptions>",
That will still return more fields than you're probably looking for but it will limit the extra stuff--nothing we can do about that.
The "Status" item is just the web service call status result (i.e., will return "success" if the call was successful).
May 6, 2014 at 8:10 AM
Edited May 6, 2014 at 12:34 PM
Great, thank you. Got the data parsed now and stored in variables, just got to figure out the final step. Couldn't have gotten this far without your help!

In case anyone is interested in seeing the finished product, here it is!
$(document).ready(function () {

    var query = "<Query><Where><Geq><FieldRef Name='EndDate' /><Value Type='DateTime'><Today Offset='-2' /></Value></Geq></Where></Query>"

    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "calendar",
        webURL: "http://myintranet",
        CAMLQuery: query,
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Alert' /></ViewFields>",
        completefunc: function (xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function () {
                var alertTitle = $(this).attr("ows_Title");
                var isAlert = $(this).attr("ows_Alert");
                if (isAlert == 1) {
                    $('p').filter(function (index) { return $(this).text() === alertTitle; }).css("color", "red");
                    
                }
            });
        }
    });
});
May 6, 2014 at 4:11 PM
doryphoros wrote:
Great, thank you. Got the data parsed now and stored in variables, just got to figure out the final step. Couldn't have gotten this far without your help!

In case anyone is interested in seeing the finished product, here it is!
$(document).ready(function () {

    var query = "<Query><Where><Geq><FieldRef Name='EndDate' /><Value Type='DateTime'><Today Offset='-2' /></Value></Geq></Where></Query>"

    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "calendar",
        webURL: "http://myintranet",
        CAMLQuery: query,
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Alert' /></ViewFields>",
        completefunc: function (xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function () {
                var alertTitle = $(this).attr("ows_Title");
                var isAlert = $(this).attr("ows_Alert");
                if (isAlert == 1) {
                    $('p').filter(function (index) { return $(this).text() === alertTitle; }).css("color", "red");
                    
                }
            });
        }
    });
});
Thanks! for posting the outcome.

I'm trying to figure out how to make the getlistitems function to work and is planning to recreate what you did here,
to learn how I can get it to work in a project I plan to start.

Can you or anyone give me tips on how to recreate the list that uses this?

Thanks in Advance.
May 7, 2014 at 8:26 AM
Edited May 7, 2014 at 8:32 AM
The list that I am using here is just a standard SharePoint calendar, with standard calendar list columns, and I added a column (checkbox) for the alert.

Also, should update that the last line in the code
$('span').filter(function (index) { return $(this).text() === alertTitle; }).css("color", "red");
The calendar event titles are sitting in <span> elements on the page. Using $('p').filter turns the entire paragraph red as long as it contains a match to alertTitle. Using span solved this problem allowing me to change only the title text as I wanted.
May 8, 2014 at 3:43 PM
Edited May 8, 2014 at 4:35 PM
I haven't gotten it to work yet.

I've added a Yes/No Checkbox field and named it "Alert"

And Created 2 entries with Title Values as "Test1" and "Test2" respectively and
the Alert Checkboxes are "Checked" for "Test1" and "Not checked" for "Test2"

I'm still trying to figure out how to get it working but thanks to your sample code I manage to realize that "$(this).attr("ows_Field_Ref_Used")" was the code that fetches the particular data after the Filter Node function.

(I should have realized it after reading the documentation for GetListItem but the concept seemed to have eluded me when I read it before)


Thanks again, Doryphoros and SP Services Admins.


Update: I Finally Manage to get it to work. I checked the DOM and it turns out that our calendar part uses a "b" tag for the "Title" values when displaying them on the calendar. I replaced the "p" with a b on the filter and it was able to turn the text to red.