<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>MarkvanAalst.com &#187; JQuery</title>
	<atom:link href="http://www.markvanaalst.com/tag/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.markvanaalst.com</link>
	<description>Sharing Sitecore tips, tricks and techniques to build better solutions</description>
	<lastBuildDate>Wed, 25 Jan 2012 11:09:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Using JQuery in custom fields</title>
		<link>http://www.markvanaalst.com/2010/02/18/using-jquery-in-custom-fields/</link>
		<comments>http://www.markvanaalst.com/2010/02/18/using-jquery-in-custom-fields/#comments</comments>
		<pubDate>Thu, 18 Feb 2010 17:27:38 +0000</pubDate>
		<dc:creator>Mark</dc:creator>
				<category><![CDATA[Custom field]]></category>
		<category><![CDATA[Sitecore]]></category>
		<category><![CDATA[JQuery]]></category>

		<guid isPermaLink="false">http://www.markvanaalst.net/?p=99</guid>
		<description><![CDATA[At the moment I&#8217;m creating a custom field for tagging content items. I prototyped my custom field in html using JQuery. But when I wanted to convert this to the actual custom field I ran into a problem. As you might know Sitecore uses the Prototype library for all of it&#8217;s javascript. And prototype uses the same dollar sign for all of its functions and variables as JQuery does. But JQuery provides a noConflict function [...]]]></description>
			<content:encoded><![CDATA[<p>At the moment I&#8217;m creating a custom field for tagging content items. I prototyped my custom field in html using JQuery. But when I wanted to convert this to the actual custom field I ran into a problem. As you might know Sitecore uses the Prototype library for all of it&#8217;s javascript. And prototype uses the same dollar sign for all of its functions and variables as JQuery does. But JQuery provides a <a href="http://api.jquery.com/jQuery.noConflict/">noConflict</a> function where you can reassign the default $.</p>
<p>But then came the next challenge. I needed to use the noConflict function before all other javascript was called. Luckally I remembered that I have seen it before in other custom fields that are on the <a href="http://trac.sitecore.net/Index/">Shared Source</a> environment. So I started browsing the source code of Alexey Rusakov&#8217;s project (<a href="http://trac.sitecore.net/FieldTypes/">Sitecore Fieldtypes</a>) and I found the <a href="http://svn.sitecore.net/FieldTypes/trunk/sitecore%20modules/Outercore.FieldTypes/Common/InjectScripts.cs">InjectScripts</a> class which provides an option to add HTML to the section of the Content Editor. There I just added a reference to my JQuery library and off course calling the .noConflict funtion.</p>
<p>[sourcecode language="csharp"]</p>
<p>namespace Sitecore.SharedSource.Taxonomy<br />
{<br />
class AddScripts<br />
{<br />
public void Process(PipelineArgs args)<br />
{<br />
if (Sitecore.Context.ClientPage.IsEvent)<br />
return;</p>
<p>HttpContext context = HttpContext.Current;<br />
if (context == null)<br />
return;</p>
<p>Page page = context.Handler as Page;<br />
if (page == null)<br />
return;</p>
<p>Assert.IsNotNull(page.Header, &#8220;Content Editor <head> tag is missing runat=&#8217;value&#8217;&#8221;);</p>
<p>string[] scripts = new[]<br />
{<br />
&#8220;/sitecore modules/Shell/Taxonomy/jquery-1.4.1.min.js&#8221;<br />
};</p>
<p>foreach (string script in scripts)<br />
{<br />
page.Header.Controls.Add(new LiteralControl(&#8220;<script type='text/javascript' language='javascript' src='{0}'></script>&#8220;.FormatWith(script)));<br />
page.Header.Controls.Add(new LiteralControl(&#8220;<script type="text/javascript">$.noConflict();</script>&#8220;));<br />
}<br />
}</p>
<p>}<br />
}</p>
<p>[/sourcecode]</p>
<p>So now I can call my JQuery by using &#8220;jQuery&#8221; in stead of &#8220;$&#8221; and the field works.</p>
<p>In my opinion this is just an example of how the Shared Source environment can help you. So if you have created a module, field or any thing else please put it on the Shared Source environment so others can benefit from it.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.markvanaalst.com/2010/02/18/using-jquery-in-custom-fields/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

