HelpSpot Help Desk Software | HelpSpot Blog | HelpSpot Support

How to use jQuery on the client side?


In the Admin Themes section of the Admin manual it states that you can add your own jQuery to Admin themes:

I tested this method and it worked great on the admin side but I need a way to use jQuery on the client side. So, how would you go about adding your own jQuery to a portal theme or secondary portal?

I’m working with a secondary portal and I would like to use jQuery to manipulate the form generated from request.tpl.php.

Here’s what I’ve attempted:

In portal3/custom_templates/header.tpl.php I added a link to the built-in Jquery script:

<script type="text/javascript" src="<?php echo $this->cf_primaryurl ?>static_<?php echo $this->cf_version ?>/js/jquery.js"></script>

Below the above line I linked to a custom js file to place my JQuery within:

<script type="text/javascript" src="<?php echo $this->cf_url ?>/custom.js"></script>

I checked out the source of the page that the request form is on and verified that both of these files link up correctly.

In my custom.js script I started with the recommended format in the Admin manual:

	alert("Jquery is working.");

However, the JS console states: ReferenceError: $jq is not defined

I also tried other document ready formats:

$(document).ready(function() {
    alert("Jquery is working.");

    alert("Jquery is working.");

Same result with $(…) and $jQuery not defined errors. Even though my custom script is clearly below jquery.js

What am I doing wrong here?

Mike S


What you’re doing looks OK. jq won't be setup since you're just including jQuery on your own and that may be the issue. The is already in use by another library. We’ll be moving everything to jQuery in the future, but for now you’ll need to either also include the file jquery.noconflict.js (from the same folder as jQuery in our source files) or use the line below to assign jQuery to $jq

var $jq = jQuery.noConflict();

jQuery Append function - Custom Fields

Thanks Ian! That solved it.

After adding the noConflict() line, my code executed right away. In case anyone runs into the same issue, here’s the code I used in custom.js to test jQuery:

var $jq = jQuery.noConflict();

    alert("jQuery is working.");


Excellent! Thanks for posting up the code.