Solved

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

Posted on 2014-04-14
6
3,558 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
  • 3
  • 3
6 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:roy_sanu
Comment Utility
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
Comment Utility
data got displayed
0
 
LVL 51

Expert Comment

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

Open in new window

Somewhere in your success function?
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Today I am discussing AJAX problems in IE7 and I bet this will helps many guys out here who have problems with AJAX work. Lets start with the discovery of problem and then we will talk about its different solutions. My last two projects included …
Introduction This article is the first of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article explains our test automation goals. Then rationale is given for the tools we use to a…
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …

763 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

7 Experts available now in Live!

Get 1:1 Help Now