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
Daegan Gray018950078191948383Daegan Gray018950078191948383 

I'm trying to use jquery in a visualforce page but can't get to work. Can someone advise what I'm doing wrong?...please!

<apex:page standardController="Restaurant_Supp_App__c" showHeader="true">
<head>
    <link rel="stylesheet" type="text/css" href="https://www.insynergyconnect.com/tables.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script>
        var j$ = jQuery.noConflict();
        j$(document).ready(function() {
        });
        j$(function() {
            j$("#show").click(function(){
                 j$("#protection").show("slow");
            });
            j$("#hide").click(function() {
                 j$("#protection").hide("slow");
             });
            j$("#toggle").click(function() {
                j$("#protection").toggle("slow");
             });
          });
    </script>
</head>
<body>
    <p>
    What about this style
    </p>
    <apex:form >
        <div id="protection">
        <table align="center" id="bldgprotect">
            <caption>
                Common Protection Questions
            </caption>
          <tr>
            <td id="question">Are any Banquets or Functions?</td>
            <td id="answer"><apex:inputfield value="{!Restaurant_Supp_App__c.Lodging_Banquet_or_Function__c}"/></td>
            <td id="question">Is the lodging area sprinkled?</td>
            <td id="answer"><apex:inputfield value="{!Restaurant_Supp_App__c.Lodging_Area_Sprinklered__c}"/></td>
          </tr>
          <tr>
            <td id="question">Describe Banquets And Functions</td>
            <td id="answer"><apex:inputfield value="{!Restaurant_Supp_App__c.Lodging_Describe_Banquet_or_Functions__c}"/></td>
            <td id="question">Does emergency lighting exist?</td>
            <td id="answer"><apex:inputfield value="{!Restaurant_Supp_App__c.Lodging_Does_Emergency_Lighting_Exist__c}"/></td>
          </tr>
          <tr>
            <td id="question">Does each room have smoke detectors?</td>
            <td id="answer"><apex:inputfield value="{!Restaurant_Supp_App__c.Lodging_Ea_Room_Smoke_Detectors__c}"/></td>
            <td id="question">Are evacuation routes well marked?</td>
            <td id="answer"><apex:inputfield value="{!Restaurant_Supp_App__c.Lodging_Evac_Routes__c}"/></td>
          </tr>
          <tr>
            <td id="question">Is there a second means of egress?</td>
            <td id="answer"><apex:inputfield value="{!Restaurant_Supp_App__c.Lodging_Second_Means_Egress__c}"/></td>
            <td id="question">Are evacuation routes well marked?</td>
            <td id="answer"><apex:inputfield value="{!Restaurant_Supp_App__c.Lodging_Evac_Routes__c}"/></td>
          </tr>
          <tr>
            <td id="question">Describe the security for lodging:</td>
            <td id="answer"><apex:inputfield value="{!Restaurant_Supp_App__c.Lodging_Security__c}"/></td>
            <td id="question">Are smoke detectors in common areas?</td>
            <td id="answer"><apex:inputfield value="{!Restaurant_Supp_App__c.Lodging_Smoke_Det_Common_Areas__c}"/></td>
          </tr>
          <tr>
            <td id="question">What type of smoke detectors?</td>
            <td id="answer"><apex:inputfield value="{!Restaurant_Supp_App__c.Lodging_Smoke_Det_Type__c}"/></td>
            <td id="question">Are smoke detectors in common areas?</td>
            <td id="answer"><apex:inputfield value="{!Restaurant_Supp_App__c.Lodging_Smoke_Det_Common_Areas__c}"/></td>
          </tr>
        </table>
        </div>
        <p>
        </p>
        <div align="center">
            <button id="show">Show</button>
            <button id="hide">Hide</button>
            <button id="toggle">Toggle</button>
        </div>
    </apex:form>
</body>
</apex:page>
srinu_SFDCsrinu_SFDC

Hi Daegen,

I think the events are not getting registered. Did you try moving the script to ready block as below?
j$(document).ready(function() {
  j$("#show").click(function(){
                 j$("#protection").show("slow");
         });
         j$("#hide").click(function() {
                j$("#protection").hide("slow");
          });
         j$("#toggle").click(function() {
                j$("#protection").toggle("slow");
         });
});

Thanks,
Y.Srinivas
VishalNickNameVishalNickName
Would be helpful if you can paste the error message from your Chrome browser by Right Click -> Inspect -> Console. 

If there is no error message then just make sure your jquery is getting loaded in page or not. The best practice is to put the external js iside static resources and not rely on external servers which we dont manage.

Also, if your jquery is successfully loading then a simpler call like this also should work:
<script type="text/javascript">

j$(document).ready(function(){
     alert("jQuery is working");
})

</script>