?
Solved

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

Posted on 2014-04-14
6
Medium Priority
?
5,283 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 61

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 61

Accepted Solution

by:
Julian Hansen earned 2000 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 does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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 61

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

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

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

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
In this post we will learn how to connect and configure Android Device (Smartphone etc.) with Android Studio. After that we will run a simple Hello World Program.
This tutorial covers a step-by-step guide to install VisualVM launcher in eclipse.
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…
Suggested Courses
Course of the Month9 days, 8 hours left to enroll

612 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