Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2013-06-18
12
Medium Priority
?
619 Views
Last Modified: 2013-06-25
Experts,

If I have dynamically created hyperlinks on my page, is there any way to load the URL found in the href tag into a jquery modal window once the page has loaded?

Example dynamic links found on my page:

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

I am not sure if this is possible seeing that you pass the jquery script within the <head></head> tags but, if this were, this would be great.

Is there another way to accomplish this that I am not aware of?
0
Comment
Question by:evibesmusic
12 Comments
 
LVL 2

Expert Comment

by:jainnaveen
ID: 39258429
try this
.load() comes from jQuery, http://api.jquery.com/load/

$("#somediv").load(url).dialog({modal:true});
0
 
LVL 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 2000 total points
ID: 39258541
Yes you can
Assumes
1) Dialog id is modaldialog
2) You are using something like JQueryUI
If you are using a different modal dialog library then change the marked line accordingly
$(function() {
  $('a').click(function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    $('#modaldialog').load(url,null, function() {
       // ASSUMPTION (2): If not JQueryUI - then change this line
       $('#modaldialog').dialog({modal: true});
    });
  });
});

Open in new window

0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 39259468
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.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/A_11271-Understanding-Client-Server-Protocols-and-Web-Applications.html

Best regards, ~Ray
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 60

Expert Comment

by:Julian Hansen
ID: 39259719
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});
});

Open in new window


Assuming a library like jqueryUI.

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

Author Comment

by:evibesmusic
ID: 39260852
@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>

Open in new window


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>

Open in new window

0
 

Author Comment

by:evibesmusic
ID: 39260887
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>
0
 

Author Comment

by:evibesmusic
ID: 39260944
@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>

Open in new window

0
 

Author Comment

by:evibesmusic
ID: 39261069
@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']);
}

Open in new window


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>

Open in new window


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>

Open in new window

0
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 39261576
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.

My first post dealt with this

You can't have two elements with the same id - rather use a class

<a class="modal_link" ... ></a>
<a class="modal_link" ... ></a>

Then make your JQuery selector class based

$(".modal_link").click( ...

Just a note if you are going to select on an id you have to prefix the selector with a '#' - class requires a '.'

$("#modal_link").click( ...

But as mentioned above only do this if you want to select a single element - duplicate ID's are not allowed.
0
 

Assisted Solution

by:evibesmusic
evibesmusic earned 0 total points
ID: 39263251
@julianH:

OK...sorry that I missed that. New to jQuery (if you couldn't tell...LOL).

The script below works but, it still only opens one of the "modal_link" windows per page load.

I'll close this question and post another asking how to modify the script so that each link works every time.

<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>
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 39265014
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.
0
 

Author Closing Comment

by:evibesmusic
ID: 39274173
Thank you Experts!

Code now opens dynamic content in modal dialog. I have some tweaking I still need to do to make it perfect. Look for my next post.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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

916 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