All About SharePoint

Liedong(Ken) Zheng,SharePoint Leader at SIMPLOT

Posts Tagged ‘jQuery’

JQuery For SharePoint Calendar

Posted by ken zheng on September 30, 2011

Recently I spent some time on developing a resource booking calendar. Use quite lot of JQuery to color the screen, change the feel.

One key find is in the JavaScript you need to be careful about the time for the script to run.

For example, one of the challenges I have is when user double click the calendar, a new event window pop up. but because I have allowed all resources showing. All resources are in the right select box.

image

so the script I need is to move them to the left select.

Below is the script I am using

<script type="text/javascript">
/* 
* Hide form fields in SharePoint 
*/ 
$(document).ready(function() { 
$('nobr:contains("Recurrence")').closest('tr').hide(); 
$('nobr:contains("Description")').closest('tr').hide(); 
$('nobr:contains("Workspace")').closest('tr').hide(); 
$('nobr:contains("Category")').closest('tr').hide(); 
$('nobr:contains("Returned")').closest('tr').hide(); 
$('nobr:contains("Collected")').closest('tr').hide();
$('nobr:contains("Comments")').closest('tr').hide();
$('nobr:contains("Title")').closest('tr').hide();

$('a.ms-cui-tt-a').last().hide();

});

_spBodyOnLoadFunctionNames.push('MoveResources');

function MoveResources(){
 $("select[title='Resources selected values'] option").appendTo($("select[title='Resources possible values']"));
 $("select[title='Resources selected values'] option:selected").click();
 $('button:contains("Add")').removeAttr("disabled");    
 $('button:contains("Remove")').attr("disabled", "disabled"); 
}	
</script>

 

