I have a Visualforce page in which there are jQuery libraries included. I'm not familiar with why there are more than one library file loaded. I have a VF component included in the Visualforce page and within this I need to reformat the positioning of a button and add additional Div's as well. I had included the following in my VForce component.

    function formatAddressValidateButton(){
        $('input[type="button"][value="Validate"]').prop('value', 'Validate Address');
        $('input[type="button"][value="Validate"]').after('<label>Enter Postcode or Street in Address field and use validate button to confirm address</label>');           
        $('input[type="button"][value="Validate"]').wrap('<div class="frow frow-text"></div>');
        $('input[type="button"][value="Validate"]').prop('style', '');
        $('input[type="button"][value="Validate"]').css({ 'display': "block" });

Within the main VF page there is Cookie section which is instigated with the function cookiesBanner();

What I've noted is that if I do not include the line in my VForce component the above jquery will fail. However when I include this in the Component it breaks the cookie render function.

Do you know how I can get around this. SHould there be equivalent functions in each JQuery library that I can use?

Thanks in advance.

1 Answer 1


jQuery includes a function noConflict that ensures that whatever value the $ global had before the jQuery JavaScript was included is restored when the function is executed.

So this code pattern:

<script src="... path to your jQuery ..."></script>
(function($) {
    $(document).ready(function() {
        // Add your jQuery code here and use $ to reference jQuery

ensures that $ is set to the "your jQuery" for your code and that whatever value $ had before your code doesn't matter and that $ is left set to that same value after your code.

($ could be referencing a completely different library not just a different version of jQuery.)

If using a Visualforce component, this means including the jQuery directly in the component.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .