I have a requirement where I need to populate a set of fields on the basis of selected dependent list picklist value (in Inline edit). I am aware that there is no straightforward way of handling any events on Output tags. I also know that inlineedit functionality creates hidden input behind the scenes. I have tried using JQuery but still not able to intercept the DOM event. CAn anyone help me with that please, I am not a pro in Javascript/Jquery. Following is the code snippet:

<apex:includeScript value="{!URLFOR($Resource.jquery)}"/>  

<script type="text/javascript"> 

function oppStageChangeResult(){


    console.log('Stage Changed');



function displayAlert(){
    alert('Stage Changed');

   $(document).ready(function() {
       alert('Ready Again');
      $('.wrapperClass :hidden').change(function(e) {
          alert('Hidden input was changed');

<apex:form >

        <apex:outputpanel >
            <apex:actionstatus id="status">
                <apex:facet name="start">
                    <div class="waitingSearchDiv" id="el_loading" style="background-color: #fbfbfb; height: 100%;opacity:0.65; width:100%;"> 
                        <div class="waitingHolder" style="top:40%;">
                            <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                            <span class="waitingDescription">Loading...</span>

<apex:pageBlock id="displayPB">
       <apex:inlineEditSupport >
   <apex:pageBlockSection >

        <apex:outPutField id="fs_opp_stage_details" value="{!opportunity.stagename}" >

               <apex:pageBlockSectionItem dataStyleClass="wrapperClass">

                   <apex:outputLabel value="Opportunity Source"/>

         <apex:outPutField id="fs_opp_source_details" value="{!opportunity.Opportunity_Source__c}" >



       <apex:outPutField id="fs_opp_source_cat_details" value="{!opportunity.Source_Category__c}" >

         <apex:outPutField value="{!opportunity.PRY_Name_of_Referrer__c}" rendered="{!if(opportunity.Source_Category__c=='Newspaper',true,false)}" />





Your code is almost correct, you have to use partial Id selector to find the element. Here is an example, where I have attached onchange event to all elements inside apex:pageBlockSection. Based on the target Id of the event you can find the input element.

<apex:page standardController="Contact">
    <apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"/>    
    <apex:form >
            <apex:pageBlockButtons >
                <apex:commandButton action="{!edit}" id="editButton" value="Edit"/>
                <apex:commandButton action="{!save}" id="saveButton" value="Save"/>
            <apex:inlineEditSupport >
                <apex:pageBlockSection id="mysection">
                    <apex:outputField id="lastname" value="{!contact.lastname}"/>
                    <apex:outputField id ="accname" value="{!contact.accountId}"/>
                    <apex:outputField id ="phone" value="{!contact.phone}"/>
        $(document).ready(function() {
            $("div[id$='mysection'] :hidden").change(function(evt) {
                    alert("Last Name Changed");
                }else if($(evt.target).attr("id").indexOf("accname")!=-1){
                    alert("Account Name Changed");
                }else if($(evt.target).attr("id").indexOf("phone")!=-1){
                    alert("Phone No Changed");
  • But this does not seem to work with dependent picklist withing inlineedit. – Vinay Dubey Mar 22 '17 at 5:51

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.