Integration of jQuery

thumbs_up_ico0thumbs_down_ico0
Hi -

I am looking at getting my feet wet with jQuery + Agile Platform. Are there any tutorials showing how to integrate jQuery in, especially with regards to passing data back to the server? Also, I am barely literate in JavaScript and I've never touched jQuery before. I'm just looking for a way to wrap jQuery stuff in with Agile Platform on an as-needed basis (like getting a better date/time picker).

Thanks!

J.Ja
thumbs_up_ico0thumbs_down_ico0
Hi Justin,
 
The Agile Platform uses a version of jQuery (and some parts of jQueryUI) internally, for stuff like Ajax, Richwidgets and the new mobile support. Because we've made some small fixes to it and don't users to have compability issues with other js frameworks or other versions of jQuery we have an internal name for it and use the noConflict() function. 
 
What this all means is that you can just import any version of jQuery you wish and use it like you would in any other web project.

Let me know if there is anything else you would like to know.
 
Cheers,
Tiago Simões
thumbs_up_ico2thumbs_down_ico0
Just import the jQuery library to the eSpace resources and set the deploy action to Deploy to Target Directory.


Then use the AddJavaScriptTag, from the HTTPRequesthandler extension, to load the library inside the preparation of any screen/weblock. 


Be aware, and this is implied in Tiago's answer, that you will get errors (resulting from conflicts), if you try to load jQuery more than once in the same screen.
This might happen if you're going for widgets, in that case i recommend you create a WebBlock that will only load jQuery (and nothing more) to be placed somewhere BEFORE (loading order is important) the remaining WebBlocks.
thumbs_up_ico0thumbs_down_ico0
I tried the URL is : "/Resources/filename.js" or "Resources/filename.js" or "jWidgets/filename.js" 
the Chrome console shows that it not found
thumbs_up_ico0thumbs_down_ico0
By the way , i'am using googlemap app to display my current location but i don't know how to assign the value of longtitude and latitude to googlemap webblock.
somebody my help me ?

Thank, best wishes.

thumbs_up_ico0thumbs_down_ico0
Something that Chinita forgot to mention is when you create the resource you have a option to choose the directory of deployment, which in his case was jWidgets. Be sure you do not forget it




Best regards,
PC
thumbs_up_ico0thumbs_down_ico0
If you don't select a target directory it just ends up in the eSpace's root path.
In the example I gave, I'm just loading it from there. "/eSpaceName/library.js"
thumbs_up_ico0thumbs_down_ico0
Alternatively you can use nothing ;)

Using "library.js" will also load it from the current eSpace root directory

Best regards,
PC
thumbs_up_ico0thumbs_down_ico0
Pedro, not using the eSpace name in the path implies the resource must be included in each eSpace you want to use it.
Imagine you have a WebBlock, let's say for a calendar, and you're using jQuery.js and Calendar.js and the WebBlock is in eSpace A set as public.

If you want to use it in eSpace B, you'd have to include both resources in eSpace B as well (besides referencing the source block). This means you'd be duplicating resources.
By using the full path, you guarantee that you only have to reference the WebBlock because the libraries will always be loaded from the same path, reducing consumer eSpace deployment and page load times, and improving the speed of code reusability.
thumbs_up_ico3thumbs_down_ico0
Hi,

Theres some other ways to include javascripts in the platform.
Personally I'm not a big fan of the Resource+AddJavaScriptTag way.

Note: all my suggestions are to be done in a WebBlock to make it reusable! Don't hardcode any of it on all your screens.

First alternative is like the one we use in Richwidgets:
Instead of adding the Javascript file in the resources copy the javascript code to a WebBlock Javascript.
When you add that block on a page the javascript is included, and only once (regardless of how many times you use the block on the same screen).


Another alteranative, for stuff like jQuery and if your users have access to the internet (supports both http and https):
On a WebBlock preparation use AddJavaScriptTag of "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"


