[SalesForce] ActionSupport NOT firing when field getting populated with Javascript

My usecase is that I'm trying to populate a parent record using a lookup window – all constructed using Javascript. However, when the lookup field is populated, the onchange or the onblur event of actionsupport isn't firing. I will need to use this value that's populated in this window and then fire an action method to get some more values and re-render a section below. However, the onchange isn't firing at all. Any thoughts on how to do it?

<apex:pageBlockSectionitem >
   <apex:outputLabel value="Parent Name" style="width:20px; height:20px"/>
   <apex:outputPanel layout="inline" style="vertical-align:middle">
      <apex:actionRegion>
         <apex:inputText  value="{!acct.parentid}" id="targetId" >
            <apex:actionSupport event="onchange" 
               action="{!checkParent}" 
               rerender="pbs1"  />
         </apex:inputText>
      </apex:actionRegion>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <apex:inputText size="20" id="targetName" onFocus="this.blur()" value="{!parentName}" />
      <a  href="#" 
         onclick="openLookupPopup('{!$Component.targetName}', '{!$Component.targetId}'); 
         return false">
         <apex:image style="vertical-align:middle;width:24px; height:24px" 
            value="{!$Resource.lookup}" />
      </a>
   </apex:outputPanel>
</apex:pageBlockSectionitem>
</apex:pageblockSection>
<apex:pageblockSection id="pbs1" title="Family Information" columns="2" collapsible="false">
<script>
   var newWin=null;
   function openLookupPopup(name, id)
   {
       var url="/apex/LookupPopup?namefield=" + name + "&idfield=" + id ;
       newWin=window.open(url, 'Popup','height=500,width=600,left=100,top=100,resizable=no,scrollbars=yes,toolbar=no,status=no');
       if (window.focus) 
       {
           newWin.focus();
       }

       return false;
   }

   function closeLookupPopup()
   {
      if (null!=newWin)
      {
         newWin.close();
      }  
   }

         function fillIn(name, id)
             {
            var winMain=window.opener;
              if (null==winMain)
                   {
                   winMain=window.parent.opener;
                }
          var  
            ele=
       winMain.document.getElementById('{!$CurrentPage.parameters.namefield}');
            ele.value=name;
            ele=
      winMain.document.getElementById('{!$CurrentPage.parameters.idfield}');
             ele.value=id;
             winMain.closeLookupPopup();
        }



</script>

Sorry I had to break up the lines to accommodate within the page. The code is working fine, it's just that I need to make the Onchange action fire after populating the lookup field so that I can perform the steps as stated above.

Please help.


Updated as of 11/24: 1:08pm CT: Per the suggestions provided here, I tried to manually fire the change event. However, id field in the parent page needs to fire for the change event. How do I do that from the lookup (child page). I'm using this code below, but targetId is the ID in the parent page and not child and I only have this value in the URL($CurrentPage.parameters.idfield). How do I get to do this?

j$( 'input[id$=targetId]' ).change(); 



      function fillIn(name, id) 
       { 
          var winMain=window.opener; 
        if (null==winMain) 
              { 
              winMain=window.parent.opener; 
              } 
             var     
ele=winMain.document.getElementById('{!$CurrentPage.parameters.namefield}'); 
                 ele.value=name; 

ele=winMain.document.getElementById('{!$CurrentPage.parameters.idfield}'); 
                  ele.value=id; 
                 alert('id populated'); 
                //new line added here
                j$( 'input[id$=targetId]' ).change(); 
                winMain.closeLookupPopup(); 
               }

Best Answer

<apex:inputField id="relatedrecordinputtext" value="{!acct.parentid}"> 
    <apex:actionSupport event="onchange" action="{!GroupPopulated}" rerender="pbs1"/>         
 </apex:inputField>

I Think this will work for you but it does not work then you can manually fire the change event.

 $("input").trigger("change"); //using Jquery

or JAVASCRIPT

  var two = document.getElementById('two');
  two.checked = ! two.checked;
  two.dispatchEvent('change');