Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pass the Value of the Highlighted Row Back from the Popup to the Parent Window

    I have a popup window which display a list of values in a tabular form. I have no problem to do the popup or display the table.

    The table has two columns; one is the "code" and the other is the "description".

    When a row is highlighted and the "SELECT" button in the popup window is clicked, I am supposed to pass the "code" of the highlighted row back to an input textfield in the parent window. And I am struggling with it.

    Would anybody kindly help?

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Post the generated code for the popup. But basically, this is how you update a field in the opener window.
    Code:
    if (opener && !opener.closed){
       opener.document.theForm.theField.value = theValue;
    }
    I have to see how you set up the table to be able to know how to retrieve the "code" of the selected row.

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 583 Times in 564 Posts
    if it's text you're after, try passing

    theRow.innerHTML, or use an ambiguator:
    Code:
    var ndVal = function (x) {if (!!x.innerText) {return x.innerText;} else {return x.textContent;}}
    
    opener.document.theForm.theField.value = ndVal(theRowOb);

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The table in my popup window looks like:

    Code | Description
    F Female
    M Male
    U Unknown

    I am supposed to pass the "Code"; i.e. either "F" or "M" or "U" to the parent window input text field.

    And in my popup window, I put
    Code:
                function chooseGender() 
    			{
    				window.opener.document.getElementById("parentFormID:sex").value = // need help here;
    				self.close()
                }
    I use the JavaServer Faces (JSF). I have managed to highlight the selected row (see the code below). I am going to post both the JSF code and the "View Source" in the browser window:

    JSF code:
    Code:
    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
    
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    		<link rel="stylesheet" type="text/css" href="theme/booking/Master.css" title="Style">
    		<style>
    			a { text-decoration: none; color: #000000; }
    		</style>
            <script language="JavaScript1.1">
            
    			function addOnclickToDatatableRows() {
    			    var trs = document.getElementById('genderTypes').getElementsByTagName('tr');
    			    for (var i = 0; i < trs.length; i++) {
    			        trs[i].onclick = new Function("highlightRow(this)");
    			    }
    			}
    			
    			function highlightRow(tr) {
    			    tr.bgColor = (tr.bgColor != '#ff0000') ? '#ff0000' : '#ffffff';
    			}
    			
                function chooseGender() 
    			{
    				window.opener.document.getElementById("selectGender:sex").value = selectedGender;
    				self.close()
                }               
            </script>
    		<title>Sex Types</title>
    	</head>
    	<f:view>
    		<body>
    			<h:form id="genderTypes">
    				<h:dataTable value="#{genderTypesManagementBean.genderTypes}" var="genderType" 
    						id="genderTable" 
    						border="2" bgcolor="#FFFFFF">
    				 <h:column>
    				   <f:facet name="header">
    				     <h:outputText value="Code"/>
    				   </f:facet>
    
    					<h:outputText value="#{genderType.code}"/>
    
    				 </h:column>
    				 <h:column>
    				   <f:facet name="header">
    				     <h:outputText value="Description"/>
    				   </f:facet>
    				   <h:outputText value="#{genderType.description}"/>
    				 </h:column>
    				</h:dataTable>
    				
    				<f:verbatim>
    				    <script>
    				        addOnclickToDatatableRows();
    				    </script>
    				</f:verbatim>
    				
    				<p>		         
    				
    				<h:commandButton value="Find" immediate="true"
    				                  action="#{genderTypesManagementBean.search}"/>
    				<h:commandButton value="OK"
    				                  action="#{genderTypesManagementBean.select}" onclick="chooseGender()"/>
    				<h:commandButton value="Cancel" onclick="self.close()"/>
    
    			</h:form>
    	
    		</body>
    	</f:view>
    </html>
    And the "View Source" in the browser window:
    Code:
    .....
    .....
    		<body>
    			<form id="genderTypes" method="post" action="/VR_LOV_Test/faces/genderTypesPopup.jsp" enctype="application/x-www-form-urlencoded">
    
    				<table id="genderTypes:genderTable" border="2" bgcolor="#FFFFFF" ><thead ><tr ><th >Code</th><th >Description</th></tr>
    </thead><tbody >
    <tr ><td >F</td>
    <td >Female</td>
    </tr>
    <tr ><td >M</td>
    <td >Male</td>
    </tr>
    <tr ><td >U</td>
    <td >Unknown</td>
    </tr>
    </tbody>
    </table>
    				<script>
    				        addOnclickToDatatableRows();
    				    </script>
    				
    				<p>		         
    				
    				<input type="submit" name="genderTypes:_id7" value="Find" />
    				<input type="submit" name="genderTypes:_id8" value="OK" onclick="chooseGender()" />
    				<input type="submit" name="genderTypes:_id9" value="Cancel" onclick="self.close()" />
    
    			<input type="hidden" name="genderTypes" value="genderTypes" /></form>
    	
    		</body>

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Code:
    var hilitedRow;
    function highlightRow(tr) {
       tr.bgColor = (tr.bgColor != '#ff0000') ? '#ff0000' : '#ffffff';
       hilitedRow = tr;
    }
    
    function chooseGender() 
    {
       if (opener && opener.closed){ //check if opener is still open
           if (hilitedRow){
              var selectedGender = hilitedRow.getElementsByTagName('td')[0].innerHTML;
              window.opener.document.getElementById("selectGender:sex").value = selectedGender;
              window.opener.focus();
           }
           else {
              alert("Please select a row.");
              return;
           }
       }
       self.close();
    }

  • #6
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your attention to this question.

    If I test the "opener"; i.e. if (opener && opener.closed){ //check if opener is still open },
    I do not get any response at all - there is no alert dialog if a selection is not made and the code does not return anything to the input field in the parent window. I mean that I got a blank there.

    If I do not test the "opener", I have some responses. But, the input field in the parent window is populated with the text "undefined".

    Is there anything else I can try?
    Last edited by jiapei_jen; 06-15-2007 at 09:48 PM.

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Oh there was a typo.
    Code:
    if (opener && !opener.closed){ //check if opener is still open

  • #8
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your continuing support.

    I still have another problem - the input field in the parent window is populated with the text "undefined".

    Therefore, the code below has the difficulty in getting the value of the first column of the selected (highlighted) row.
    Code:
    window.opener.document.getElementById("selectGender:sex").value = document.getElementById('genderTypes').getElementsByTagName('td')[0].innerHTML.value;

  • #9
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry for my previous posting. I was wrong about it.

    Now, the code works like a magic.

    I did not know that the JavaScript could be so powerful. I had thought using JSF to pass the value back to the parent window. However, I could not highlight the selected row using JSF at the same time.

    Thanks for your help again.
    Last edited by jiapei_jen; 06-18-2007 at 01:27 PM. Reason: misspelling

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Yeah, I saw you did innerHTML.value which is not correct.
    Code:
    document.getElementById('genderTypes').getElementsByTagName('td')[0].innerHTML.value;
    Glad you sorted it out yourself.

  • #11
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Newbie here!!!

    Quote Originally Posted by jiapei_jen View Post
    Sorry for my previous posting. I was wrong about it.

    Now, the code works like a magic.

    I did not know that the JavaScript could be so powerful. I had thought using JSF to pass the value back to the parent window. However, I could not highlight the selected row using JSF at the same time.

    Thanks for your help again.

    Hey , can you please post the working code here with the jsf part ? I a facing the same issue and have gone nuts solving it


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •