Calling GetListItems then UpdateListItems from hyperlink

Jun 20, 2014 at 5:50 PM
Edited Jun 20, 2014 at 6:00 PM
I am creating a dashboard to manage announcements and banners for the front page of a portal. I have no issue getting the list items I want to display in the queue list. I am rendering the list output into a table with an "Approve" hyperlink in the last column. I want to be able to click the hyperlink and use the ID variable from the getlistitems call to updatelistitems. I have tried nesting the updatelistitems in the getlistitems function but I can't get the syntax correct.

I would like to use the ID then call updatelistitems with the update batchcmd using valuepair notation: [["ApprovalStatus", "Approved"]] to toggle the ApprovalStatus field from Pending to Approved.

Here is the getlistitems call my page is using which works to get the data into the queue table:
$().SPServices({
    operation: "GetListItems",
    async: false,
    listUrl: "/Employee/Employees/Lists/Approved%20Announcements/",
    listName: "{ABE655C8-0B43-4421-B555-4B1748D9D1A3}",
    CAMLViewFields: "<ViewFields><FieldRef Name='Created' /><FieldRef Name='Author' /><FieldRef Name='AnnouncementType' /><FieldRef Name='Title' /><FieldRef Name='PublishDate' /><FieldRef Name='Expires' /><FieldRef Name='PromoteToBanner' /><FieldRef Name='UseBanner' /><FieldRef Name='BannerCaption' /><FieldRef Name='Modified' /><FieldRef Name='AnnouncementImage' /><FieldRef Name='ApprovalStatus' /><FieldRef Name='ID' /></ViewFields>",
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='ApprovalStatus' /><Value Type='Choice'>Pending</Value></Eq></Where></Query>",     
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var created = $(this).attr("ows_Created");
        var createdby = $(this).attr("ows_Author").split(";#");
        var lastmodified = $(this).attr("ows_Modified");
        var type = $(this).attr("ows_AnnouncementType");
        var title = $(this).attr("ows_Title");
        var pubdate = $(this).attr("ows_PublishDate").split(" ");
        var expdate = $(this).attr("ows_Expires").split(" ");
        var promote = $(this).attr("ows_PromoteToBanner");
        var usebanner = $(this).attr("ows_UseBanner");
        var bannercap = $(this).attr("ows_BannerCaption");
        var appstatus = $(this).attr("ows_ApprovalStatus");
        var image = $(this).attr("ows_AnnouncementImage").split(",");
        var body = $(this).attr("ows_Body");
        var itemid = $(this).attr("ows_ID");
        
        var announcesubqueuerow = "<tr><td>"+created+"</td><td>"+createdby[1]+"</td><td>"+type+"</td><td>"+title+"</td><td>"+pubdate[0]+"</td><td>"+expdate[0]+"</td><td>"+promote+"</td><td>"+usebanner+"</td><td>"+bannercap+"</td><td>"+appstatus+"</td><td><a href='#' id='approvaltoggle'>Approve</a></td></tr>";

        $("#queuecontainer table tbody").append(announcesubqueuerow);
    
      });
    }
    
  });
