. .

st4u

ST 4U 125: Using JQuery with Seaside

August 26, 2011 8:11:12.352

Today's Smalltalk 4 You continues the VA Smalltalk Seaside tutorial with Ajax. We'll change the filtering links on the main view to update using JQuery rather than Scriptaculous. If you have trouble viewing it here in the browser, you can also navigate directly to YouTube. To watch now, click on the image below:

Ajax.

If you have trouble viewing that directly, you can click here to download the video directly. If you need the video in a Windows Media format, then download that here.

You can also watch it on YouTube:


In this section we'll change our ajax usage from Scriptaculous to JQuery - this will require a small configuration change, and then the modification of one method. First, go back to the configuration screens for your Seaside system. We'll have to modify both the blogView and blogLogin we set up. ONce you get into the configurations screens for the first of those, scroll down to libraries and open that section up. Move PTGoogleLibrary and PTSTLibrary out, and add in JQGoogleLibrary. If you've forgotten how to get to those screens, then go back to this earlier tutorial

JQuery

With that out of the way, we need to make one change in class BlogMenuView - #renderAjaxLinkOn:for: needs to have the link callback set up for JQuery:


renderAjaxLinkOn: html for: entry
	"Render this component"

		html anchor onClick:
			((html jQuery: #listid) load
				html: [:h | 
					self listComponent updateFilterFrom: entry key.
					h render: self listComponent]);
				url: '#';
			with: entry key

That's it - if you test the application, it should behave exactly as it did when using Scriptaculous.

Next time we'll look at adding CSS to our application

Need more help? There's a screencast for other topics like this which you may want to watch. Questions? Try the "Chat with James" Google gadget over in the sidebar.

Technorati Tags: , ,

Enclosures:
[st4u125-iPhone.m4v ( Size: 4253300 )]

posted by James Robertson

 Share Tweet This