?
Solved

How to pass data to a jQuery modal dialog so that the data can be used to create dynamic content within the dialog?

Posted on 2014-01-17
5
Medium Priority
?
12,119 Views
Last Modified: 2014-01-21
Experts,

I am creating modal dialog content by calling an external URL via the "href" attribute. I'd like to be able to pass an integer (stored in the "id" attribute of each hyperlink) to the external URL before creating the dialog's content so that I can use the integer to create dynamic content.

I understand that the integer can be passed via the jQuery data() method but, I have not done so before. I also don't understand per the jQuery documentation how to retrieve this integer to use during modal dialog content creation.

Is this possible?

Here's what I have so far...this creates the modal dialog, calls the external URL and fills the dialog with the content within the "email.php" file.

If I could obtain the value of the "id" tag, I could use it within the email.php file to create dynamic content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Data() pass and retrieval</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script>
$(function() {        
	$(".email_link").click(function(e) {
		e.preventDefault();
		var url = $(this).attr("href");
		var mytitle = "Share this project via email";
		$("#dialog").load(url,null,function() {
			$("#dialog").dialog({
				title: mytitle,
				modal: true,
				width: 450,
				close: function(event, ui) {
				$("#dialog").empty(); // remove the content
				}//END CLOSE
			});//END DIALOG
		});//END DIALOG
	});//END MODAL_LINK
});//END FUNCTION
</script> 
</head>

<body>
<div id="dialog"></div>

<a href="email.php" class="email_link" id="50">SHARE</a>
<br /><br />
<a href="email.php" class="email_link" id="51">SHARE</a>
</body>
</html>

Open in new window


email.php
<?php
require('db_connection.php');
echo'THE INTEGERS VALUE IS...';
//RETRIEVE INTEGER VALUE AN PLACE IT HERE
//WOULD LIKE TO USE INTEGER VALUE TO THEN QUERY MY DB TO MAKE DYNAMIC CONTENT
?>

Open in new window

0
Comment
Question by:evibesmusic
[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
  • 2
5 Comments
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39790026
$(function() {        
	$(".email_link").click(function(e) {
		e.preventDefault();
		var url = $(this).attr("href");
               
                var qryString = $(this).attr("id");
                var fullUrl = url+'?id='+qryString
                 
		var mytitle = "Share this project via email";
// change url to fullURL
		$("#dialog").load(fullUrl,null,function() {
			$("#dialog").dialog({
				title: mytitle,
				modal: true,
				width: 450,
				close: function(event, ui) {
				$("#dialog").empty(); // remove the content
				}//END CLOSE
			});//END DIALOG
		});//END DIALOG
	});//END MODAL_LINK
});//END FUNCTION

Open in new window

0
 

Author Closing Comment

by:evibesmusic
ID: 39790033
Geez!

Too easy! Thank you for demystifying this for me...don't even need to use the data() method.

Cheers!
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39790048
Actually I had that wrong.  See my sample using an external url http://jsbin.com/AjaPipa/1/edit  Just add your click function.

$("#dialog").load(url).dialog({
			
				title: mytitle,
				modal: true,
				width: 450,
               close: function(event, ui) {
				$("#dialog").empty(); // remove the content
				}//END CLOSE
				
			
		});//END DIALOG

Open in new window

0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39790052
Did that first one work?  I know the full url portion would work.  But when I tested it I hand to change the dialogue code.  

Good luck!
0
 

Author Comment

by:evibesmusic
ID: 39799122
@Padas:

The first solution worked for me.

Then I realized when testing with FireBug that because I am calling the external URL to create the dialog content, I can pass variables via the URL.

This basically made this question a non-issue.

Thanks for your assistance.
<script>
$(function() {        
	$(".email_link").click(function(e) {
		e.preventDefault();
		var mytitle = $(this).attr("title");
		var url = $(this).attr("href");
		$("#dialog").load(url,null,function() {
			$("#dialog").dialog({
				title: mytitle,
				modal: true,
				width: 450,
				buttons: {
					"Send Email": function() {
						document.getElementById("email-form").submit();
					}
				},
				close: function(event, ui) {
					$("#dialog").empty(); // remove the content
				}//END CLOSE
			});//END DIALOG
		});//END DIALOG
	});//END MODAL_LINK
});//END FUNCTION
</script>

Open in new window

0

Featured Post

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

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