This is the whole script for the page which includes my unsuccessful effort to incorporate the updatelistitems for the hyperlink into the first getlistitems call for the queue table:
<script language="javascript" type="text/javascript">
jQuery(document).ready(function () {
$().SPServices({
    operation: "GetListItems",
    async: false,
    listUrl: "/Employee/Employees/Lists/Approved%20Announcements/",
    listName: "{ABE655C8-0B43-4421-B555-4B1748D9D1A3}",
    CAMLViewFields: "<ViewFields><FieldRef Name='Created' /><FieldRef Name='Author' /><FieldRef Name='AnnouncementType' /><FieldRef Name='Title' /><FieldRef Name='PublishDate' /><FieldRef Name='Expires' /><FieldRef Name='PromoteToBanner' /><FieldRef Name='UseBanner' /><FieldRef Name='BannerCaption' /><FieldRef Name='Modified' /><FieldRef Name='AnnouncementImage' /><FieldRef Name='ApprovalStatus' /><FieldRef Name='ID' /></ViewFields>",
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='ApprovalStatus' /><Value Type='Choice'>Pending</Value></Eq></Where></Query>",     
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var created = $(this).attr("ows_Created");
        var createdby = $(this).attr("ows_Author").split(";#");
        var lastmodified = $(this).attr("ows_Modified");
        var type = $(this).attr("ows_AnnouncementType");
        var title = $(this).attr("ows_Title");
        var pubdate = $(this).attr("ows_PublishDate").split(" ");
        var expdate = $(this).attr("ows_Expires").split(" ");
        var promote = $(this).attr("ows_PromoteToBanner");
        var usebanner = $(this).attr("ows_UseBanner");
        var bannercap = $(this).attr("ows_BannerCaption");
        var appstatus = $(this).attr("ows_ApprovalStatus");
        var image = $(this).attr("ows_AnnouncementImage").split(",");
        var body = $(this).attr("ows_Body");
        var itemid = $(this).attr("ows_ID");
        
        var announcesubqueuerow = "<tr><td>"+created+"</td><td>"+createdby[1]+"</td><td>"+type+"</td><td>"+title+"</td><td>"+pubdate[0]+"</td><td>"+expdate[0]+"</td><td>"+promote+"</td><td>"+usebanner+"</td><td>"+bannercap+"</td><td>"+appstatus+"</td><td><a href='#approve' id='approvaltoggle'>Approve</a></td></tr>";
        
                $("#approvaltoggle").on("click", function (itemid) {
                    $().SPServices({
                    operation: "UpdateListItems",
                    async: false,
                    batchCmd: "Update",
                    listName: "{ABE655C8-0B43-4421-B555-4B1748D9D1A3}",
                    valuepairs: [["ApprovalStatus", "Approved"]],
                    ID: itemid,
                    completefunc: function(xData, Status) {
                        alert("Announcement Approved");
                    }
                });
                }
        $("#queuecontainer table tbody").append(announcesubqueuerow);
    
      });
    }
    
  });
$().SPServices({
    operation: "GetListItems",
    async: false,
    listUrl: "/Employee/Employees/Lists/Approved%20Announcements/",
    listName: "{ABE655C8-0B43-4421-B555-4B1748D9D1A3}",
    CAMLViewFields: "<ViewFields><FieldRef Name='AnnouncementType' /><FieldRef Name='Title' /><FieldRef Name='PublishDate' /><FieldRef Name='Expires' /><FieldRef Name='Modified' />FieldRef Name='ApprovalStatus' /></ViewFields>",
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='ApprovalStatus' /><Value Type='Choice'>Approved</Value></Eq></Where></Query>",        
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var lastmodified = $(this).attr("ows_Modified");
        var type = $(this).attr("ows_AnnouncementType");
        var title = $(this).attr("ows_Title");
        var pubdate = $(this).attr("ows_PublishDate").split(" ");
        var expdate = $(this).attr("ows_Expires").split(" ");
        
        var announceapprovedrow = "<tr><td>"+lastmodified+"</td><td>"+type+"</td><td>"+title+"</td><td>"+pubdate[0]+"</td><td>"+expdate[0]+"</td></tr>";

        $("#approvedcontainer table tbody").append(announceapprovedrow);
    
      });
    }
  });
$().SPServices({
    operation: "GetListItems",
    async: false,
    listUrl: "/Employee/Employees/Lists/Approved%20Announcements/",
    listName: "{ABE655C8-0B43-4421-B555-4B1748D9D1A3}",
    CAMLViewFields: "<ViewFields><FieldRef Name='Modified' /><FieldRef Name='AnnouncementType' /><FieldRef Name='Title' /><FieldRef Name='AnnouncementImage' /><FieldRef Name='PublishDate' /><FieldRef Name='Expires' /><FieldRef Name='UseBanner' /><FieldRef Name='BannerCaption' /></ViewFields>",
    CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='ApprovalStatus' /><Value Type='Choice'>Approved</Value></Eq><Eq><FieldRef Name='PromoteToBanner' /><Value Type='Choice'>Yes</Value></Eq></And></Where></Query>",     
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var lastmodified = $(this).attr("ows_Modified");
        var type = $(this).attr("ows_AnnouncementType");
        var title = $(this).attr("ows_Title");
        var pubdate = $(this).attr("ows_PublishDate").split(" ");
        var expdate = $(this).attr("ows_Expires").split(" ");
        var usebanner = $(this).attr("ows_UseBanner");
        var bannercap = $(this).attr("ows_BannerCaption");
        var image = $(this).attr("ows_AnnouncementImage").split(",");
        var announcebannerrow = "<tr><td>"+lastmodified+"</td><td>"+type+"</td><td>"+title+"</td><td>"+pubdate[0]+"</td><td>"+expdate[0]+"</td><td>"+usebanner+"</td><td>"+bannercap+"</td></tr>";
    var bannerdata = "<li><a href='#'><img src=\"" + image[0] + "\"/>"+"</a><p class='flex-caption'>" + bannercap + "</p></li>";
        $("#approvedbannercontainer table tbody").append(announcebannerrow);


    $(".flexslider .slides").append(bannerdata);
      });
    }
  });
