the singularity of being and nothingness
Posts tagged AJAX
AJAX Gotcha…POST vs. GET
Jun 12th
A rather annoying issue I ran into this evening when testing my up-and-coming CSS gallery on a live server was that all of my cross-domain AJAX calls were failing in Firefox. I'm used to stuff failing for stupid reasons in IE, but this one was unique. I tested in Safari (for Windows), IE 7, and Opera–all of them worked beautifully. But for whatever reason, Firefox horked on the code.
Well, it turns out it was a simple fix. In my AJAX calls, I was using the Spry loadURL() function. For this function, you can specify whether the call should be a "POST" or "GET" method. I assumed for my remote calls that I would be doing POST methods.
After all was said and done, it was apparently the POST methods that Firefox was having a coniption over. I changed the methods really quickly to GETs, and everything worked again in all browsers.
As I am mostly stupid, I have no reason why this happened–however, perhaps this will be useful to some other poor code monkey out there who is betrayed by Firefox in the wee-hours of the night, and maybe a wiser soul would be kind enough to post a comment about More >
Coming Soon…Very Soon!
Jun 10th
Remember the CSS Gallery I wrote about a while ago? Yes, the one that I'm building? Well, IT'S ALMOST DONE!!
I am incredibly excited. The design, I feel, really came together, and the final result is something simple and sleek, but still (at least IMO) memorable.
One of the most exciting things about this project for me is that it's allowed me to flex some ColdFusion 8 muscles–muscles that I have had not yet really had a chance to use until now.
What kind of features are there going to be? I'm glad you asked!
On the client side, I completely Web 2.0-ified the site submission process. When you click "Submit", instead of getting redirected to a form page, I'm using Thickbox to present the form. The form itself is pretty sweet, too. First, there's a fairly interesting hint tool that I developed. But the power of the form is that not only does it check the XHTML and CSS validation on the site you enter while you're finishing up the form, but even the form submission itself is AJAXed. No stupid submit and refresh here!
Once a site submission is approved and live, each site will have comments attached, as well as a rating mechanism. As More >
Spry's Rating Widget
Apr 16th
For a new project I'm working on, I will need a mechanism for users to vote on certain pieces of content. Now it turns out that there are a billion and one ways of doing this, with an additional billion sets of frameworks. I was quite overwhelmed by the number of choices, so I've been putting it off for a while now.
Yet fortuitously, a couple days ago I was browsing the Spry docs and noticed two very promising words: Rating Widget.
Surely this cannot be what I'm looking for, could it? Ah but it was!
Recently, Spry updated its growing library of widgets to include a standard "star" rating system. Like it's other widgets, the rating widget comes with a single css file and a single javascript file. And also like other Spry widgets, it is completely simple to implement.
Assuming you have referenced the css and javascript files correctly, here's all it takes to set up a star rating system:
<span id="myrating" class="ratingContainer"> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <input type="text" id="ratingValue" name="dynamic_rate"/> <span class="ratingRatedMsg">Thanks for voting !</span> </span>
It's so simple it's almost laughable. But it gets much better. Like all More >
Unobtrusive JavaScript…Duh!
Apr 15th
As I develop more applications that leverage JavaScript–both for data manipulation AND for superfluous effects–the more I come to realize the inexpressible need for finding as many shortcuts as possible. Without exception, as my JavaScript becomes more involved, so the complexity increases exponentially. To remedy this, I've started relying on frameworks such as Adobe's Spry, mooTools, jQuery, etc. to make my life easier for everything from element selection to major effects processing.
However, probably the biggest time-saver is making a concerted effort to make my JavaScript unobtrusive. What is this, you say? Well, by no means does it have a solidified meaning. However, a few principles are core to any definition.
The first is the idea of abstracting the functionality of JavaScript (be it data handling or effect processing) from the design layer on which the functionality is placed. In short, this means that the HTML markup of a site (and its corresponding CSS) should not be dependent on the functionality of JavaScript; rather, the functionality of JavaScript should be "pluggable" into the markup that it finds.
Now of course, this is all-too-idealistic. There is never a scenario in which markup and functionality are mutually ambivalent towards one another. However, the More >
Adobe's Spry Framework, Part Second
Mar 24th
A couple days ago, I posted an example of how Adobe's Spry Framework allows one to easily and quickly incorporate XML datasets into an application, allowing for a great alternative to page-to-page navigation and data mining.
One of the limitations I pointed out was the initial amount of coding involved. Well, that was because I'm an idiot.
While I've used Spry's Spry.Data.XMLDataSet() many times before, I literally had no idea how powerful it is, nor that it could interact with dynamically generated XML files, such as I was doing with ColdFusion components in my last example. However, such is not the case. Not only does this method allow me to do everything I was doing before, it involves a heck of lot less code. The entire invoke for the datasets here is:
var dsCities = new Spry.Data.XMLDataSet("getlocations.cfc method=getCities", "cities/city");var dsLocations = new Spry.Data.XMLDataSet("getlocations.cfc?method=getLocations&cityID={dsCities::@id}", "locations/location");
Two lines of javascript! Now of course, there is more to handle some of the behaviors…but I have effectively cut out about 100 lines from what I was doing before. Pretty cool!
Finally, the best part about this is it allows me to take full advantage of the framework's "spry:state". With this, one can set different "states" that will fire in relation More >
Why It's Important to Read the Docs…
Dec 20th
This morning, I was working on a bit of code for a dynamic directory search that I am building for work. Because I like the paging options that Spry provides, I decided to wire up Spry to ColdFusion to create some datasets. No big deal.
However, I came across an issue I have not encountered with Spry before. Normally, in the master/detail/filter mode of Spry dataset work, I will load a dataset from ColdFusion on page load and then use Spry to filter these results. The filter parameters normally come from the dataset itself.
For example, here's a run of the mill dataset:
var dsPeople = new Spry.Data.XMLDataSet("com/getpeople.cfc?method=getPeople, "/directory/person");
This will get all the people in my database from the query results of my ColdFusion component. If I wanted to see a detailed view of one of the people, I would simply pass a Spry dataset value (e.g., '@id') to this dataset, and it would handle it nicely.
While this works fine for a small number of records, what if we're talking about tens of thousands? I'm actually not sure how long it would take for Spry to deal with, say, 10,000 personal information records. However, I suspect it would be an arduous task More >
Adobe AIR Rebranded…Again
Nov 15th
Well, Adobe's AIR (Adobe Integrated Runtime) must be getting ready for primetime, for today a brand-spanking new logo was unveiled.
For those who don't know, AIR is a cross-platform runtime that allows developers to create web and desktop applications which leverage languages like ActionScript 3, HTML, Javascript, etc.
AIR has had a mildly interesting development. About a year ago, it was pushed in beta as "Apollo" featuring a rocketship-themed logo. Next, it was suddenly switched over to "AIR" with the standard "new" Adobe branding. Today, however, marks the third rebranding in a year–hopefully the last one.
While I'm not wild about the new logo (I like the Apollo one alot better), I think it indicates a more concerted effort on Adobe's part to make AIR a serious tool for developers to consider.
Sadly, I have only developed a single AIR application. I utilized the Flex architecture, but what I developed could have just as easily been completed in standard HTML and Javascript. Hopefully, in the year to come, I will have an opportunity to play around with it a bit more.
Share this:A Sexy Spry Gallery
Oct 27th
If one has been on the internet for 3 seconds, it is obvious that dynamic photo galleries are useful and popular things. After all, who wants to scroll through pages of pictures when they can all be loaded into one interface that can be controlled like a CD player (remember those…)?
Historically, the best photo galleries have been handled by Flash. After all, it is a super easy thing to do, can be highly stylized and customized, and just generally works well. The attendant problem, however, has been two-fold. Although generally lightweight, Flash is still pretty bulky, and as Interent Explorer has made us painfully aware, is not always treated with open arms by browsers. Second, unless one has gone to trouble of coding to read an XML file, or is using remoting to connect to a database, Flash is just a pain to manage and can be time consuming to make simple additions, deletions, etc.
In recent years, some very good javascript alternatives have popped up. While some are far better than others, the appeal of all is that they are generally less bandwidth expensive than flash and can be *more easily* modified than their flash alternatives.
Spry has made its More >
A Feedreader with Spry
Oct 18th
I know I've been posting alot about Spry lately, but the more I use it, the more I love it! Using the simple-to-implement tools which Spry provides, I am able to spend more time dealing with server-side processing, rather than fighting javascript to get a couple of cool effects.
A few weeks ago, I blogged about using Spry to return confirmation or error messages for a registration form asychronously to alert users to possible errors in their form BEFORE submission.
Today's example is based on the same principle, although more of an "independant app." A week ago, a co-worker and I were talking about the idea of placing a "feed reader" inside of a web page, so that users could not only display links to feeds that they follow, but also allow for the feed to be displayed directly in the page. After our conversation, my thoughts immediately turned to Spry as I was sure a quick, easy solution would be possible.
I was right.
There is really nothing to this. In classic Spry usability-friendliness, this can be accomplished in about two lines of code:
var dsFeeds = new Spry.Data.XMLDataSet("getfeeds.cfc?method=updateFeed", "feeds/feed", { useCache:false });var dsFeedContent = new Spry.Data.XMLDataSet("getfeeds.cfc?method=getFeeds&feedURL={dsFeeds::link}", "rss/channel/item");
The first line creates a Spry More >
A Little Taste of Spry 1.6 Goodness
Oct 3rd
A few days I blogged about Adobe's release (and sexy-fication) of the javascript framework Spry 1.6. While I have not had a lot of time to play around with the absolutely unique elements, some cool additions are the improvements they made to the password verification and confirmation widgets. With the root password widget, the developer can create a pretty robust set of validation rules for user-entered passwords, such as setting minimum and maximum lengths, required special characters/numbers, etc. The best part is that the Spry framework makes these validations incredibly easy to implement on a normal HTML form. For example, here is an example password field I have created:
<span id="passwordValidation"> <input type="password" name="password" id="password" /> <span class="passwordRequiredMsg">Please enter a password.</span> <span class="passwordMinCharsMsg">Your password must be at least 7 characters long.</span> <span class="passwordInvalidStrengthMsg">Your password must contain at least 1 number.</span></span>
That's it. Basically, the entire password widget is a span wrap on the password field. Within this, special validation messages can be defined. On this example, I have set an error message for "required," "minimum characters" and "password strength".
On the function side, the following is all that is required to fully validate this field:
var password = new More >