Using jQuery in EP

For using jQuery in 2012: click here.

Today I needed to catch the click event on the module tabs on top of the screen. To do so I turned to jQuery for the answer!

EP modules

First of all you’ll need the jQuery javascript file which you can find at jquery.com or you could use the online ‘latest version’ of jquery.com

If you choose to use the file (which I had to do because there is no internet connection on the development sever), you need to place the file somewhere in the 12 hive. I created a jQuery folder in the LAYOUTS folder (C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\JQuery).

To get a reference to the jQuery file in the page I used a ClientScriptManager on the Page_Load event of the ascx.cs file.

1
2
3
4
5
6
 protected void Page_Load(object sender, EventArgs e)
{
    ClientScriptManager cs = Page.ClientScript;
    if (!cs.IsClientScriptIncludeRegistered("jquery"))
        cs.RegisterClientScriptInclude(this.GetType(), "jquery", "/_LAYOUTS/JQuery/jquery.min.js");
}

Now to write the jQuery code just add a script tag to the webcontrol and write your jQuery code

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
    $(document).ready(function() {
        $(".zz2_TopNavigationMenu_1").click(function(event) {
            var answer = confirm("Do you want to change module?");
            if (!answer)
                event.preventDefault();
 
        });
    });
</script>

By looking at the generated source of my portal page I was able to determine zz2_TopNavigationMenu_1 is the class assigned to the module links.

So now when I click any module link I get the following question:

jQuery dialog

2 Responses to Using jQuery in EP

  1. Pingback: Collapse EP Quicklaunch menu | Ax EP Clipboard

  2. Pingback: (ax2012) using jQuery in Enterprise Portal | Ax EP Clipboard

Leave a Reply

Your email address will not be published. Required fields are marked *


3 + = twelve

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>