Retrieve  data From Popup jsp and display to Parent jsp

puneet kumar
puneet kumar used Ask the Experts™
on
Hi Team ,

i have a problem but i did't get any solution for it . i have a parent jsp from where a search icon is there when i click on search icon a popup jsp is open . in popup jsp i retrieve values form database and display.
there is 2 column in database Employee_ID and Employee_Name. all values come row by row and display on popup jsp . in each row there is a checkbox no my problem comes and i did't get any solution for it please help me out.there is two case -

1 Case - when i check multiple check boxes in popup.jsp and click on submit button(popup.jsp) the value of Employee_ID and Employee_Name   should display on parent.jsp.

2 Case - when i check multiple check boxes in popup.jsp and click on submit button(popup.jsp) the value of Employee_ID and Employee_Name should go to a servlet and after that servlet send that data to parent.jsp.


please let me know both of the above solutions.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
do the popup and jsp popup share same css stylesheet or it's possible?
puneet kumarSenior Software Engineer

Author

Commented:
its my confidential work so i cant share it please send me some prototype i already shared my requirement if not understand please let me know i will elaborate more.
leakim971Multitechnician
Top Expert 2014

Commented:
here using a modal :
<!DOCTYPE html>
<html>
<head>
    <style>
        /* https://www.w3schools.com/howto/howto_css_modals.asp */
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
        }

        /* The Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script>
        jQuery(function($) {
           $(".openPopup").on("click", function(event) {
               event.preventDefault();
               $("#myModal").show();
               $("#divForCSSPopup").load("/path/to/your/page.jsp body", function() {
                   $("form", "#divForCSSPopup").submit(function(event) {
                       event.preventDefault();
                       var listOfCheckbox = [];
                       $(":checkbox", this).each(function() {
                           // your checkbox must be like
                           // <input type="checkbox" data-id="123" data-name="someName" value="456" />
                          listOfCheckbox.push({employeeID: $(this).data("id"), employeeName: $(this).data("name")})
                       });
                       // checking
                       alert(JSON.stringify(listOfCheckbox));
                       $("#myModal").hide();
                   });
               });
           });
        });
    </script>
</head>
<body>
<button class="openPopup">OPEN POPUP</button>
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p><div id="divForCSSPopup"></div></p>
    </div>
</div>
</body>
</html>

Open in new window

OWASP: Avoiding Hacker Tricks

Learn to build secure applications from the mindset of the hacker and avoid being exploited.

puneet kumarSenior Software Engineer

Author

Commented:
$("#divForCSSPopup").load("/path/to/your/page.jsp body"  in this line what is my jsp parent jsp or popup jsp please eleborate lil more . one more thing when i display my result on popup jsp with checkbox and select multiple checkboxes on popup.jsp then submit there how can i display the result on parent.jsp
puneet kumarSenior Software Engineer

Author

Commented:
And also please let me know for some pagination code also because in popup.jsp there is lots of data over there . so i want some pagination on it .when i clicking close button on popup its not closing the popupwindow.
puneet kumarSenior Software Engineer

Author

Commented:
My popup.jsp checkbox is like below -

<tr>
                              <TD valign="top"><INPUT class="inputtext" name="chkBox" type="checkbox" value="<%=employeeList.get(i).toString()%>" id="" size="50"></TD>
                              <td><%=employeeList.get(i)%></td>
                              <td><%=employeeList.get(i+1)%></td>
                        </tr>
please let me know what i need to chenge , please let me know the code for popup jsp.

every time it gives error VM864:9 Uncaught TypeError: Cannot read property 'location' of null
    at doSelectData (eval at <anonymous> (VM763 jquery.js:349), <anonymous>:9:12)
    at HTMLInputElement.onclick (Demo.jsp?MODULENAME=UPDATEMODULE&SEQNO=1&:1)

please do something its urgent.

Hi leakim, i have put the code in my jsp but data still not coming , parent.jsp having 2 function -
1st in parent.jsp there is a searchbox where we put employee id one by one request will go to servlet and search it from database and display on same parent.jsp .
2nd in parent.jsp there is a button when click on the button a popup.jsp where all the Employee Id and Name visible with checkbox , after clicking on checkboxes and submit button Employee Name and Employee Id should be display on parent.jsp.


Please let me knwo if requirement is not clear but its urgent try to provide the solution asap.
leakim971Multitechnician
Top Expert 2014

Commented:
$("#divForCSSPopup").load("/path/to/your/page.jsp body"  in this line what is my jsp parent jsp or popup jsp

it's your popup.
we load it using ajax and put the content of the <body> inside a div in the parent page
puneet kumarSenior Software Engineer

Author

Commented:
please provide me popup.jsp as well as because in my jsp displaying the value from database but after clicking on chekboxes and submit button it could't come to parent.jsp. please read my last comment as well as
puneet kumarSenior Software Engineer

Author

Commented:
i am providing my parent.jsp code explaination i already gave if there is any confusion please let me know and also please provide me popup.jsp , take any dummy value on it i will do the database operation  -

<html>
<head>
    <style>
        /* https://www.w3schools.com/howto/howto_css_modals.asp */
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
        }

        /* The Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
    <style>
.header {
	background-color: #C3C3C3;
	color: black;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	border-bottom: solid 1px #C3C3C3;
	border-left: solid 1px #C3C3C3;
}
</style>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script>
        jQuery(function($) {
           $(".openPopup").on("click", function(event) {
               event.preventDefault();
               $("#myModal").show();
               $("#divForCSSPopup").load("<%=contextPathName%>/utlapps/getAllEmployee.jsp", function() {
                   $("form", "#divForCSSPopup").submit(function(event) {
                       event.preventDefault();
                       var listOfCheckbox = [];
                       $(":checkbox", this).each(function() {
                           // your checkbox must be like
                           // <input type="checkbox" data-id="123" data-name="someName" value="456" />
                          listOfCheckbox.push({employeeID: $(this).data("id"), employeeName: $(this).data("name")})
                       });
                       // checking
                       alert(JSON.stringify(listOfCheckbox));
                       $("#myModal").hide();
                   });
               });
           });
        });
    </script>
    <script>
$(document).ready(function() {
	
	var x = document.getElementById("dataTable").rows.length;
	   if(x == 0){
	       $("#transfer").hide(); 
	   }else{
	        $("#transfer").show();
	   }
	   
	   
});

function doSearchData()
{

	   document.getElementById("Operation").value = "Search";
	   document.forms.SearchForm.action="<%=contextPathName%>/SearchServlet";
	   document.forms.SearchForm.submit();
}
function doTransferData()
{
	   document.getElementById("Operation").value = "Transfer";
	   document.forms.SearchForm.action="<%=contextPathName%>/SearchServlet";
	   document.forms.SearchForm.submit();
}
</script>
</head>
<body>
<div class="container">
<div>
	<table>
		<tr align="left" valign="top" class="head">
			<td width="2000"><Font class="head"> <b>Search Employee *</b></Font></td>
		</tr>
	</table>
</div>
<div>
<form name="SearchForm" method="post" action="">
	<div>
		<table>
			<tr>
				<td><input type="text" name="employeecode" id="myInput"
					 placeholder="Search for Employee." title="Type in a name"><font class="star"><b>*</b></font></td>
				<td><INPUT type="button" value="Search" id="search" name="insert" class=buttonstyle onmouseover="this.className='buttonstyleonmouseover'"
						onmouseout="this.className='buttonstyle'" onclick="doSearchData()">
				</td>
				<td>
				<button class="openPopup">OPEN POPUP</button>
					<div id="myModal" class="modal">
    					<div class="modal-content">
        					<span class="close">&times;</span>
        						<p><div id="divForCSSPopup"></div></p>
    					</div>
					</div>
				</td>
				<td>
				<label>${emptyMessage}</label>
		
	</td>
		
			</tr>
		</table>
		</div>
		<div>
		<table id="dataTable" align="left" width="100%" border="0">
			<%
				List employeeList = (ArrayList) request.getAttribute("employeeList");
					if (employeeList != null && employeeList.size() > 0) {
			%>
			<thead>
				<tr>
					<!-- <th class='header'></th>-->
					<th class='header' style="width: 10%;"><label class="label"></label></th>
					<th class='header' style="width: 40%;"><label class="label">Employee
							Code</label>
					<th class='header' style="width: 40%;"><label class="label">Employee
							Name</label></th>
				</tr>
			</thead>
			<tbody>
			<%
						for (int i = 0; i < employeeList.size(); i++) {
							List employee = (List) employeeList.get(i);
							String emp_ID = employee.get(0).toString();
			%>
			<tr>
				<td valign="top"><INPUT class="inputtext" name="chkBox"
					type="checkbox" value="<%=emp_ID%>" size="50"></td>
				<td><label><%=employee.get(0)%></label></td>
				<td><label><%=employee.get(1)%></label></td>
			</tr>
			<%
				}
					}
					request.getSession().setAttribute("employeeList", employeeList);
			%>
			<BR><BR><BR>
			</table>
			<div>
			<table>
			<tr>
			<td>
			<INPUT align="center" type="button" id ="transfer" value="Transfer" name="transfer" class=buttonstyle onmouseover="this.className='buttonstyleonmouseover'"
	onmouseout="this.className='buttonstyle'" onclick="doTransferData()">		
				</td>
			</tr>
			<tr>
			<td>
				<label>${errorMessage}</label>
		
	</td>
	</tr>
				<tr>
					<TD><label>${success}</label></TD>
				</tr>
			</tbody>
		    </table>
		</div>
		<input type=hidden name="Operation" id="Operation">
		</div>
	</form>
	</div>
	<div>
	<table width=100%>
		<tr>
			<td class=Head><label><%=messages.getLocalizedString("Common.Fields.marked.with")%>
					( <b class="star"> * </b> ) <%=messages.getLocalizedString("Common.are.mandatory")%></label>
			</td>
		</tr>
	</table>
	</div>
	</div>
</body>
</html>

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
please provide me popup.jsp

this is your popup.jsp, providing one is useless

you can try the code with a basic one :
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>HELLO I'M POPUP</h1>
<form>
<input type="checkbox" value="1"/><br>
<input type="checkbox" value="1"/><br>
<input type="submit" value="SUBMIT"/>
</form>
</body>
</html>

Open in new window

puneet kumarSenior Software Engineer

Author

Commented:
can you please elaborate for above popup.jsp what can i do with it.i already provide you my parent.jsp please check it and let me know the correct one according to that . please make in working condition with popup.jsp .database work i will do it .
leakim971Multitechnician
Top Expert 2014

Commented:
you asked me for a popup.jsp
try it instead using your current popup.jsp
confirm you see the two checkbox, the submit button and "HELLO I'M POPUP"
puneet kumarSenior Software Engineer

Author

Commented:
with popup.jsp i dont have any problem but after submitting it is not displaying on my parent.jsp. above i sent you my parent.jsp please check with it and fix it with popup.jsp . with your popup.jsp i checked its showing checkbox values.
leakim971Multitechnician
Top Expert 2014

Commented:
in YOUR parent page, did you notice line 66 and line 70
could you comment about these two lines ?
puneet kumarSenior Software Engineer

Author

Commented:
please ping that line ..because your system is different my is different so it is not easy to understandable . my popup as below -

<body>
	<form name="SelectForm" method="post" action="">

		<table id="example" class="display" style="width: 100%">
			<thead>
				<tr>
					<th></th>
					<th>Employee Code</th>
					<th>PayGroup Code</th>
				</tr>
			</thead>
			<tbody>
				<%
					for (int i = 0; i < groupId_List.size(); i+=2) {
				%>
				<tr>
					<TD valign="top"><INPUT class="inputtext" name="chkBox" type="checkbox" value="<%=groupId_List.get(i).toString()%>" size="50"></TD>
					<td><%=groupId_List.get(i)%></td>
					<td><%=groupId_List.get(i+1)%></td>
				</tr>
				<%
					}
				%>
				<TR>
					<TD><INPUT align="Cener" type="button" id="transfer"
						value="Select" name="transfer" class=buttonstyle
						onmouseover="this.className='buttonstyleonmouseover'"
						onmouseout="this.className='buttonstyle'"
						onclick="doSelectData()"></TD>
				</TR>
			</tbody>
		</table>
		<input type=hidden name="Operation" id="Operation">
	</form>
</body>

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
I don't have system
I refer to YOUR previous post when you submitted YOUR parent jsp page, check your previous comment
puneet kumarSenior Software Engineer

Author

Commented:
Hi leakin please provide me working example on both parent.jsp and popup.jsp . i already provide you my parent.jsp and popup.jsp above please check and correct my  pages or you will provide me prototype regarding my problem .please update me asap.
puneet kumarSenior Software Engineer

Author

Commented:
hi Leakim i talked with micheal . according to him you may have got confused so i am explaining my problem .

i have a jsp page named parent.jsp, it has 2 function describe below -


1)it has a search box (Text Box) after that a button is there to search Employee_ID one by one , it will display the result(Employee ID , Employee Name) in a div on same parent.jsp page .


2)after search box (Text Box)) and button one more button is there which open a popup.jsp. in popup.jsp i retrieve all Employee_ID and Employee_Name from table and display row by row . each and
  every row contains a chekbox . after selection of checkbox there is a button in popup.jsp which send back data to parent.jsp to display .
 
  above is my case . i am stuck with case 2 . please find my parent.jsp and popup.jsp code below

Parent.jsp -

<html>
<head>
    <style>
        /* https://www.w3schools.com/howto/howto_css_modals.asp */
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
        }

        /* The Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
    <style>
.header {
	background-color: #C3C3C3;
	color: black;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	border-bottom: solid 1px #C3C3C3;
	border-left: solid 1px #C3C3C3;
}
</style>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script>
        jQuery(function($) {
           $(".openPopup").on("click", function(event) {
               event.preventDefault();
               $("#myModal").show();
               $("#divForCSSPopup").load("<%=contextPathName%>/utlapps/getAllEmployee.jsp", function() {
                   $("form", "#divForCSSPopup").submit(function(event) {
                       event.preventDefault();
                       var listOfCheckbox = [];
                       $(":checkbox", this).each(function() {
                           // your checkbox must be like
                           // <input type="checkbox" data-id="123" data-name="someName" value="456" />
                          listOfCheckbox.push({employeeID: $(this).data("id"), employeeName: $(this).data("name")})
                       });
                       // checking
                       alert(JSON.stringify(listOfCheckbox));
                       $("#myModal").hide();
                   });
               });
           });
        });
    </script>
    <script>
$(document).ready(function() {
	
	var x = document.getElementById("dataTable").rows.length;
	   if(x == 0){
	       $("#transfer").hide(); 
	   }else{
	        $("#transfer").show();
	   }
	   
	   
});

function doSearchData()
{

	   document.getElementById("Operation").value = "Search";
	   document.forms.SearchForm.action="<%=contextPathName%>/SearchServlet";
	   document.forms.SearchForm.submit();
}
function doTransferData()
{
	   document.getElementById("Operation").value = "Transfer";
	   document.forms.SearchForm.action="<%=contextPathName%>/SearchServlet";
	   document.forms.SearchForm.submit();
}
</script>
</head>
<body>
<div class="container">
<div>
	<table>
		<tr align="left" valign="top" class="head">
			<td width="2000"><Font class="head"> <b>Search Employee *</b></Font></td>
		</tr>
	</table>
</div>
<div>
<form name="SearchForm" method="post" action="">
	<div>
		<table>
			<tr>
				<td><input type="text" name="employeecode" id="myInput"
					 placeholder="Search for Employee." title="Type in a name"><font class="star"><b>*</b></font></td>
				<td><INPUT type="button" value="Search" id="search" name="insert" class=buttonstyle onmouseover="this.className='buttonstyleonmouseover'"
						onmouseout="this.className='buttonstyle'" onclick="doSearchData()">
				</td>
				<td>
				<button class="openPopup">OPEN POPUP</button>
					<div id="myModal" class="modal">
    					<div class="modal-content">
        					<span class="close">&times;</span>
        						<p><div id="divForCSSPopup"></div></p>
    					</div>
					</div>
				</td>
				<td>
				<label>${emptyMessage}</label>
		
	</td>
		
			</tr>
		</table>
		</div>
		<div>
		<table id="dataTable" align="left" width="100%" border="0">
			<%
				List employeeList = (ArrayList) request.getAttribute("employeeList");
					if (employeeList != null && employeeList.size() > 0) {
			%>
			<thead>
				<tr>
					<!-- <th class='header'></th>-->
					<th class='header' style="width: 10%;"><label class="label"></label></th>
					<th class='header' style="width: 40%;"><label class="label">Employee
							Code</label>
					<th class='header' style="width: 40%;"><label class="label">Employee
							Name</label></th>
				</tr>
			</thead>
			<tbody>
			<%
						for (int i = 0; i < employeeList.size(); i++) {
							List employee = (List) employeeList.get(i);
							String emp_ID = employee.get(0).toString();
			%>
			<tr>
				<td valign="top"><INPUT class="inputtext" name="chkBox"
					type="checkbox" value="<%=emp_ID%>" size="50"></td>
				<td><label><%=employee.get(0)%></label></td>
				<td><label><%=employee.get(1)%></label></td>
			</tr>
			<%
				}
					}
					request.getSession().setAttribute("employeeList", employeeList);
			%>
			<BR><BR><BR>
			</table>
			<div>
			<table>
			<tr>
			<td>
			<INPUT align="center" type="button" id ="transfer" value="Transfer" name="transfer" class=buttonstyle onmouseover="this.className='buttonstyleonmouseover'"
	onmouseout="this.className='buttonstyle'" onclick="doTransferData()">		
				</td>
			</tr>
			<tr>
			<td>
				<label>${errorMessage}</label>
		
	</td>
	</tr>
				<tr>
					<TD><label>${success}</label></TD>
				</tr>
			</tbody>
		    </table>
		</div>
		<input type=hidden name="Operation" id="Operation">
		</div>
	</form>
	</div>
	<div>
	<table width=100%>
		<tr>
			<td class=Head><label><%=messages.getLocalizedString("Common.Fields.marked.with")%>
					( <b class="star"> * </b> ) <%=messages.getLocalizedString("Common.are.mandatory")%></label>
			</td>
		</tr>
	</table>
	</div>
	</div>
</body>
</html>

Open in new window



Popup.jsp -


<body>
	<form name="SelectForm" method="post" action="">

		<table id="example" class="display" style="width: 100%">
			<thead>
				<tr>
					<th></th>
					<th>Employee Code</th>
					<th>PayGroup Code</th>
				</tr>
			</thead>
			<tbody>
				<%
					for (int i = 0; i < groupId_List.size(); i+=2) {
				%>
				<tr>
					<TD valign="top"><INPUT class="inputtext" name="chkBox" type="checkbox" value="<%=groupId_List.get(i).toString()%>" size="50"></TD>
					<td><%=groupId_List.get(i)%></td>
					<td><%=groupId_List.get(i+1)%></td>
				</tr>
				<%
					}
				%>
				<TR>
					<TD><INPUT align="Cener" type="button" id="transfer"
						value="Select" name="transfer" class=buttonstyle
						onmouseover="this.className='buttonstyleonmouseover'"
						onmouseout="this.className='buttonstyle'"
						onclick="doSelectData()"></TD>
				</TR>
			</tbody>
		</table>
		<input type=hidden name="Operation" id="Operation">
	</form>
</body>

Open in new window


above both code is main code of the jsp page

please let me know if you need any more clarification.please help me out on above asap.its urgent .
leakim971Multitechnician
Top Expert 2014

Commented:
The only info I need is did you checked/read the code I sent to you?
Again it's the line 66 and 70 in YOUR last parent page
I'm waiting a feedback on that both lines to be sure YOU understand what miss in YOUR code
leakim971Multitechnician
Top Expert 2014

Commented:
also, could you open the popup page directly in your browser?
could you post the generated HTML (not the JSP from your previous comment)
puneet kumarSenior Software Engineer

Author

Commented:
Hi leakim please find my generated html of popup.jsp page is below -

<html>
<head>
</head>
<body>

<title>Test Login</title>

<script>
function doSelectData()
{
	   /* document.getElementById("Operation").value = "Transfer"; */
	   document.getElementById("Operation").value = "Select";
	   
	   document.forms.SelectForm.action="/SearchServlet";
	   document.forms.SelectForm.submit();
	   self.close();
}
	function setEmployeeId() {
	}
