How to use jquery in module development

English forums
1

Hi Alll, I want to use different types of jquery function in my module. But I am unable to load the jquery file. I have seen that jquery file is located in out/azure/src/js/libs/jquery.min.js
I am loading useing [{oxscript include=“js/libs/jquery.min.js”}] in my template. But I don’t see any jquery file included using firebug and when I want to use some thing like at the end of my template

 <script type="text/javascript" >
             function validate_fields()
            {
                if($("#email").val()=='')
                $("#abc").html('');
            }
            </script>

I got an error of

$("#email") is null
if($("#email").val()=='')

One thing that I am calling javascript function at onclick event of my submit button.
How can I load this jquery file in my template and can use jquery functions? Should I load it in my template or somewhere else?

Regards,
Awais Qarni

2

Is it a standard template delivered with the shop? Based either on Azure or Basic?
Or do you want to use it in an own, new template?

3

[QUOTE=Hebsacker;82540]Is it a standard template delivered with the shop? Based either on Azure or Basic?
Or do you want to use it in an own, new template?[/QUOTE]

Hi Hebsacker thanks for your reply. I am developing my module and have created my on tpl file, placed in out/admin/tpl/mytpl.tpl . In this file I want to use it

4

you need to load the libs before you call the module

so you need to include them right at the beginning (maybe inside the header) like

        [{oxscript include="js/libs/jquery.min.js" priority=1}]
        [{oxscript include="js/libs/jquery-ui.min.js" priority=1}]

adjust the paths to where you have placed the libs in your installation

5

Did you copy the folder “azure\src\js\libs” to “admin\src\js\libs” ?

6

[QUOTE=Hebsacker;82542]you need to load the libs before you call the module

so you need to include them right at the beginning (maybe inside the header) like

        [{oxscript include="js/libs/jquery.min.js" priority=1}]
        [{oxscript include="js/libs/jquery-ui.min.js" priority=1}]

adjust the paths to where you have placed the libs in your installation[/QUOTE]
I have to call before the call of my module? In which file I should place this code?

7

Basics, basics, basics, basics, basics, basics…

        [{oxscript include="js/libs/jquery.min.js" priority=1}]
        [{oxscript include="js/libs/jquery-ui.min.js" priority=1}]

in e.g out/admin/tpl/header.tpl

or this (then you don`t need to copy the folder)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
8

[QUOTE=rubbercut;82552]Basics, basics, basics, basics, basics, basics…

        [{oxscript include="js/libs/jquery.min.js" priority=1}]
        [{oxscript include="js/libs/jquery-ui.min.js" priority=1}]

in e.g out/admin/tpl/header.tpl

or this (then you don`t need to copy the folder)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

[/QUOTE]
Hi rubbercut thanks for your reply. Dude I have already mentioned that I am developing my module. Is it good practice that I edit the header file. When I will place my plugin on market place then should my plugin also replace the header file? This will create definately number of problems? Although I have put the jquery from google in my template file but I also don’t think that It is a good practice

9

Does oxscript work in admin? I don’t think so.

<script type="text/javascript" src="[{$oViewConf->getResourceUrl()}]oxid.js"></script>

(Adjust path and file)
In Admin you have Frameset so html head-section is in your own file. Admin/header.tpl is only top section of admin panel, no need to change this.

10

It is possible to use oxscript in admin-pages, just place [{ oxscript }] somewhere in your frameset.
Example for popups:

[{include file=“popups/headitem.tpl” title=“GENERAL_ADMIN_TITLE”|oxmultilangassign}]

[{oxscript include=$oViewConf->getModuleUrl(‘yourModuleID’,‘/out/js/jquery-1.8.3.min.js’)}]
[{oxscript include=$oViewConf->getModuleUrl(‘yourModuleID’,‘/out/js/jquery.specialPlugIn.js’)}]

[{* … some code for the page … *}]

[{ oxscript }]

</body>
</html>