You can see from the script, I am using $(document).ready(function() to hide unrequired fields, but you will have to put the code in Page Load Add function.

In most cases SharePoint pages are based on a master page that contains the “body” element. These content pages can’t directly add a function to the body’s onload event. In order to work around this limitation, SharePoint provides the “_spBodyOnLoadFunctionNames” array. When the body is loaded, the onload event handler executes each function whose name is contained in this array. We added “FunctionName” to the array so that it would run when the body’s onload event fires.

<script language="javascript">  
    _spBodyOnLoadFunctionNames.push("FunctionName");  
    function FunctionName()  
    {  
        // Code  
    }  
</script>

Posted in JavaScript, jQuery, Sharepoint | Tagged: , , | 1 Comment »

Set the Ribbon Initial Tab in SharePoint 2010

Posted by ken zheng on September 29, 2011

To set default tab is quite easy, just need to add a query string to the end of the URL with the InitialtabID function.

/AllItems.aspx?InitialTabId=Ribbon.Library

I had an interesting request recently, they want new form page to only display Brower tab and hide Edit tab.

image

so the new form url will be “/NewForm.aspx?InitialTabId=Ribbon.Read” and JS is

$(‘a.ms-cui-tt-a’).last().hide();

And I also found a good blog to manipulating the ribbon in 2010

http://doseofdotnet.wordpress.com/2011/09/09/manipulating-the-ribbon-in-sharepoint-2010-with-javascript-part-1/

Posted in JavaScript, jQuery, Sharepoint | Tagged: , , , | 6 Comments »

jQuery 1.5 Released

Posted by ken zheng on February 1, 2011

http://blog.jquery.com/2011/01/31/jquery-15-released/

Posted in jQuery | Tagged: | Leave a Comment »

jQuery Ticker for SharePoint Announcement List

Posted by ken zheng on July 23, 2009

By using Scott Price’s code, I add a query to the CAML so it will only display annoucment which not expired.

<script type="text/javascript" src="/Development Library/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="/Development Library/jquery.newsticker.js"></script>
<script type="text/javascript" src="/Development Library/DateUtilities.js"></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/'>"; 
		soapEnv += "<listName>Announcements</listName>"; 
		soapEnv += "<query><Query><Where><Geq><FieldRef Name='Expires' /><Value Type='DateTime'><Today/></Value></Geq></Where></Query></query>"; 
		soapEnv += "<viewFields><ViewFields><FieldRef Name='Title'/><FieldRef Name='Created'/><FieldRef Name='ID'/></ViewFields></viewFields>"; //<RowLimit>1</RowLimit>
		soapEnv += "</GetListItems></soapenv:Body></soapenv:Envelope>";

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

function processResult(xData, status) {        
        var newnews = $("<ul>").attr("class", "newsticker");
        var rows;
        if (xData.responseXML.getElementsByTagName("z:row").length==0)
        {
			var url = "/test/Lists/Announcements/";
            var liHtml = "<li class='newscontent'> <b> No Latest News <br><br><a href='" + url + "'>Read All"+"</a></b></li>";
            newnews.append(liHtml);
        }
        else
        {
			rows = xData.responseXML.getElementsByTagName("z:row");
			jQuery(rows).each(function() {
            var createdDate= $(this).attr("ows_Created").split(" ");
            var url = "/test/Lists/Announcements/DispForm.aspx?ID=" + $(this).attr("ows_ID");
            createdDate = parseDate(createdDate[0]);
            var liHtml = "<li class='newscontent'>" +  formatDate(createdDate ,'dd MMM yy')+ " - <b>" +  $(this).attr("ows_Title")+ "<br><br><a href='" + url + "'>Read Details"+"</a></b></li>";
            newnews.append(liHtml);
        });
        }
        
        

        newnews.appendTo("#tasksUL").newsTicker();
    }
</script>

<style type="text/css">
.newsticker {
list-style-type: none;
height:50px;
color:#336699;
margin-top: 10;
}

.newscontent{
list-style-type: none;
margin-left: 0;
display: inline;

}

.news{
background: url(/_layouts/1033/IMAGES/SIMCENTRAL/link_m.gif) no-repeat  scroll center top;
width:240px;
}

.marktop {
background:transparent url(/_layouts/1033/IMAGES/SIMCENTRAL/link_t.gif) no-repeat scroll center top;
height:11px;

padding:0;
width:240px;
}

.markbottom {
background:transparent url(/_layouts/1033/IMAGES/SIMCENTRAL/link_b.gif) no-repeat scroll center top;
height:11px;
margin-left:0;
padding:0;
width:240px;
}
.markcenter {
height:auto;
margin-top:10;
padding:0;
width:211px;
}
</style>
<div class="markcenter">
<div class="marktop"/>
<div class="news">
<br>
<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Noticeboard</b>
<div id="tasksUL" 
</div> 
</div>
<div class="markbottom"/>
</div>


Posted in Uncategorized | Tagged: , | 7 Comments »

Hide Search Context DropDown List in SharePoint

Posted by ken zheng on February 5, 2009

User always want to have a search function for current site, so I use the JQuery to hide the drop down list. First allow your Context Drop down and set it default to this site.
Then add this Javascript, just replace the id

  $("#ctl00_m_g_6320b784_9efb_43c3_a98c_e579abb4311b_SBScopesDDL").css({display:'none'});

Posted in Sharepoint | Tagged: | Leave a Comment »

Replace Global Links In SharePoint Using JQuery

Posted by ken zheng on February 4, 2009

Below is the JQuery Script to replace the first link of Global Breadcrumbs and you can replace text as well

<script type="text/javascript">
$(document).ready(function(){

//To replace the Global Breadcrumbs
$("#ctl00_PlaceHolderGlobalNavigation_PlaceHolderGlobalNavigationSiteMap_GlobalNavigationSiteMap").children(":first").children(":first").attr("innerText","SimCentral");

$("#ctl00_PlaceHolderGlobalNavigation_PlaceHolderGlobalNavigationSiteMap_GlobalNavigationSiteMap").children(":first").children(":first").attr("href","http://hotmail.com");

//To hide the Global Breadcrumbs
//$("#ctl00_PlaceHolderGlobalNavigation_PlaceHolderGlobalNavigationSiteMap_GlobalNavigationSiteMap").css({display:'none'});
});


</script>

Posted in Sharepoint | Tagged: | 2 Comments »

JQuery Expand/Collapse All Groups in SharePoint

Posted by ken zheng on January 14, 2009

Just follow the idea of JQuery for Everyone: Expand/Collapse All Groups. I have deployed on a few SharePoint Pages by control id. Just use IE Dev Tool to get control id and replace
$("td.ms-toolbar[width='99%']").append(expandAll).append(collapseAll);
to
$("#ctl00_m_g_2e4a2a42_7e54_4a6e_ba80_923f50d3f0d5_Message").append(expandAll).append(collapseAll);

Posted in jQuery, Sharepoint | Tagged: , | Leave a Comment »

Use JQuery Intellense in VS 2008

Posted by ken zheng on December 7, 2008

Download Hot-fix from Microsoft, In particular, if you are using Windows Vista with UAC enabled, make sure to extract the patch to a directory other than “c:\” (otherwise you’ll see an access denied error).

To verify that this hot-fix patch successfully installed, launch VS 2008 and select the Help->About menu item. Make sure that there is an entry that says ‘Hotfix for Microsoft Visual Studio Team System 2008 Team Suite – ENU (KB946581)’.

If you ever want to remove the patch, go to Control Panel -> Add/Remove Programs and select “Hotfix for Microsoft Visual Studio 2008 – KB946581” under Microsoft Visual Studio 2008 (or Visual Web Developer Express 2008) and click “Remove”.

Now download jquwey-1.2.6-intellisense.js.

Just reference in your web page , you are ready to go.

http://www.mustafaozcan.net/en/post/2008/10/26/ResolveUrl-and-JavaScript-Intellisense-in-Visual-Studio.aspx

Posted in JavaScript | Tagged: | 2 Comments »

ASP.NET, ASP.NET AJAX, jQuery, IIS Tutorial

Posted by ken zheng on October 11, 2008

Scoot Gu has blogged a list of links to these technoloies. Check it now and refresh your knowledge
http://weblogs.asp.net/scottgu/archive/2008/10/10/october-10th-links-asp-net-asp-net-ajax-jquery-iis.aspx

Posted in Uncategorized | Tagged: , , , | Leave a Comment »

jQuery to ship with ASP.NET MVC and Visual Studio

Posted by ken zheng on October 1, 2008

jQuery is a lightweight open source JavaScript library (only 15kb in size) that in a relatively short span of time has become one of the most popular libraries on the web.

Scott Hanselman is also about to post a nice tutorial that shows off integrating jQuery with ASP.NET AJAX (including the new client templating engine) as well as ADO.NET Data Services (which shipped in .NET 3.5 SP1 and was previously code-named “Astoria”).

Posted in Uncategorized | Tagged: | Leave a Comment »

 
Follow

Get every new post delivered to your Inbox.

Join 28 other followers