function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
bonny mankotiabonny mankotia 

jquery in visualforce page not working

I use simple jquery code in vf page but its not work please help.

<apex:page standardController="Account" tabStyle="Account" sidebar="false">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function()
            {
                 $("#Button").click(function()
                 {
                      $("#nm").hide();
                 });
           });
        </script>
    </head>
     
     <apex:form >   
     <apex:pageBlock title="Jquery Ex">
         <apex:outputText value="{!account.name}" label="NAME" id="nm"/>
        <apex:pageBlockButtons >
                <apex:commandButton id="Button" value="Jquery"/>
            </apex:pageBlockButtons>
     </apex:pageBlock>
     </apex:form>
</apex:page>

This is my code.
Tadeas BTadeas B
The problem is that the button does not actually have "Button" Id. The id is being generated by salesforce and looks more like "j_id0:j_id1:j_id4:Button" or something like this.
You can use <apex:commandButton styleClass="Button"/> instead and call it by $('.Button')
or you can reference the actual id using $Component variable, please refer to https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_best_practices_accessing_id.htm