Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2177
  • Last Modified:

How to write javascript functions inside a popup window?

I am opening a popup window using window.open.
Inside this popup window i want to add event handlers like onclick on table rows.
so how can i write a javascript functions inside this popup window to handle events.


<%@ page contentType="text/html" language="java" %>
 
<c:if test="${rowcount == false}">
<script type="text/javascript">
alert('No Matching Records Found');
</script>
</c:if>	
<c:if test="${rowcount == true}">
<script type="text/javascript">
var date =new Date();
newwindow=window.open('','DrillDown'+date.getTime(),'width=400,height=150,left=150,top=300,resizable=yes,menubar=yes');
var tmp = newwindow.document;
newwindow.submitquery= function() { alert('hello!'); };
 
tmp.write('<b>DRILL DOWN QUERY RESULTS: </b>');
tmp.write('<hr/>');
tmp.write('<div style="border:1px black solid;overflow:auto;">');
tmp.write('<table id="table2" border="1" >');
 
	tmp.write('<tr>');
	tmp.write('<b>');
	tmp.write('<th class=col0 >Plan_ID</th>       ');
	tmp.write('<th class=col1 >Test_DBS_Vsn</th>  ');
	tmp.write('<th class=col2>Test_PDE_Vsn</th>   ');
	tmp.write('<th class=col3>Test_Case_Name</th> ');
	tmp.write('<th class=col4>Is_Exception</th>   ');
	tmp.write('<th class=col5>Fail</th>           ');
	tmp.write('<th class=col6>Exceeds</th>        ');
	tmp.write('<th class=col7>Dev</th>            ');
	tmp.write('<th class=col8>Test_DBCID</th>     ');
    tmp.write('<th class=col9>First_Test_Date</th>');
	tmp.write('<th class=col10>Last_Test_Date</th>');
	tmp.write('</tr>');
	tmp.write('</table>');
tmp.write(' </div>');
 
tmp.write('<div style="border:1px black solid;width:100%; height:100%; overflow:auto;">');
tmp.write('<table id="table3" border="1" >');
tmp.write('<tr>');
	tmp.write('<th class=col0></th> ');
	tmp.write('<th class=col1></th> ');
	tmp.write('<th class=col2></th> ');
	tmp.write('<th class=col3></th> ');
	tmp.write('<th class=col4></th> ');
	tmp.write('<th class=col5></th> ');
	tmp.write('<th class=col6></th> ');
	tmp.write('<th class=col7></th> ');
	tmp.write('<th class=col8></th> ');
    tmp.write('<th class=col9></th> ');
	tmp.write('<th class=col10></th>');
	tmp.write('</tr>');
tmp.write('<c:forEach var="currentRow" items="${drillDown.data}">');
    tmp.write('<tr onclick="function(){newwindow.submitquery();}" >');
	 tmp.write('<c:forEach var="currentCol" items="${currentRow}">');
	  tmp.write(' <c:if test="${empty currentCol }">');
	  tmp.write('<td align="center">-</td>');
	  tmp.write(' </c:if >');
	  tmp.write(' <c:if test="${!empty currentCol }">');
     tmp.write('<td>${currentCol}</td>');
	  tmp.write(' </c:if >');
    tmp.write('</c:forEach>');
    tmp.write('</tr>');
tmp.write('</c:forEach>');
tmp.write('</c:if>');	
 tmp.write('</b>');
 tmp.write('</table>');
 tmp.write('</div>');
 document.body.style.cursor = 'wait';
 
  
 </script>

Open in new window

0
jagmand
Asked:
jagmand
  • 3
1 Solution
 
Michel PlungjanIT ExpertCommented:
You mean


var tmp = newwindow.document;
tmp.write('<script>function submitquery() { alert('hello!'); }<\/script>')
.
.
tmp.write('<tr onclick="submitquery(this)" >');
 
 
 

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
I think however you want
<%@ page contentType="text/html" language="java" %>
 
