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
568 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
Comment Utility
try this
.load() comes from jQuery, http://api.jquery.com/load/

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

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
Comment Utility
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 108

Expert Comment

by:Ray Paseur
Comment Utility
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
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
@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
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:evibesmusic
Comment Utility
@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
Comment Utility
@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 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
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
Comment Utility
@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 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now