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).

SharePoint WebPart Custom Properties

Add the following piece of code (to create the custom property Password for your custom WebPart) in your WebPart class. Now the property will get displayed under Parameters section in the Property panel of the WebPart as displayed in the screenshot below.

private string _strPassword;


[Browsable(true),
Category("Parameters"),
DefaultValue(""),
WebBrowsable(true),
Personalizable(PersonalizationScope.Shared),
WebDisplayName("Password"),
Description("Network Password")]
public string strPassword
{
    get
    {
        return _strPassword;
    }
    set
    {
        _strPassword = value;
    }
}

Now Access strPassword anywhere in the code to access the value provided by the user.