1

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.

3

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>
<script>
(function($) {
    $(document).ready(function() {
        // Add your jQuery code here and use $ to reference jQuery
    });
})(jQuery.noConflict());
</script>

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.