How to add jQuery to Ning apps?

[Alexis Bellido]

Hello, I was wondering what's the suggested way of adding jQuery to my Ning apps with OpenSocial.

Do you have some suggestions or examples?

Thanks!

[Nathan Finstein]

just put a script tag with src attribute in the html for each view that needs it, as below. Beware, that <script src='....' /> doesn't work, must have distinct start end end script tags <script src='....'></script>

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Indivo 0.1" height="400" scrolling="true">
<Require feature="views" />
<Require feature="opensocial-0.8"/>
</ModulePrefs>
<Content type="html" view="profile">
<![CDATA[
<script type="text/javascript" src="http:// your site specific url stuff here /jquery-1.2.6.js"></script>
<p> ......

]]>
</Content>
<Content type="html" view="canvas">
<![CDATA[
<script type="text/javascript" src="http:// your site specific url stuff here /jquery-1.2.6.js"></script>

[Alexis Bellido]

Hi Nathan, I noticed I could use x$() to access jQuery 1.2.6 that is already included with Ning. For example:

x$('a').html('test');

would change all my links's text into 'test', however; this does not affect the HTML for my Ning app, which is contained in an iframe.

[Alexis Bellido]

Here's a question similar to mine but with no answer yet:

http://developer.ning.com/forum/topics/1185512:Topic:157059

Anybody can help?

Thanks!

[Alexis Bellido]

Ok, I think I've found the answer. Here's what I've done to get jQuery working with my OpenSocial app in Ning:

1. I'm using jQuery from Google, http://code.google.com/apis/ajaxlibs/ , but you could use a copy hosted at your server. This is what I include in the Content element of my specification file:

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.setOnLoadCallback(yourFunctionWithjQueryHere);
</script>

<script>
gadgets.util.registerOnLoadHandler(init);
</script>

The functions init and yourFunctionWithjQueryHere are in the file http://example.com/mycode.js, that's where I also have most of the Javascript code related to my application.

I also tried removing the call to google.setOnLoadCallback and just using this inside the init function:

$(document).ready(function() {
// my jQuery code here
});

and my jQuery stuff worked but I was getting an error related to Dojo in Firebug's console so I decided not to go that way. A little weird if, as I think, Dojo is no longer used by Ning. I preferred to stay with Google's recommended way of adding jQuery.

What do you think? Is this the best way of adding jQuery to our OpenSocial apps on Ning?

Wouldn't it be nice if we could just reuse the jQuery already provided by Ning and so we avoid the call to Google or any other external server with jQuery? Why isn't that jQuery, or an updated version version, available to OpenSocial apps in Ning?

[Alexis Bellido]

I gave it another try to avoid using Google's functions and just get jQuery and it worked without the Dojo error now, this is what I did:

Added this to my Content element in the XML file:

<script src="http://example.com/mycode.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
gadgets.util.registerOnLoadHandler(init);
</script>

You include all your Javascript code in http://example.com/mycode.js an the function init in there contains:

$(document).ready(function() {
// your jQuery code here
});

[SocialNetworkMods.com]

Google for "opensocial jquery library" and you will find a specialized library built for use in opensovcial. It works, I use it. Check out my code at www.ozwebspace.com/os/rewards.xml

[Ernie H.]

Hi Alexis,

Because Ning Apps, like all OpenSocial gadgets, run in it's own separate frame space, you can include a standard jquery library as regular and it should run okay.

While this is 100% complete yet, we built a template to display a standard look and feel across social networks, even if the network creator has changed the theme:

http://os.ning.com/devapps/tutorials/generic-ningapp-template.xml

Note the script tag which includes http://jqueryui.com/latest/jquery-1.3.2.js and http://jqueryui.com/latest/ui/ui.core.js . We plan on cleaning this up more over the next couple of iterations.

Thanks,
- Ernie