I went back to the music section, and redid the AJAX code I used. I remembered the Prototype library (prototype.js) I was using for the lightbox had its own AJAX object class – which was much more comprehensive than my implementation (error handling, browser support, etc).
I thought that since I was already using the framework anyways, might as well redo my functions altogether to utilize it. While the documentation had example codes, like any other site, I noticed that usually they always include a fixed “target” in the function. Meaning if you have a certain AJAX operation you wish to perform, the function usually took in the URL which you specify, but plugs it into a set target. While this is easily fixed, I was simply baffled as to why they don’t make it a standard to “assume” people would want at least to specify both the url and target as a default.
So I came up with code which I dubbed “InstA-JAX” to do just that. I’m sharing it here since I figured that anyone I know who is remotely interested in implementing rudimentary AJAX functionality might find it very useful as it doesn’t require them to “think” anymore hehehehe. – just plug it in, markup your HTML the proper way and you should be good to go.
Here’s the code. Just drop it somewhere between your <head> tags – or import it via .js file if that’s your thing.
As an example, your HTML code would look something like this:
<!-- HERE ARE YOUR TRIGGERS -->
<p>
<span onlick="loadXML('/path/to/your/data','demo_target1')">
Load data to demo_target1
</span>
<br />
<span onlick="loadXML('/path/to/your/data','demo_target2')">
Load data to demo_target2
</span>
</p>
<!-- HERE ARE YOUR DESTINATIONS -->
<p />
DIV container for demo_target1:
<div id="demo_target1">Default content before data is loaded</div>
DIV container for demo_target2:
<div id="demo_target2">Default content before data is loaded</div>
Basically, in simple english, what I just demonstrated is two links, which can load data into two different target using the same javascript function. The key here is the trigger function in the html which is: loadXML('SOME_FILE_TO_LOAD','DESTINATION_DIV_ID') which basically says “Hey loadXML, could you be a dear and load SOME_FILE_TO_LOAD into DESTINATION_DIV_ID for me?
Let’s now try it inside this blog entry. I’ll use the same code above, this time using legitimate paths to the data they’ll pull. I’ll also replace the <span onclick=\"...> with <a href="javascript:...> because that’s just the type of guy I am 🙂
If you’re reading this through an RSS reader, all this won’t work, try visiting the actual entry from the site for a live demo.
Load data to demo_target1 Load data to demo_target2
DIV container for demo_target1:
DIV container for demo_target2:
It’s pretty basic stuff, but you’ll be surprised how all the tutorials out there don’t mention this practical approach at all. It’s also easily modifiable (should you want to “variable-ize” even the pars, method. etc.) But for simple brainless loading of data to an element ID, this should work just fine.
If you find this useful to you, drop me a line and tell me what you think 🙂