Solved

how to make a ajax call to display the data in a pop up

Posted on 2014-04-14
6
4,301 Views
Last Modified: 2014-04-17
I have this event.jsp in a url(event/event.jsp) with info below,  i have to  display the data as a poupup on click of the event in some other jsp i have a  submit button.how to make a ajax call to display this data in a pop up

<div id="display">
        <table border="5">
              <tr>
                <th>COMPAIGN_ID</th>
                <th>RECORD_ID</th>
                <th>SESSION_ID</th>
                <th>CONNECTEDPHONE</th>
                <th>SESSION_DURATION</th>
              </tr> 

            <c:forEach var="rc" items="${listKey}"> 
                <tr bgcolor="grey">     
                    <td><c:out value="${rc.compaignID}"></c:out></td>
                    <td><c:out value="${rc.recordID}"></c:out></td>
                    <td><c:out value="${rc.sessionID}"></c:out></td>
                    <td><c:out value="${rc.connectedPhone}"></c:out></td>
                    <td><c:out value="${rc.sessionDuration}"></c:out></td>
                </tr>
            </c:forEach>
             </table>
    </div>

Open in new window



I would like to use jquery to call this url (event/event.jsp) and display the data in a popup, how to achieve this
$( "#submit").click( function() {


});

Open in new window

0
Comment
Question by:roy_sanu
[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
  • 3
6 Comments
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 40000917
The ajax part is pretty simple.
var url = 'path/to/html/code.html';
$( "#submit").click( function() {
  $.ajax({
      url: url,
      success: function (html) {
         // display popup here           
      }
  });
});

Open in new window


How are you wanting to display your popup?
0
 

Author Comment

by:roy_sanu
ID: 40000944
i have a dialog something like this, i want  the  data in the dialog how  to do that

<div id="dialog" class="dialog" style="display:none;"></div>
0
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40001216
To add the html to the dialog is shown below. To activate your dialog - depends on how you are managing dialogs.
var url = 'path/to/html/code.html';
$( "#submit").click( function() {
  $.ajax({
      url: url,
      success: function (html) {
         $('#dialog').html(html);
// ACTIVATE DIALOG HERE
     }
  });
});

Open in new window

0
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 

Author Comment

by:roy_sanu
ID: 40001765
It is showing the dialog but it is not displaying the data
$.ajax({
		type : "get",
		url : "/event/event.jsp",
		data : "",
		success : function(data) {
			
			$("#dialog").dialog(
					{
						modal : true,
						title : "Rights",
						buttons : {
							"Close" : function() {
								$("#dialog").dialog('close');
							}
						}
					}).dialog('open');
		}
	});

Open in new window

0
 

Author Comment

by:roy_sanu
ID: 40005823
data got displayed
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 40006080
Assuming you added a
$('#dialog').html(data)

Open in new window

Somewhere in your success function?
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction This article is the last of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers our test design approach and then goes through a simple test case example, how …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
This tutorial will introduce the viewer to VisualVM for the Java platform application. This video explains an example program and covers the Overview, Monitor, and Heap Dump tabs.

688 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