Or even (very popular at the moment on the internet) using google api loader (supports both http and https):
http://code.google.com/apis/loader/
On a WebBlock preparation use AddJavaScriptTag to include the "https://www.google.com/jsapi?key=INSERT-YOUR-KEY" tag.
Then on an unescaped expression in the WebBlock:   <script type="text/javascript"> google.load("jquery", "1.6.4"); </script>


Regards,
João Rosado
thumbs_up_ico0thumbs_down_ico0
João, that first aproach sounds interesting. It solves the problem with refreshing whole WebBlocks.
Using ajax Refresh on a WebBlock that is loading the libraries in it's prepation causes the preparation to run, and consequently load the libraries twice, causing errors (When using the AddJavaScriptTag method).

However, what's the behaviour if you have two different WebBlocks that require jQuery, and have the jQuery code inside them as WebBlock Javascript?
Won't the jquery code be duplicated? (Since they are different blocks, and not instances of the same)
thumbs_up_ico0thumbs_down_ico0
Well the duplication using the AddJavaScriptTag method is easily avoided by using a  IsLoadingScreen() condition on the preparation.
 
But you do make a interesting point on the multiple webblocks. I would think that adding a jQuery block with only the javascript inside and use that block in both blocks would solve it, as in not to have the jQuery in both web blocks as that web block javascript but as a reusable webblock (I think João's idea was ment to be like that)
 
Btw, I would like to encourage João to make a "Best practices for using JS" in the Guides & How-tos forum with this information...
 
Best regards,
PC
thumbs_up_ico0thumbs_down_ico0
Hi Antonio,

Two different thing here:

 1- AddJavaScriptTag (and all other methods that edit the page Header in HTTPRequestHandler) do NOT work in Ajax Refreshs. It's supposed to have no effect, not cause errors. It was already fixed in the past, but looks like it was not included on the 6.0 version. I'll take care of it.

 2 - As for the dupplicate blocks, the idea is to have a single central block with the jQuery.
Then
when you need jQuery for any other script just use the jQuery block there.

For example, lets say you want to create 3 features that requires jQueryUI (that also requires the jQuery itself)
  • Create a block and call it jQuery.
  • On the javascript property of the block add the jQuery.min.js code.
  • On the block content place an If(false) with a text on the True part saying "<jQuery>"
  • Create another block and call it jQueryUI.
  • On the javascript property of the block add the jQueryUI.min.js code.
  • On the block content place an If(False) with a text on the True part saying "<jQueryUI>"
  • On the False part of the If drag the jQuery block
  • Create another block for each of your new features.
  • On the block content place an If(False) with a text on the False part drag the jQueryUI block
  • All to that block anything you need for your feature

The platform does most of the work for us, only placing 1 javascript tag for each of the blocks, and since the jQuery and jQueryUI blocks are always the same (just reused multiple times) they are only included once.

Regards,
João Rosado



thumbs_up_ico0thumbs_down_ico0
@João

I was hoping to post this before lunch, but wasn't unable to understand why it was happening, and it it me while @ lunch :)

Following your recommendations I was changing a component I'm developing and created the jQuery webblock with the jquery.min.js in the JS property and used it in a new block where I have to use the AddJavaScriptTag to use a resource.

The problem with this is that the AddJavaScriptTag method inserts the <script> tag in the <head> of the page BEFORE everything else that is in that page, and because most of all scripts that require jQuery to work, need to have it loaded before the script itself loads, the pages will not work. An example:

<head>
<title>
HomePage
</title>
    <script type="text/javascript" src="<resource name>"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" /><meta http-equiv="Content-Style-Type" content="text/css" />
    <link href="web.css?1318850829" type="text/css" rel="stylesheet" />
    <script src="_osjs.js?5_1_1_14" type="text/javascript" charset="UTF-8"></script>
    <script src="/app/username/Blocks/app/MainFlow/jQuery.js?1318850829" type="text/javascript" charset="UTF-8"></script>
</head>

The "<resource name>" script was added with the AddJavaScriptTag and the "/app/username/Blocks/app/MainFlow/jQuery.js" is the webblock that contains the jQuery

Any thoughts on how to solve this?

Best regards,
PC
thumbs_up_ico0thumbs_down_ico0
Hi Pedro,

The idea is to avoid using the AddJavaScriptTag method.
Just drag the jQuery block to the WebBlock / Screen.

AddJavaScriptTag is not used at all on that method.


Regards,
João Rosado
thumbs_up_ico0thumbs_down_ico0
João,
my question was actually targeted at a component solution. Uniformization of every jQuery implementation in the community.
For example, imagine two components that require jQuery (any), developed by different users and published in the community. Both will have to load their own jQuery libraries, and if both are in the same page they will load the library twice, because there was no common implementation.

In my own components, I included an optional input parameter named Skip_LoadJQuery, so you can set one of them to True and avoid the conflict, I asked because I was thinking of updating them with a better solution, removing that parameter.

Pedro,
If you include your jQuery in the WebBlock JavaScript, all your other libraries must be loaded the same way in their own WebBlocks, and the WebBlocks must be placed after the jQuery WebBlock. That might solve the problem.

About the refresh problem, I get around it using  not IsAjaxRequest() from HTTPRequestHandler, because sometimes the libraries need to be reloaded on PostBacks as well, and not only on the first load..
thumbs_up_ico0thumbs_down_ico0
@Chinita: I was already loading jQuery webblock first

@João: so the idea is not to use the AddJavaScriptTag ever and use a local webblock with the resource javascript embeded in it as done to the jQuery block right?

Best regards,
PC
thumbs_up_ico0thumbs_down_ico0
Hi Pedro,

Yes, your code should either be on the Javascript and / or in the block screen.

Regards,
João Rosado
thumbs_up_ico0thumbs_down_ico0
Hi João,

I'm following the steps indicated by you to store the jQuery in a webblock and them integrate all the components.
I have already done the eSpace with a webblock with the jQuery that could by shared by any component.

Them I have created an integration to a jQuery plugin and added the webblock into my integration webblock. The problem is that the jQuery always appears as the last imported resource so an error occurs saying that jQuery does not exists.

The other jQuery resources are imported with the method AddJavaScriptTag into the preparation of the webblock.

What I'm doing wrong? Or what is the best way to put the jQuery to load before the other resources?

Thanks.

Best Regards,
Nuno Mendes 
 
 
thumbs_up_ico0thumbs_down_ico0
Hi Nuno,

Can you post the Head tag of the pages you are getting? So I can see exactly what you are trying to do.

Anyway, if you read my posts correctly, I'm against the use of the AddJavaScriptTag.
The idea is to have all the scripts in individual blocks, and let the platform take care of the order/necessity of inclusion.

There are some situations were I find AddJavaScriptTag is necessary (when using scripts like GoogleApi's for example).
And it is a lot better than inline script tags in the body.
But in my personal opinion for most situations the current implementation is a bit lacking, since it does not guarantee order or non-repetition.

Bottom line is: if you want to use AddJavaScriptTag in one component, all dependencies need to be also added with AddJavaScriptTag.
AddJavaScriptTag -> AddJavaScriptTag -> Blocks -> Blocks

Regards,
João Rosado
thumbs_up_ico0thumbs_down_ico0
Justin,

To try and answer the second part of your post:
"especially with regards to passing data back to the server"

You'll need to do it through something like an input widget which you link to an OS variable, and then set its value with Javascript to what you need (ex: document.getElementById('"+input.id+"').value = 'example';)

Hope it is clear,
Hermínio Mira
thumbs_up_ico0thumbs_down_ico0
Hi João,

The problem was that I was using the AddJavaScriptTag in the preparation of the screen.
So the head tag of the pages put the jQuery in the bottom and the specific component jQuery in the top.

What I do was exactly what you suggested and put a webblock with the jQuery and the jQuery specific of the component in the JavaScript property.
That way I solved all my integration problems with jQuery. Basically the problem occurs when you have more than one integration with jQuery.

Best Regards,
NM

 
thumbs_up_ico0thumbs_down_ico0