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
591 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 55

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 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 109

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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
LVL 55

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 55

Accepted Solution

by:
Julian Hansen earned 500 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 55

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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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.

821 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