</script>
<style>
.header {
	background-color: #C3C3C3;
	color: black;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	border-bottom: solid 1px #C3C3C3;
	border-left: solid 1px #C3C3C3;
}
</style>
<title>Employee Data</title>


	<form name="SelectForm" method="post" action="">

		<table id="example" class="display" style="width: 100%">
			<thead>
				<tr>
					<th></th>
					<th>Employee Code</th>
					<th>Employee Name</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td valign="top"><input class="inputtext" name="chkBox" type="checkbox" value="A0681041" size="50"></td>
					<td>1234</td>
					<td>John</td>
				</tr>
				<tr>
					<td valign="top"><input class="inputtext" name="chkBox" type="checkbox" value="A0681042" size="50"></td>
					<td>3456</td>
					<td>Doe</td>
				</tr>
				<tr>
					<td valign="top"><input class="inputtext" name="chkBox" type="checkbox" value="A0681043" size="50"></td>
					<td>5678</td>
					<td>Tim</td>
				</tr>
				<tr>
					<td valign="top"><input class="inputtext" name="chkBox" type="checkbox" value="A0681044" size="50"></td>
					<td>1458</td>
					<td>Sam</td>
				</tr>
				<tr>
					<td valign="top"><input class="inputtext" name="chkBox" type="checkbox" value="A0681050" size="50"></td>
					<td>4466</td>
					<td>Lee</td>
				</tr>
				<tr>
					<td valign="top"><input class="inputtext" name="chkBox" type="checkbox" value="A0681051" size="50"></td>
					<td>9988</td>
					<td>Kim</td>
				</tr>
				<tr>
					<td valign="top"><input class="inputtext" name="chkBox" type="checkbox" value="A0681045" size="50"></td>
					<td>4500</td>
					<td>Sin</td>
				</tr>
				<tr>
					<td valign="top"><input class="inputtext" name="chkBox" type="checkbox" value="A0681046" size="50"></td>
					<td>9966</td>
					<td>Hmag</td>
				</tr>
				<tr>
					<td><input align="Cener" type="button" id="transfer" value="Select" name="transfer" class="buttonstyle" onmouseover="this.className='buttonstyleonmouseover'" onmouseout="this.className='buttonstyle'" onclick="doSelectData()"></td>
				</tr>
			</tbody>
		</table>
		<input type="hidden" name="Operation" id="Operation">
	</form>

	

	
