JQuery: Batch update the list items via Lists.asmx

Quick JQuery script to batch update the list items via Lists.asmx.

I have two lists Projects(Title, ProjectStatus) and Teams(Title, Project, ProjectStatus). Team.Project is a lookup column from Projects.Title and I want to update Teams.ProjectStatus when Projects.ProjectStatus is updated in the Projects list via EditForm.aspx. Now we can link two columns from projects list into the Teams list but can not connect them together in the Teams list, so following script was a great help. It batch updates the Teams.ProjectStatus once Project.ProjectStatus is updated.

Thanks to the this post I found 100% functionality ready to go.

<script type="text/javascript" src="/Scripts/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

var strProject = "";
var strProjectStatus = "";

function PreSaveItem()
{
 strProject = document.getElementById('ctl00_m_g_f2d95e24_befb_49d2_b15f_823d71c9c758_ctl00_ctl04_ctl00_ctl00_ctl00_ctl04_ctl00_ctl00_TextField').value;
 strProjectStatus = document.getElementById('ctl00_m_g_f2d95e24_befb_49d2_b15f_823d71c9c758_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_DropDownChoice').value;
 
 GetProjectID();
  
 return true;
}

function GetProjectID(){

var soapEnv = "<soap:Envelope xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> \
<soap:Body> \
    <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
        <listName>Teams</listName> \
        <query><Query><Where><Eq><FieldRef Name='Project'/><Value Type='Text'>"+ strProject +"</Value> </Eq></Where></Query></query> \
        <viewFields> \
            <ViewFields> \
                <FieldRef Name='ID' /> \
                <FieldRef Name='Title' /> \
            </ViewFields> \
        </viewFields> \
        <rowLimit>99999</rowLimit> \
        <queryOptions xmlns:SOAPSDK9='http://schemas.microsoft.com/sharepoint/soap/' ><QueryOptions/> \
        </queryOptions> \
    </GetListItems> \
</soap:Body> \
</soap:Envelope>";

jQuery.ajax({
url: "/itsglobal/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: ResultMethod,
contentType: "text/xml; charset=\"utf-8\""
});

}

function ResultMethod(xData, status) 
{

    if (status=="success")
    {
        var oldbatch = "";
        $(xData.responseXML).find("z\\:row").each(function() 
        {
            oldbatch = AddTobatch(oldbatch, $(this).attr("ows_ID"));
        });
        
        UpdateTeamItem(oldbatch);
    }

}

function AddTobatch(oldbatch, itemId)
{

//Specify the batch query
var _batch = "<Method ID='1' Cmd='Update'><Field Name='ID'>" + itemId +"</Field><Field Name='ProjectStatus'>"+ strProjectStatus +"</Field></Method>";
oldbatch = oldbatch + _batch;

return oldbatch;
}

function UpdateTeamItem(batch) 
{
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>Teams</listName> \
<updates> \
<Batch OnError='Continue'>" + batch + "</Batch> \
</updates> \
</UpdateListItems> \
</soap:Body> \
</soap:Envelope>";

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

});
}

function updateResult(xData, status) {
if (status != 'success' )
    alert("Update Project Status in Teams library failed");
}


</script>

JQuery: Read list Item via Lists.asmx

Following JQuery script is to get list items using Lists.asmx web service in MOSS 2007:

<script type="text/javascript" src="/Scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript">

//This function will call when OK button will be pressed on a List's default form (e.g. EditItem.aspx).

function PreSaveItem()
{
 var project = "Project A";
 
 GetProjectID(project);
 
 return true;
}

function GetProjectID(project){

var soapEnv = "<soap:Envelope xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> \
<soap:Body> \
    <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
        <listName>Teams</listName> \
        <query><Query><Where><Eq><FieldRef Name='Project'/><Value Type='Text'>"+ project +"</Value> </Eq></Where></Query></query> \
        <viewFields> \
            <ViewFields> \
                <FieldRef Name='ID' /> \
                <FieldRef Name='Title' /> \
            </ViewFields> \
        </viewFields> \
        <rowLimit>99999</rowLimit> \
        <queryOptions xmlns:SOAPSDK9='http://schemas.microsoft.com/sharepoint/soap/' ><QueryOptions/> \
        </queryOptions> \
    </GetListItems> \
</soap:Body> \
</soap:Envelope>";

jQuery.ajax({
url: "/itsglobal/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: ResultMethod,
contentType: "text/xml; charset=\"utf-8\""
});

}

function ResultMethod(xData, status) 
{

    if (status=="success")
    {
        alert(status);
        $(xData.responseXML).find("z\\:row").each(function() 
        {
            alert($(this).attr("ows_ID"));
        });
    }

}

</script>

I have copied this script from the internet and have tweaked it a bit to work with JQuery 1.8 version.

SharePoint 2007 - Save RSS Feed into List using JQuery

The idea is to fetch the RSS feed from multiple sources and then save into the SharePoint 2007 List so that we can perform search, archive the RSS news, display data nicely in Data View etc etc.

