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