During one of my JomSocial adventures I came across a critical error in JomSocial’s popups. What would happen is I would click on any link that would launch the dialog and it would just site there loading the window indefinitely. See the screenshot above.

I scoured JomSocial’s support forum for an immediate answer with no luck. I tried everything from uninstalling the plugin and reinstalling the “azrul.zip” plugin from “com_community_pro_1.6.288.zip -> site/azrul.zip” and still received the error.

After launching FireBug and trying to see why the AJAX request wasn’t returning a page, I received an error that said “404 component not found”.

I’ve also tried following the instructions here:

http://www.jomsocial.com/forum/index.php?f=7&t=14448&start=0&rb_v=viewtopic

I managed to find a solution to the error, and it dealt with reinstalling the system. I guess some components didn’t install successfully during the first installation.

The Solution:

1. Reinstall the “com_community_pro_x.x.xxxx.zip” component.
2. After installation completes, go to “Extensions -> Plugin Manager” and find “Azrul System Mambot For Joomla”.
3. It should be disabled, you should now enable it.
4. Go to “Extensions -> Extension Manager” then to “Plugins” and find “Azrul System Mambot For Joomla” and assure that its showing up in the list of plugins.

In short, reinstall JomSocial and enable the system plugin.

1. Fancy JavaScript alerts, dialogs, and validation.
2. JavaScript assets that will distributed to subsites / satellite sites.
3. Of these sites, some may or may not already have these assets already defined.

What I’m referring to specifically is jQuery. While building a tasty and user-friendly form.. I needed a way to check to see if jQuery didn’t exist, and if it didn’t include it dynamically by append it to the HEAD tag. This is commonly referred to ‘including jQuery dynamically’. Often times different phrases such as ‘check to see if jQuery is defined’, ‘lazy load jQuery’, ‘!window.jQuery’

Here is the JavaScript code to make the magic happen.

if(!(window.jQuery && window.jQuery.fn.jquery == '1.3.2')) {var s = document.createElement('script');s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');s.setAttribute('type', 'text/javascript');document.getElementsByTagName('head')[0].appendChild(s);}

As a recap, here is what the snippet above does. “Check to see if jQuery is defined. If it’s not, grab jQuery from Google’s API and include it in the HEAD tag”.

XZero Scripts

With an strong and eager community helping to further the development of the script, many people have taken the liberty to release their own mods. One modification we thought would be awesome to give back to the community is the expanding drop-down city list in the right side bar. Interested? Great!

You’re probably asking yourself “what’s the catch”? Truth be told, just a simple 1 file replacement. Follow these steps:

–> Download ‘cities.inc.zip’

Installation

1. Open ‘cities.inc.zip’ and extract the file ‘cities.inc.php’ to your computer / desktop.
2. Open your favorite FTP program and upload ‘cities.inc.php’ to the root of your XZero Classifieds installation. This WILL replace the old ‘cities.inc.php’ that came packaged with your original installation.

That’s it!

Enjoy!

Developer Notes

The drop down uses the jQuery framework for its animations. The framework is being remotely downloaded using Google’s JavaScript API script (jsapi).

Download Free jQuery Cities Drop down Mod for XZero Classifieds (1.51kb)
Downloaded 857 times.

What is Google AJAX API?

Google’s AJAX APIs let you implement rich, dynamic web sites entirely in JavaScript and HTML. You can add a map to your site, a dynamic search box, or download feeds with just a few lines of JavaScript.

In human terms, it loads common JavaScript frameworks such as MooTools, jQuery, Prototype, jQuery UI and of course even Google Maps without having to have the (.js) files on your server.

That’s great, but what does that mean for me?

Bandwidth, bandwidth, bandwidth, cache headers, and bandwidth.

Because jQuery, like images, must be downloaded onto the users computer before it can be used. If you have a slow server this can be a painful process especially if you use multiple JavaScript libraries.

Google is lightning fast, always. To have one, maybe two less items to download from your server not only saves bandwidth, but it saves you time. You don’t have to go to jQuery and download the latest version, upload it to your server, and type in the path to the (.js) file. You also don’t have to worry about having relative or absolute URLs due because of pretty URLs (seo friendly URLs).

You just add a two lines of code to the head of your template, sometimes even one, and you’re done. Google automatically sends a request to their server to download all of the JavaScript you’re requesting, cache the headers, and return it back to you.

Even better yet, the code is cleaner. You only need one line of code to load in multiple JavaScript libraries instead of your usual 3-5 lines of code.

Enough already, just show me how

Glad you asked. Below is the example XHTML page used to load in jQuery and execute a test function to ensure that it works.

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">$(document).ready(function(){$(".expanded").hide();$("a").click(function(){$(".expanded").fadeIn(600);});})</script>
 
<p class="expanded">Who uses paragraphs anymore?</p>
 
<a href="#">Expand!?</a>

Now, we’ve loaded in jQuery and are able to get cracking away. However, what if we want to add more than one library? Simple. All we do is add another instance of google.load();. Below is an example with both jQuery and jQuery UI.

<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>

Want to use the latest version of jQuery so you never have to update the code to match the latest version? No problem use this instead.

<script type="text/javascript">google.load("jquery", "1.3");</script>

What this says is: “Find the latest stable release that starts with 1.3.x”. In our case it automatically found v1.3.2.

Pretty nifty eh? What’s even better is that jQuery THEMSELVES are using Google’s server to call their own JavaScript library. If you view the source code of http://www.jquery.com/ you’ll see on Line 9 the following code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

This is also another way of calling jQuery from Google’s servers.

That’s it! Enjoy one less heavy server request.