ST 4U 125: Using JQuery with Seaside
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:
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
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.
Enclosures:
[st4u125-iPhone.m4v ( Size: 4253300 )]