A simple news ticker by querying SharePoint list items using jQuery

Following example is a simple news ticker web part, which uses the SharePoint’s Lists.asmx web service to retrieve all the list items of the “News” list.

First Create a custom list named “News” and add some list items.

Here we use jQuery in a Content Editor Web Part.

Add a Content Editor Web Part and add following jQuery. I have used a “marquee” tag with some styles.

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript"> 

$(document).ready(function() {   

    var soapEnv ="<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \

                <soapenv:Body> \

                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \

                        <listName>News</listName> \

                        <viewFields> \

                            <ViewFields> \

                               <FieldRef Name='Title' /> \

                           </ViewFields> \

                        </viewFields> \

                    </GetListItems> \

                </soapenv:Body> \

            </soapenv:Envelope>"; 

        $.ajax({

            url: "/_vti_bin/lists.asmx",

            type: "POST",

            dataType: "xml",

            data: soapEnv,

            complete: Result,

            contentType: "text/xml; charset=\"utf-8\""

        });

    }); 

    function Result(xData, status) {

        $(xData.responseXML).find("z\\:row").each(function() {

            var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";

            $("# news ").append(liHtml);

        });

    }  

</script>               

<marquee onmouseover="this.stop();" onmouseout="this.start();">

                <ul id="news">  </ul>

</marquee>

               

<style>

         UL#news {

                     WIDTH: 620px;

                      OVERFLOW: hidden

         }

          UL#news LI {        

                       WIDTH: 600px;    

                       DISPLAY: inline;

                       HEIGHT: 99px;

        }

</style>

JQuery Plugin to validate user inputs and to Add watermarks

JQuery is a JavaScript library that can be used to validate user inputs of our web forms. Following is a jQuery plugin that can be used to validate user inputs. And also to add watermarks.

First function is to add a watermark. Here we need to pass the pattern as a parameter.

Second method is to validate the user inputs. In here if the user input is not valid, then the label will turn to red color. Here need to pass two parameters. Label ID and the regular expression.  

Following image shows how to call the methods:

Following is the aspx page:

Followin image shows the UI:

LinkButton - Not firing click event in second time

Once in my SharePoint web part I had a strange issue with a LinkButton which placed inside a Grid view.

The click event of the link button does not fire for the second time. This issue is fixed by calling the following javascript in linkbutton OnClientClick event as follows:

Javascript:

<script type="text/javascript">

function setFormSubmitToFalse()

{

_spFormOnSubmitCalled = false;

return true;

}

</script>

LinkButton Control:

<asp:LinkButton ID="btnDate" runat="server" HtmlEncode="false" CommandName="Download" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" Text='<%# Eval("Date")%>' OnClientClick="javascript:setFormSubmitToFalse();"></asp:LinkButton>