Send data to new window using Jquery Ajax

Desired Output

click the image to zoom













index.jsp

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<html lang="en">
    <head>
        <title>Post data in new window</title>
            
         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="js/PostMethod.js" type="text/javascript"></script>
   
    </head>
    <body>
      
<form name="demo">
<br><br>
<input type="button" value="First click here" onclick="jquery_post_method()"> <br><br>
<input type="text" name="firstName">
</form>

       
    </body>
</html>



popup.jsp

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Data is displayed in new window</title>

<script type="text/javascript">
function getTableNo(table_no)
{ 
//opener.document.FormName.FieldName.value = document.childFormName.childFieldName.value;
  //opener.document.FormName.FieldName.value=DynamicValue;
   
    opener.document.demo.firstName.value = table_no;
    window.close();
}
</script>

</head>
<body>

<% String val = request.getParameter("output"); %>
   
    <table style="background-color:#FFFFFF;border-collapse:collapse;border:1px solid #000000;color:#000000;width:100%" cellpadding="3" cellspacing="3">
    <tr>   
    <td id="table_no" onclick="getTableNo('23')">23 (click here)</td> <!-- put dynamic value in place of 24 -->
    <td><%=val%></td>
    </tr>
   
     <tr>   
    <td id="table_no" onclick="getTableNo('24')">24 (click here)</td> 
    <td><%=val%></td>
    </tr>
   
     <tr>   
    <td id="table_no" onclick="getTableNo('23')">23 (click here)</td> 
    <td><%=val%></td>
    </tr>
   
     <tr>   
    <td id="table_no" onclick="getTableNo('24')">24 (click here)</td> 
    <td><%=val%></td>
    </tr>
   
    </table>
   
</body>
</html>



Create a new folder. Name it as js.  Write PostMethod.js inside JS folder
PostMethod.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
function jquery_post_method()
{

var output = "Rahul";

$.ajax({
    type: "POST",
    url: "popup.jsp",
    data: "output=" + output,
    
    success: function(data){
       
        var win = window.open("","","width=800, height=400, scrollbars=1 , resizable=yes");
        // window.open can have only 3 values ("", "", "")
        win.document.write(data);
       
    }
});

}


Note: 
1] Make sure that Jquery file is the first script loaded on your page.
2] actual syntax is {first:first, second:second, type:"abc"},
    ie. name value pair 

     $.ajax({
    type: "POST", 
    url: "Brokerage.jsp",
    data: {first:first, second:second, type:"abc"},
     success: function(response){
       var win = window.open("","","width=800, height=400,resizable=yes");
       win.document.write(response);      
    }
}); 

 

Desired Output

No comments:

Post a Comment

Subscribe to: Posts (Atom)