The following JQuery script will fetch the RSS feed from multiple sources and then save the data into the SharePoint 2007 list via lists.asmx:

<script src="/Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>


<script type="text/javascript">
  
    function LoadFeed() 
    {
        var varFeedURL = new Array();
            varFeedURL[0] = "http://feeds.bbci.co.uk/news/business/rss.xml";
            varFeedURL[1] = "http://www.ft.com/rss/home/uk";
            varFeedURL[2] = "http://www.ft.com/rss/home/us";

            for (i = 0; i < varFeedURL.length; i++)
            {

                $.get(varFeedURL[i], function(data) {
                    var $xml = $(data);
                    $xml.find("item").each(function() {
                        var $this = $(this),
                            item = {
                                title: $this.find("title").text(),
                                link: $this.find("link").text(),
                                description: $this.find("description").text(),
                                pubDate: $this.find("pubDate").text()
                        }
                        
                        
                        //Show only Today's Items
                        var a = new Date(item.pubDate);
                        var b = new Date(); //Today's Date
                        
                        var msDateA = Date.UTC(a.getFullYear(), a.getMonth()+1, a.getDate());
                           var msDateB = Date.UTC(b.getFullYear(), b.getMonth()+1, b.getDate());
                                                   
                        if (parseFloat(msDateA) == parseFloat(msDateB))
                        {
                        
                            var content = document.getElementById('content');
                            content.appendChild(document.createTextNode(item.title)); 
                            content.appendChild(document.createElement('br'));
                            content.appendChild(document.createTextNode(item.description));
                            content.appendChild(document.createElement('br'));
                            content.appendChild(document.createTextNode(item.link));
                            content.appendChild(document.createElement('br'));
                            content.appendChild(document.createElement('hr'));
                            
                            CreateNewItem(item.title, item.description, item.link);
                        }
                        
                    });
                });
            }
        alert('Done');
    }        
        
        
        function CreateNewItem(varTitle, varDescription, varLink) 
        {
                    var batch =
                        "<Batch OnError=\"Continue\"> \
                            <Method ID=\"1\" Cmd=\"New\"> \
                                <Field Name=\"Title\">" + varTitle + "</Field> \
                                <Field Name=\"Description\">" + varDescription + "</Field> \
                                <Field Name=\"Link\">" + varLink + "</Field> \
                            </Method> \
                        </Batch>";
                
                    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>RSSData</listName> \
                              <updates> \
                                " + batch + "</updates> \
                            </UpdateListItems> \
                          </soap:Body> \
                        </soap:Envelope>";
                
                    $.ajax({
                        url: "http://portalstg.amr.kworld.kpmg.com/_vti_bin/lists.asmx",
                        beforeSend: function(xhr) {
                            xhr.setRequestHeader("SOAPAction",
                            "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");
                        },
                        type: "POST",
                        dataType: "xml",
                        data: soapEnv,
                        complete: processResult,
                        contentType: "text/xml; charset=utf-8"
                    });
                }
                
                function processResult(xData, status) {
                    //alert(status);
                }
        
  
    </script>

<input id="btnGo" onclick="LoadFeed()" type="button" value="Get RSS Data" />

Ref: http://weblogs.asp.net/jan/archive/2009/04/10/creating-list-items-with-jquery-and-the-sharepoint-web-services.aspx

Replacing URL in HTML using JQuery

Scenario:
Sometimes if a list is currupted, Allitems.aspx's HTML starts acting weird and we dont want to spend too much time to dig deep into the problem but want a quick fix and endup fixing the HTML. Same goes here.

Solution:
Following code change the URLs in a page to a predefined URL.

<script type="text/javascript">

 if(typeof jQuery=="undefined")
 {
  var jQsrc="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js";
  document.write(unescape("%3Cscript src='"+jQsrc+"' type='text/javascript'%3E%3C/script%3E"));
 }
</script>

<script type="text/javascript">

$(document).ready(function() {
  //find all hyperlinks in the table holding calendar links and
  //change them to point at the display page instead of the edit page
  $("table[id^='CalViewTable']").find("a[href*='OldForm.aspx']").each(function(){
  var originalUrl = $(this).attr("href");
  var newUrl = originalUrl.replace("OldForm.aspx", "NewForm.aspx");
$(this).attr("href", newUrl);
});
});

</script>

Ref: http://social.msdn.microsoft.com/Forums/en-US/sharepointcustomization/thread/ee519099-e685-4560-9c18-70e4aa62eb39

EMail as Primary Key in List

Problem:
I have been asked a question today from one of the developers in another team that he wants to create a user registration list where emial should be unique for every user. And if user add item with existing email then he should be informed.

Solution:
We know that this functionality does not exist in the OTB SharePoint list features. After googling a bit I found following excellent solution using JQuery:

URL: http://sharepointjavascript.wordpress.com/2009/11/23/sharepoint-lists-or-document-librarys-primary-key-in-selected-field/

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