Jquery and A5W page header

[ssmoore1]

Hi,

I know in version 11 that you can call the Jquery library from grids and dialogues. For example, you can use a Jquery date picker.

So in version 11 the Jquery Library is installed.

My question is, how can I call that library directly from an A5W page in the header? In V10.5 of Alpha 5 you had to install the Jquery javascript files on your project and then reference them in the header of an .A5W page.

Do we still need to do this even though the grids and dialogues have a way to call in the built in Jquery library? Or do I have to install Jquery again in my web project folder in the javascript library to use Jquery directly on .a5w pages?

Thanks,

Scott

[Jim Coltz]

Re: Jquery and A5W page header

Hi Scott,

If your using an A5W page without a component on it then just add this to the head section:
The first line loads the jQuery, the second loads Alpha's javascript which will allow you to use the Alpha stuff like $gvs() and so on.

<script type="text/javascript" src="javascript/A5jQueryWithUI.js"></script>
<script type="text/javascript" src="javascript/a5.js"></script>
<script type="text/javascript" charset="UTF-8">
<!--
jQuery.noConflict();
jQuery(document).ready(function ()
{
//add your jQuery functions in here.
});
-->
</script>

[ssmoore1]

Re: Jquery and A5W page header

Thanks! That is exactly what I was looking for.

Cheers

Scott

[carlg]

Re: Jquery and A5W page header

Hi Jim,

What if you want to include jQuery in the a5w header with a component on the page? I'm trying to add code to stop a fixed div from floating when it hits the footer. I have jQuery code that works perfectly but as soon as I add a component I need on the page, it stops working.

Thanks,

Carl

[Jim Coltz]

Re: Jquery and A5W page header

Hello Carl,

You'll probably have to debug the page with Firebug or some other tool to see what is going on. If you have a link to share I'll take a look.

[carlg]

Re: Jquery and A5W page header

Hi Jim,

The page I'm working on is here: http://obitium.com/test.a5w. Looking at keeping the filter form on the right from going underneath the footer. If I remove the actual component the div stops fine. Thanks for your help!

Carl

[Jim Coltz]

Re: Jquery and A5W page header

Looking at your page with Firebug the first thing I see is an error :

$(document).ready(checkOffset);
TypeError: $ is not a function
http://obitium.com/test.a5w
Line 23

You need to change all your $() jQuery code in the head section to jQuery(). Like this: jQuery(document).ready(checkOffset);

The $ sign is used by A5 and A5 loads their code into the page when you add a component. So you're not using native jQuery, you're using A5's JavaScript library when you use the $ sign.

[carlg]

Re: Jquery and A5W page header

Jim,

Thanks! That did it! Very much appreciate the help.

Carl

[Jim Coltz]

Re: Jquery and A5W page header

Thanks. I'm glad you got it sorted out.

[aburningflame]

Re: Jquery and A5W page header

For people who do not want to type out jQuery all the time you can do the following:
$j=jQuery.noConflict(); //reassigns jquery to the $j variable, the reason for this is by default jquery takes the $ variable (which Alpha uses, hence the conflicts). By calling jQuery.noConflict(); jquery releases its hold of the $ variable. You can also use $j=jQuery.noConflict(); to reassign jquery to the $j var/namespace

Then you can do

$j("document").ready(function(){
     $j(".class").click(function(){
          alert('hi');
     });
});