<c:if test="${rowcount == false}">
<script type="text/javascript">
alert('No Matching Records Found');
</script>
</c:if> 
<c:if test="${rowcount == true}">
<script type="text/javascript">
var date =new Date();
newwindow=window.open('','DrillDown'+date.getTime(),'width=400,height=150,left=150,top=300,resizable=yes,menubar=yes');
document.body.style.cursor = 'wait';
 
var tmp = newwindow.document;
var html = "";
function addLine(str,str1) {
  str+=str1+'\n';
}
addLine(html,'<script>');
addLine(html,'function submitquery() { alert(\'hello!\'); }');
addLine(html,'<\/script>'); // NOTE THE escaped slash
 
addLine(html,'<b>DRILL DOWN QUERY RESULTS: </b>');
addLine(html,'<hr/>');
addLine(html,'<div style="border:1px black solid;overflow:auto;">');
addLine(html,'<table id="table2" border="1" >');
 
        addLine(html,'<tr>');
        addLine(html,'<b>');
        addLine(html,'<th class=col0 >Plan_ID</th>       ');
        addLine(html,'<th class=col1 >Test_DBS_Vsn</th>  ');
        addLine(html,'<th class=col2>Test_PDE_Vsn</th>   ');
        addLine(html,'<th class=col3>Test_Case_Name</th> ');
        addLine(html,'<th class=col4>Is_Exception</th>   ');
        addLine(html,'<th class=col5>Fail</th>           ');
        addLine(html,'<th class=col6>Exceeds</th>        ');
        addLine(html,'<th class=col7>Dev</th>            ');
        addLine(html,'<th class=col8>Test_DBCID</th>     ');
        addLine(html,'<th class=col9>First_Test_Date</th>');
        addLine(html,'<th class=col10>Last_Test_Date</th>');
        addLine(html,'</tr>');
        addLine(html,'</table>');
addLine(html,' </div>');
 
addLine(html,'<div style="border:1px black solid;width:100%; height:100%; overflow:auto;">');
addLine(html,'<table id="table3" border="1" >');
addLine(html,'<tr>');
        addLine(html,'<th class=col0></th> ');
        addLine(html,'<th class=col1></th> ');
        addLine(html,'<th class=col2></th> ');
        addLine(html,'<th class=col3></th> ');
        addLine(html,'<th class=col4></th> ');
        addLine(html,'<th class=col5></th> ');
        addLine(html,'<th class=col6></th> ');
        addLine(html,'<th class=col7></th> ');
        addLine(html,'<th class=col8></th> ');
        addLine(html,'<th class=col9></th> ');
        addLine(html,'<th class=col10></th>');
        addLine(html,'</tr>');        
<c:forEach var="currentRow" items="${drillDown.data}">
    addLine(html,'<tr onclick="submitquery();}" >');
    <c:forEach var="currentCol" items="${currentRow}">
      <c:if test="${empty currentCol }">
          addLine(html,'<td align="center">-</td>');
      </c:if >
      <c:if test="${!empty currentCol }">
        addLine(html,'<td>${currentCol}</td>');
      </c:if >
    </c:forEach>
    addLine(html,'</tr>');
</c:forEach>
</c:if>   
 addLine(html,'</b>');
 addLine(html,'</table>');
 addLine(html,'</div>');
 tmp.write(html); // write the complete html in one go
 tmp.close(); // finish the document
 
  
 </script>

Open in new window

0
 
jagmandAuthor Commented:
above solution worked fine for me.

Now i want to get  id of element which caused the event something like below:
tmp.write('function submitquery() ');
tmp.write('{');

tmp.write('alert(\'hello!\');');
tmp.write('var e = newwindow.event;');
     tmp.write('var el = (e.target||e.srcElement);');
     tmp.write('var row = el.parentNode;');
     tmp.write(' mycel = row.getElementsByTagName("td")[1];');
     tmp.write('myceltext=mycel.childNodes[0];');
    tmp.write(' planid=myceltext.data');
   
      tmp.write('document.write(" plan_id:"+planid );');

      tmp.write('}');
tmp.write('<\/script>');
0
 
Michel PlungjanIT ExpertCommented:
why not

addLine(html,'<tr onclick="submitquery(\'${currentCol}\');}" >');

or


addLine(html,'<tr onclick="submitquery(this);}" >');
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now