Solved

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

Posted on 2014-04-14
6
3,838 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 54

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 54

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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 

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 54

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Video by: Michael
Viewers learn about how to reduce the potential repetitiveness of coding in main by developing methods to perform specific tasks for their program. Additionally, objects are introduced for the purpose of learning how to call methods in Java. Define …
The viewer will learn how to implement Singleton Design Pattern in Java.

770 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