evibesmusic
asked on
How to pass data to a jQuery modal dialog so that the data can be used to create dynamic content within the dialog?
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.
email.php
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>
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
?>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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!
Good luck!
ASKER
@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.
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>
ASKER
Too easy! Thank you for demystifying this for me...don't even need to use the data() method.
Cheers!