?
Solved

How to write javascript functions inside a popup window?

Posted on 2008-10-29
4
Medium Priority
?
2,166 Views
Last Modified: 2012-05-05
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
Comment
Question by:jagmand
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 22838844
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22838915
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
 

Author Comment

by:jagmand
ID: 22853345
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22853760
why not

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

or


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

Featured Post

How to Create Failover DNS Record Sets in Route 53

Route 53 has the ability to easily configure DNS record sets specifically for failover scenarios. These failover record sets can be configured to failover to full-blown deployments in other regions or to a static HTML page that informs your customers of the issue.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article discusses how to create an extensible mechanism for linked drop downs.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question