Solved

How to write javascript functions inside a popup window?

Posted on 2008-10-29
4
2,127 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
  • 3
4 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This video teaches users how to migrate an existing Wordpress website to a new domain.
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.

757 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now