Wednesday, July 28, 2010

Update a List Column using JQuery with SharePoint WebServices


Scenario: Click on the image in data View to update the Status on an item.
PreReq: A list with choice column Status (0,1,2).
0 represents Not started,
1 represents In Progress and
2 represents Completed.

You need two libraries:
1. JQuery (jquery-1.4.2.js)
2. SPServices (jquery.SPServices-0.5.6.min.js)

Add following code in your page in the head, or where ever you want to:

<script type="text/javascript" src="Scripts/jquery-1.4.2.js"></script>  
<script type="text/javascript" src="Scripts/jquery.SPServices-0.5.6.min.js"></script>  
  
<script type="text/javascript">  
  
function UpdateStatusCode(divId, waitMessage, ID, StatusCode)  
  {  
    
   //alert(divId +" "+ waitMessage +" "+ ID + " " + StatusCode);  
   if (confirm ("Are you sure you want to update the status of the selected event?"))  
   {  
    StatusCode = StatusCode + 1;  
      
    if (StatusCode < 3)  
    {  
     $(divId).html(waitMessage).SPServices({  
     operation: "UpdateListItems",  
     listName: 'Events',  
     ID: ID,  
     valuepairs: [["Status", StatusCode]],  
     completefunc: function (xData, Status) {  
      var out = $().SPServices.SPDebugXMLHttpResult({  
       node: xData.responseXML,  
       outputId: divId  
      });  
        
      window.location = RefreshPageURL('Default.aspx');  
  
      }  
     });  
    }  
    else  
    {  
     alert('This event is already completed.');  
    }  
   }  
  }  
</script>  

Place the following div where you want to display the status column in the DataView Webpart. XSL in the <div> will display the relevant image and click event on the div will call the UpdateStatusCode() function to update the value on StatusCode column via JQuery and then page will get refreshed to show the right image based on the updated value.

<div id="div+{@ID}" onclick="UpdateStatusCode('div'+{@ID}, 'Updating', {@ID}, {@Status});">  
<xsl:if test="@Status = '0'"><img src="images/NotStarted.png"></xsl:if>  
<xsl:if test="@Status = '1'"><img src="images/InProgress.jpg"></xsl:if>  
<xsl:if test="@Status = '2'"><img src="images/Completed.jpg"></xsl:if>  
</div>  



JQuery makes life easy :o).

Publiahing Sites vs Communication Sites

It was announced in SharePoint Virtual Summit in May 2017, a more modern way of content publishing is released called Communication Sites. ...