Delete list items with Web Services and JQuery

We can delete multiple list items calling UpdateListItems web method from Lists.asmx web service provided by SharePoint. This method can be called using JQuery ajax method.

In my example I want to delete more items from a list knowing the items id’s. In user interface I have a collection of checkboxes with “id” attribute as id of the list item. Using a selector we obtain the collection of checkboxes, and build using the id attribute of checked one’s the batch that we will send to web method. “Tests” is the list name where I want to delete. For each item we have to add a Method with a distinct id.

function DeleteSelected() {
     var chkcoll = $("myselector");
     var fields = "";
     chkcoll.each(function(i){
        if($(this).attr('checked') == true)
        {
            fields += "<Method ID=\""+$(this).attr('id')+"\" Cmd=\"Delete\"><Field Name=\"ID\">" + $(this).attr('id') + "</Field></Method>";        
        }
     });
     
     var batch = "<Batch OnError=\"Continue\">" + fields + "</Batch>";
     var soapEnv = BuildSoapEnv(batch, 'Tests');             
     theAjaxCallForUpdate(soapEnv, onSuccessDelete);    
 }  

function BuildSoapEnv(batch, listname)
 {
     var soapEnv =
            "<?xml version=\"1.0\" encoding=\"utf-8\"?> \
            <soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" \
                xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" \
                xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> \
              <soap:Body> \
                <UpdateListItems xmlns=\"http://schemas.microsoft.com/sharepoint/soap/\"> \
                  <listName>" + listname + "</listName> \
                  <updates> \
                    " + batch + "</updates> \
                </UpdateListItems> \
              </soap:Body> \
            </soap:Envelope>";
    return  soapEnv;       
 } 

To avoid the “The security validation” error thrown by the web service, the SOAPAction header must be provided using beforeSend option.

The functionToCall is another function that you can call when the web method call is completed for some action that have to take place after. Also “success” option can be used and perform actions only if the calling of the web method was successfully.

function theAjaxCallForUpdate(soapEnv, functionToCall)
{    
    $.ajax({
            url: textWebUrl + "/_vti_bin/Lists.asmx",
            beforeSend: function(xhr) {
                xhr.setRequestHeader("SOAPAction","http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");},     
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: functionToCall,
            contentType: "text/xml; charset=\"utf-8\""
        });   
}

function onSuccessDelete()
 {    
    // do something
 } 

The textWebUrl is a variable that contain the web url. We set this from our .cs code. The scripts are stored in a separate folder in _layouts. The entire Jquery script for calling the web service is in MyScript.js file. This file must be copied into _layouts/JQuery folder together with the last version of JQuery.

StringBuilder sbJQ = new StringBuilder();
sbJQ.Append("<script type=\"text/javascript\" src=\"_layouts/JQuery/jquery-1.3.2.min.js\"></script>");                        
sbJQ.Append("<script type=\"text/javascript\">").Append("var textWebUrl='"+this.Web.Url+"';").Append("</script>");            
sbJQ.Append("<script type=\"text/javascript\" src=\"_layouts/JQuery/MyScript.js\" ></script>");

if (!Page.ClientScript.IsClientScriptBlockRegistered("scriptkey"))
{
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "scriptkey", sbJQ.ToString());
}

Select parents in a TreeView using JQuery

The requirement is to be able to select the parents of a node in a TreeView if a child is selected. Not only the first parent, all parents and to be able to unselect after if we want.

If we look at generated source code we will notice that the parent node is in a div tag. Inside this div are the childrens inside a table/tr/td tags. So we must look for checkboxes inside a table data, table that is nested into a div. Is better to assign an attribute to the tree to be more easy to find. I added  the attribute “cipg” with the value “mpower”. The id of the tree is “theOne”.

The code below solve this requirement. I’m sure this can be improved.

<script type="text/javascript"> 

function applyToParent(parent, treeId) 
{
    var actualId = treeId+'theOne'; 
    if (parent.attr('id')!= actualId) 
    { 
        var parentId = parent.attr('id').replace('Nodes', ''); 
        var theOne = $("div[cipg='mpower'] table tr td input[type='checkbox'][id^='"+parentId+"']"); 
        theOne.attr('checked', true); 
        applyToParent(GetParent(theOne), treeId); 
    } 
}

function GetParent(theCurrent) 
{
    return theCurrent.parent().parent().parent().parent().parent(); 
}

function checkTheParent() 
{ 
    if($(this).attr('checked') == true) 
    { 
        var theParent = GetParent($(this)); 
        var currentId = $(this).attr('id'); 
        var treeId = currentId.substring(0,currentId.indexOf('theOne')); 
        applyToParent(theParent, treeId); 
    } 
}

$(document).ready(function(){ 
    $("div[cipg='mpower'] table tr td input[type='checkbox']").bind('click', checkTheParent); 
});

</script> 

Single check on a TreeView

In the past I showed how to bind a TreeView control to a xml data source. Now the task is to allow selection of none or only one node from this control.

An ideea is to implement this using JQuery. A friend introduced me to this scripting language and now the solution seems simple. I’m sure that it can be improved but is my first contact with JQuery so have mercy.

The only thing that we have to do is to add some new code to the existing TreeView solution.

To display all checkboxes for the tree in order to be able to do the selection we have to set the ShowCheckBoxes property.

TreeView tv = (TreeView)Page.FindControl("ChapterTree");
tv.ShowCheckBoxes = TreeNodeTypes.All;

And this are all modification that we must to into the .cs file. Now we must open the .aspx page and add some lines. Of course  the first that we have to add is the reference to the jquery.js file. You can download this file from the JQuery site and have the latest version.

To be able to access our TreeView checkboxes we have first to take a look into the source code of the page. We will see that our controls have a generated ID. What we can do to access our control is to attach an attribute and search by this attribute. We must notice that our checkboxes are created into some cells of a html table. To access  them we have to create a selector that go from the TreeView control to our checkboxes.

$("div[myAttribute='myValue'] table tr td input[type='checkbox']")

After that we have to bind a function to each of our checkboxes. In this function we unselect all other and select the current node.

Below is all the code that must be added into the head tag:

<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
function aClick() { 
  var allNodes = $("div[myAttribute='myValue'] table tr td input[type='checkbox']");   
  allNodes.bind('click', aClick);
  allNodes.attr('checked', false);
  $(this).attr('checked', true); 
  $(this).unbind('click', aClick);
}
  
$(document).ready(function(){       
     $("div[myAttribute='myValue'] table tr td input[type='checkbox']").bind('click', aClick);          
 });
</script>

Now all seems to be simple. From today I start to apreciate JQuery.

Have a nice one !