• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1206
  • Last Modified:

I'm needing to dynamically create a prettyPhoto (modal window) link...


I have a select menu and based off the selection I'm dynamically creating a link on the page for the PrettyPhoto modal window to appear but it doesn't seem to be working. I placed a static link on the page and it works fine. I believe it's because the page loads and the pretty photo script can't recognize dynamically created links.

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>

	function addPublication() {
		$("option", "select[name='magazine']").click(function() {
			if( $(this).is(":selected")) {
				 $('#myURL').html("<a href='edit_issues.cfm?magazine_id="+ $(this).val() +"&iframe=true&amp;width=700&amp;height=500' rel='prettyPhoto[iframe]'>Edit/Add Issues</a>");
			else {

				component = "cfc.magazines" 
				<select name="magazine" onClick="addPublication();">
					<option value="">Please Choose A Magazine</option>
					<cfoutput query="qMagazines">
					<option value="#record_id#">#magazine_name#</option>
				</select><br /> 

		<div class="gallery clearfix">
			static link that works > <a href="edit_issues.cfm?magazine_id=1&iframe=true&amp;width=700&amp;height=500" rel="prettyPhoto[iframe]">Edit/Add Issues</a><br />
			dynamic link that is created just fine and exactly like the link above but when clicked doesn't pull up the PrettyPhoto (Modal) window<div id="myURL"></div>
<script type="text/javascript" charset="utf-8">
	$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});

Open in new window

1 Solution
You could put this in your Javascript function right after creating the dynamic link

      $("#myURL a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});

brihol44Author Commented:
That works if I make the right selection the first time. If I close the modal window and try selecting another selection from the menu it does the same thing before. I'm playing around with it right now but if you know why it wouldn't work after making another selection then please let me know. I'm obviously a beginner here at JQuery.


Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now