$("#main-menu").smartmenus();
$('.footable').footable();
$(".flexslider").flexslider();
});
</script>
I have tried several different nested configurations and tried with the javascript function called from the hyperlink itself < href="#" onclick="function(params);">Approve</a>. All to no avail.

Please help me understand what I am doing incorrectly.

Thanks,
Dan
Jun 21, 2014 at 3:08 AM
This code can be made really simple... Have a look at this thread and see if it helps any:

https://spservices.codeplex.com/discussions/548914

The key takeaway for you would be to store the information you want to use in your click handler, add that as an attribute onto the element that will be clicked.

Cheers,
Matthew
Jun 21, 2014 at 10:59 PM
Matthew thank you for the guidance.

I had previously read that same discussion thread but I think I was lost in all the tangled xsl and conditional logic. I was overthinking it with nesting functions and you were right, it was simple! After fully understanding what the code in your link provided was doing I was able to come up with this working code which has separate functions:
$().SPServices({
    operation: "GetListItems",
    async: false,
    listUrl: "/Employee/Employees/Lists/Approved%20Announcements/",
    listName: "{ABE655C8-0B43-4421-B555-4B1748D9D1A3}",
    CAMLViewFields: "<ViewFields><FieldRef Name='Created' /><FieldRef Name='Author' /><FieldRef Name='AnnouncementType' /><FieldRef Name='Title' /><FieldRef Name='PublishDate' /><FieldRef Name='Expires' /><FieldRef Name='PromoteToBanner' /><FieldRef Name='UseBanner' /><FieldRef Name='BannerCaption' /><FieldRef Name='Modified' /><FieldRef Name='AnnouncementImage' /><FieldRef Name='ApprovalStatus' /><FieldRef Name='ID' /></ViewFields>",
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='ApprovalStatus' /><Value Type='Choice'>Pending</Value></Eq></Where></Query>",     
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var created = $(this).attr("ows_Created");
        var createdby = $(this).attr("ows_Author").split(";#");
        var lastmodified = $(this).attr("ows_Modified");
        var type = $(this).attr("ows_AnnouncementType");
        var title = $(this).attr("ows_Title");
        var pubdate = $(this).attr("ows_PublishDate").split(" ");
        var expdate = $(this).attr("ows_Expires").split(" ");
        var promote = $(this).attr("ows_PromoteToBanner");
        var usebanner = $(this).attr("ows_UseBanner");
        var bannercap = $(this).attr("ows_BannerCaption");
        var appstatus = $(this).attr("ows_ApprovalStatus");
        var image = $(this).attr("ows_AnnouncementImage").split(",");
        var body = $(this).attr("ows_Body");
        var itemid = $(this).attr("ows_ID");
        
        var announcesubqueuerow = "<tr><td>"+created+"</td><td>"+createdby[1]+"</td><td>"+type+"</td><td>"+title+"</td><td>"+pubdate[0]+"</td><td>"+expdate[0]+"</td><td>"+promote+"</td><td>"+usebanner+"</td><td>"+bannercap+"</td><td>"+appstatus+"</td><td><a href='#' id='"+itemid+"' class='approvetoggle'>Approve</a></td></tr>";

        $("#queuecontainer table tbody").append(announcesubqueuerow);
        

        });
    }
});
$("#queuecontainer a").on("click", function (event) {
        event.preventDefault();
        var itemidupdate = $(this).attr("id");
                    
        $().SPServices({
            operation: "UpdateListItems",
            async: false,
            batchCmd: "Update",
            listName: "{ABE655C8-0B43-4421-B555-4B1748D9D1A3}",
            valuepairs: [["ApprovalStatus", "Approved"]],
            ID: itemidupdate,
            debug: false,
            completefunc: function(xData, Status) {
                alert("Announcement Approved");
            }
        });
}); 
I understand if I need more hyperlinks in other columns in the same table I will have to target the selector a bit better but this is good for now.

Thanks,
Dan