</body></html>

Open in new window

puneet kumarSenior Software Engineer

Author

Commented:
i tried with your given popup page its not working -

<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>HELLO I'M POPUP</h1>
<form>
<input type="checkbox" value="1"/><br>
<input type="checkbox" value="1"/><br>
<input type="submit" value="SUBMIT"/>
</form>
</body>
</html>

please let me know solution asap.even it is not going to
$("form", "#divForCSSPopup").submit(function(event) {
function
leakim971Multitechnician
Top Expert 2014

Commented:
currently you've (a random row) :
				<tr>
					<td valign="top"><input class="inputtext" name="chkBox" type="checkbox" value="A0681042" size="50"></td>
					<td>3456</td>
					<td>Doe</td>
				</tr>

Open in new window

The message I let for you in the provided code ask to have something like :
				<tr>
					<td valign="top"><input class="inputtext" name="chkBox" data-id="3456" and data-name="Doe" type="checkbox" value="A0681042" size="50"></td>
					<td>3456</td>
					<td>Doe</td>
				</tr>

Open in new window


So we can later get the checkbox data-id and data-name with javascript (line 67)
puneet kumarSenior Software Engineer

Author

Commented:
in Popup.jsp how can i give submit button please tell me formate.i update as you suggested but in parent page i debug it it and alert one message it print all employee code and employee name not the checked once.
puneet kumarSenior Software Engineer

Author

Commented:
Now i checked its saying one new error that is -

Uncaught TypeError: Cannot read property 'insertRow' of undefined in parent.jsp after submitting from popup.jsp.
leakim971Multitechnician
Top Expert 2014

Commented:
Did you removed the onclick="doSelectData()" and transform the popup submit button as suggered (type="button") ?
Look like no from the generated popup HTML you post.
puneet kumarSenior Software Engineer

Author

Commented:
can you please provide me what exactly you are telling can you please provide me parent.jsp and popup.jsp working sample according to that i will modified my code . as i am new in java script , Jquery technology please provide me working samples as soon as possible.
leakim971Multitechnician
Top Expert 2014

Commented:
did you get my previous comment ? this is not javascript/jquery but html :
https://www.experts-exchange.com/questions/29156956/Retrieve-data-From-Popup-jsp-and-display-to-Parent-jsp.html#a42936332

please let me know what you don't understand here so we can move on the next step
puneet kumarSenior Software Engineer

Author

Commented:
can you please send me sample working file for both parent.jsp and popup.jsp so i can modified it according to me . i got alert of Employee_ID and Employee_Name on my  parent.jsp page alert(JSON.stringify(listOfCheckbox)) please let me know how can i render it into my jsp page.
leakim971Multitechnician
Top Expert 2014

Commented:
can you please send me sample working file for both parent.jsp and popup.jsp so i can modified it according to me
I sent you an example page and you say it doesn't work.
I asked you a simple question in my previous post and you did not answered

i got alert of Employee_ID and Employee_Name on my  parent.jsp page alert(JSON.stringify(listOfCheckbox))
Thank you for this very important feedback, that mean the code is working fine
Assuming we're already in your parent page, you want to put the result where? Please let me know.
If you've something like this in your parent page : <div id="putMyEmployeeInfosHere"></div>
you can replace :

alert(JSON.stringify(listOfCheckbox))

Open in new window


by the following :

alert(JSON.stringify(listOfCheckbox));
$("#putMyEmployeeInfosHere").html( JSON.stringify(listOfCheckbox) );

Open in new window

puneet kumarSenior Software Engineer

Author

Commented:
sorry its not working when i am printing above div its not printing.and when simply i am asking provide me a working sample of both parent.jsp and popup.jsp why you are not providing .sorry to say but you are confusing me a lot.
leakim971Multitechnician
Top Expert 2014

Commented:
what do you mean by "printing" ?
instead .html could you use .text :
$("#putMyEmployeeInfosHere").text( JSON.stringify(listOfCheckbox) );
add the div in your parent page like this :

</head>
<body>
<div id="putMyEmployeeInfosHere"></div>
<div class="container">
puneet kumarSenior Software Engineer

Author

Commented:
Please tell me i want to display EmployeeID in one column and EmployeeName is on other column in parent.jsp . please let me know how it possible . if you not get my point then just simple i want to display both EmployeeID and EmployeeName in a grid view of parent page.

one more question i want to do same functionality between parent.jsp and popup.jsp without using of jquery or javascript or any other scripting language only by using jsp .how it possible
leakim971Multitechnician
Top Expert 2014

Commented:
one more question i want to do same functionality between parent.jsp and popup.jsp without using of jquery or javascript or any other scripting language only by using jsp .how it possible

so we're so far, almost done, and now you don't want to use JavaScript/jQuery?
you need to create a new question in a separate thread
leakim971Multitechnician
Top Expert 2014

Commented:
i want to display EmployeeID in one column and EmployeeName is on other column in parent.jsp

could you point this in your current parent jsp page?
puneet kumarSenior Software Engineer

Author

Commented:
presently it is displaying like below -

Display.png

but i want to display in parent.jsp like a table . where heading is Employee_ID and Employee_Name and under it values will render.please let me know if you not understand my question.
leakim971Multitechnician
Top Expert 2014

Commented:
replace the current script by this one :
	<script>
		jQuery(function($) {
		   $(".openPopup").on("click", function(event) {
			   event.preventDefault();
			   $("#myModal").show();
			   $("#divForCSSPopup").load("/path/to/your/page.jsp body", function() {
				   $("form", "#divForCSSPopup").submit(function(event) {
					   event.preventDefault();
					   var listOfCheckbox = [];
					   var trs = ["<tr><td>ID</td><td>NAME</td></tr>"];
					   $(":checkbox", this).each(function() {
						   // your checkbox must be like
						   // <input type="checkbox" data-id="123" data-name="someName" value="456" />
                           trs.push("<tr><td>" + $(this).data("id") + "</td><td>" + $(this).data("name") + "</td></tr>");
						   listOfCheckbox.push({employeeID: $(this).data("id"), employeeName: $(this).data("name")})
					   });
					   // checking
					   alert(JSON.stringify(listOfCheckbox));
                       $("#putMyEmployeeInfosHere").html( "<table>" + trs.join("") + "</table>" );
					   $("#myModal").hide();
				   });
			   });
		   });
		});
	</script>

Open in new window

puneet kumarSenior Software Engineer

Author

Commented:
Hi  lekim,

in popup.jsp how can i do pagination on it .one more thing close button ($("#myModal").hide();) is not working on popup.
leakim971Multitechnician
Top Expert 2014

Commented:
so it work, you have now your popup selection in parent?

For the pagination, you should also create a new question
puneet kumarSenior Software Engineer

Author

Commented:
ok i am creating a new question for pagination . yes it works but close button ($("#myModal").hide();)button is not working .
leakim971Multitechnician
Top Expert 2014

Commented:
Here to hande the close button :
	<script>
		jQuery(function($) {
		   $(".openPopup").on("click", function(event) {
			   event.preventDefault();
			   $("#myModal").show();
			   $("#divForCSSPopup").load("/path/to/your/page.jsp body", function() {
				   $(".close", "#divForCSSPopup").submit(function(event) {
					   event.preventDefault();
					   $("#myModal").hide();                                           
                                   });
				   $("form", "#divForCSSPopup").submit(function(event) {
					   event.preventDefault();
					   var listOfCheckbox = [];
					   var trs = ["<tr><td>ID</td><td>NAME</td></tr>"];
					   $(":checkbox", this).each(function() {
						   // your checkbox must be like
						   // <input type="checkbox" data-id="123" data-name="someName" value="456" />
                           trs.push("<tr><td>" + $(this).data("id") + "</td><td>" + $(this).data("name") + "</td></tr>");
						   listOfCheckbox.push({employeeID: $(this).data("id"), employeeName: $(this).data("name")})
					   });
					   // checking
					   alert(JSON.stringify(listOfCheckbox));
                       $("#putMyEmployeeInfosHere").html( "<table>" + trs.join("") + "</table>" );
					   $("#myModal").hide();
				   });
			   });
		   });
		});
	</script>

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
don't forget to close the question if you original question is answered
puneet kumarSenior Software Engineer

Author

Commented:
still close button is not working leakin.
leakim971Multitechnician
Top Expert 2014

Commented:
my bad, in previous code, replace :
$(".close", "#divForCSSPopup").submit(function(event) {
by :
$(".close", "#divForCSSPopup").click(function(event) {

your close button MUST have the "close" class
puneet kumarSenior Software Engineer

Author

Commented:
still not woking my code is below -

<td>
                              <INPUT align="center" type="button" value="Open Employee List" class="buttonstyle openPopup" onmouseover="this.className='buttonstyleonmouseover'" onmouseout="this.className='buttonstyle'">
                              <!-- <button class="openPopup">OPEN POPUP</button> -->
                                          <div id="myModal" class="modal">
                                              <div class="modal-content">
                                                  <span class="close">&times;</span>
                                                        <p><div id="divForCSSPopup"></div></p>
                                              </div>
                                          </div>
                        </td>

please check and let me know where i am wrong .
Multitechnician
Top Expert 2014
Commented:
the close button is outside the popup so we need to use :
	<script>
		jQuery(function($) {
				   $(document).on("click", ".close", function(event) {
					   event.preventDefault();
					   $("#myModal").hide();                                           
                                   });
		   $(".openPopup").on("click", function(event) {
			   event.preventDefault();
			   $("#myModal").show();
			   $("#divForCSSPopup").load("/path/to/your/page.jsp body", function() {
				   $("form", "#divForCSSPopup").submit(function(event) {
					   event.preventDefault();
					   var listOfCheckbox = [];
					   var trs = ["<tr><td>ID</td><td>NAME</td></tr>"];
					   $(":checkbox", this).each(function() {
						   // your checkbox must be like
						   // <input type="checkbox" data-id="123" data-name="someName" value="456" />
                           trs.push("<tr><td>" + $(this).data("id") + "</td><td>" + $(this).data("name") + "</td></tr>");
						   listOfCheckbox.push({employeeID: $(this).data("id"), employeeName: $(this).data("name")})
					   });
					   // checking
					   alert(JSON.stringify(listOfCheckbox));
                       $("#putMyEmployeeInfosHere").html( "<table>" + trs.join("") + "</table>" );
					   $("#myModal").hide();
				   });
			   });
		   });
		});
	</script>

Open in new window

puneet kumarSenior Software Engineer

Author

Commented:
Great Job leakim . thanx a ton for your valuable support
leakim971Multitechnician
Top Expert 2014

Commented:
you welcome

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial