Today I recorded the Taking Notes podcast episode 157 with Bruce Elgort and Julian Robichaux and Bruce asked me “so how would someone get started in jQuery – you know like a Hello World kinda example” and I had to say – well you wouldn’t do that in jQuery – you would just do a JavaScript alert.

<script>
	alert('Hello World')
</script>

A better beginner example would be to use a selector to get all the blank fields on a form, turn them red and notify the user. It is a good question though and I will write an article on that in the near future…..

So what about Hello World in a jQuery plugin?

In hindsight, though I guess you could do what Bruce asked for – and if you HAD to….then you could use Pines Notify and do something like this, but I don’t think that is quite what he meant and this is not the beginners example he was looking for 🙂

Add your Pines Notify library and CSS to your XPage (just like in the previous article)

	<xp:this.resources>
		<xp:script src="js/jquery.pnotify.min.js" clientSide="true"></xp:script>
		<xp:styleSheet href="css/jquery.pnotify.default.css"></xp:styleSheet>
		<xp:script src="js/jquery-1.7.1.min.js" clientSide="true"></xp:script>
		<xp:styleSheet href="css/jquery.custom-theme/images/jquery-ui-1.8.18.custom.css"></xp:styleSheet>
	</xp:this.resources>

And then Create your Hello World notification

			<xp:button value="Hello World Example" id="button3" styleClass="btn source">
				<xp:eventHandler event="onclick" submit="false">
					<xp:this.script>
						<![CDATA[$.pnotify({
					pnotify_title: 'Just for Bruce and Julian!',
					pnotify_text: 'Hello World.',
					pnotify_type: 'error'
					});]]>
					</xp:this.script>
				</xp:eventHandler>
			</xp:button>

Giving me what Bruce asked for 🙂

In all seriousness – thank you so much to Bruce and Julian for giving me the opportunity to be a guest in the Taking Notes Podcast – it was a blast and I know I join an elite group of people who’ve had the pleasure in the last 7 years 🙂

Marky