Is it possible to click on a hyperlink which contains a dynamic URL, and have that page open in a jquery modal window?

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Ray Paseur

It sounds like you want to have the onload or document.ready event also trigger a window.open event. Yes, this is entirely possible. Since PHP is a server-side script and since PHP is used to generate all of the client-side (HTML, CSS, JS) documents, the PHP script can know the contents of the URLs and insert the appropriate URL into the window.open function call. I don't know enough jQuery to give you the syntax, but someone else can help with that part. The PHP part would simply put the URL into a variable that becomes part of the inline JavaScript in the head or body of the HTML document.

The "deep background" information that underpins the concept is available in this article.
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/A_11271-Understanding-Client-Server-Protocols-and-Web-Applications.html

Best regards, ~Ray

It sounds like you want to have the onload or document.ready event also trigger a window.open event

@Ray - the window.open will not result in a modal dialog though - this would need to be an in-page div based dialog if I understand the question correctly.

If you want to pop a dialog on page load you can simply do this like so

$(function() {
   // Open the dialog on page load.
   $('#modaldialog').dialog({modal: true});
});

Assuming a library like jqueryUI.

Doing your own modal popups is relatively straight forward and can be invoked in a similar way.

ASKER

@julianH:

I took a look at your code and tried to adopt it. No luck so far. I'd only like to load the dialog when a link is clicked. Currently the dialog is opening upon page load and not when clicked on via the links generated to the page.

Also, is there a way that I can assign an ID to each link so that only certain links open the dialog box?

This is what I have in the <head></head> of my page:

<script>
$(function() {   	
		  $("a").click(function(e) {
			e.preventDefault();
			var url = $(this).attr("href");
			$("#dialog").load(url,null, function() {
			   $("#dialog").dialog({modal: true});
			});
		  });

		$("#dialog").dialog({					
			width: 600,
			modal: true,
			close: function(event, ui) {
				$("#dialog").remove();
			}
		});	
});
</script>

This is what I have in the <body></body>:

<div id="dialog" style="display:none"></div>

<a href="?cmd=search&type=facility&id=100">Click here</a>
<br /><br />
<a href="?cmd=search&type=facility&id=101">Click here</a>

ASKER

Think this is getting closer...no longer opens on page load but, doesn't open when I click a link with an ID of "modal_link".

<script>
$(function() {
              $("modal_link").click(function(e) {
                  e.preventDefault();
                  var url = $(this).attr("href");
                  $("#dialog").load(url,null, function() {
                         close: function(event, ui) {
                        $("#dialog").remove();
                  }
                  });
              });
});
</script>

ASKER

@All:

OK...I've got it to work, sort of. A couple things going on here.

Because all of my links have the same id property, only the first dynamic link created on my page opens in the modal dialog.

Additionally, when I click on the first dynamic link on the page it opens the modal dialog as desired but, if it is closed, it can not be opened again without refreshing the page.

Any way to fix these issues? Thanks Experts.

Here's my code:

<head>
<script>
$(function() {   	
	$("#modal_link").click(function(e) {
		e.preventDefault();
		var url = $(this).attr("href");
		$("#dialog").load(url,null,function() {
			$("#dialog").dialog({
				width:700,
				modal: true,
				close: function(event, ui) {
				$("#dialog").remove();
				}//END CLOSE
			});//END DIALOG
		});//END DIALOG
	});//END MODAL_LINK
});//END FUNCTION
</script>
</head>
<body>
<a id="modal_link" href="?cmd=preview&id=100>Click HERE</a>
<br /><br />
<a id="modal_link" href="?cmd=preview&id=100>Click HERE</a>
</body>

ASKER

@Ray_Paseur:

Per your point above, if I do something like this in the head of my page, I could feasibly load the dynamic id's of my links into the javascript so that it would know which links to apply the dialog too?

I guess I'd need help understanding how to configure an array that would be accepted by the javascript?

PHP snippet of an attempt to create an array to feed to the java script below it.

$get_id_query = mysql_query($project_list) or die ("Could not run query: " . $project_list . "<br />\n" . mysql_error () );//query the database for entries
while($result = mysql_fetch_array($get_id_query,MYSQL_ASSOC)){
	//CREATE AN ARRAY
	//THE QUESTION IS WHAT TYPE OF ARRAY CAN I PASS TO THE SCRIPT BELOW
	$modal_link_array[] = array('#modal_link'.$result['id']);
}

javascript which would hopefully accept the array "$modal_link_array"

<script>
$(function() {   	
	$("<?php echo json_encode($modal_link_array); ?>").click(function(e) {
		e.preventDefault();
		var url = $(this).attr("href");
		$("#dialog").load(url,null,function() {
			$("#dialog").dialog({
				width:700,
				modal: true,
				close: function(event, ui) {
				$("#dialog").remove();
				}//END CLOSE
			});//END DIALOG
		});//END DIALOG
	});//END MODAL_LINK
});//END FUNCTION
</script>

This is the code that prints to the screen when I try the methods above.

<script>
$(function() {   	
	$("Array").click(function(e) {
		e.preventDefault();
		var url = $(this).attr("href");
		$("#dialog").load(url,null,function() {
			$("#dialog").dialog({
				width:700,
				modal: true,
				close: function(event, ui) {
				$("#dialog").remove();
				}//END CLOSE
			});//END DIALOG
		});//END DIALOG
	});//END MODAL_LINK
});//END FUNCTION
</script>

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

The reason is because of this line

$("#dialog").remove();

You are removing the dialog from the page when you close it so the next open will be against a non existent element.