Pass value to a jqmodal window

Hi there,

I would like to use jqmodal window  (http://dev.iceburg.net/jquery/jqModal/)
to open a window and send a message in it.
But i need that this window is create dynamically with a var.

Example


<script>

$().ready(function() {
  $('#ex2').jqm({ajax: 'mypage.cfm?ref=DynamicVariableHereFromtheHrefinsideCfloop', trigger: 'a.ex2trigger'});
});
</script>


<cfloop index="Ref" from="1" to="10" step="1">
<a href="#" class="ex2trigger">#ref#</a>
</cfloop>

Si i need that the modal get the #ref# from the href to create the modal window.

Thanks in advance


quarkmikeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

StealthyDevCommented:
I assume you are looking JQuery window to open a AJAX form?

You can use onLoad callback to do this.

var myLoad = function(hash){ $('form',hash.w).ajaxForm(); };
  $('#dialog').jqm({onLoad:myLoad});
0
quarkmikeAuthor Commented:
No i need to open a CFM page on my modal window and display a message depend of the #ref# i send on this window.

So i need to get the value set inside the href (ID for exemple like this <a href="#" class="ex2trigger" id="ref#ref#">) or the valu inside the div.

0
StealthyDevCommented:
Hello, i am not able to fully understand you.

But i assume that you have a CFM page that render an anchor tag with some ID.
You want that object in AJAX Modal Dialogue.
If this is true, try executing the attached code.

Regards.
I have used JQuery UI v1.7.2
placed the code for testing in
jquery-ui-1.7.2.custom\development-bundle\demos\dialog

modalTest.html
myajax.html
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

quarkmikeAuthor Commented:
This is great but the <a href="#" class="ex2trigger" id="MyRef">myid</a> will be on the same page that the link is.

I just need to open a modal window who contains the page 'mypage.cfm' from a href like <a href="#" id="15">Click to add to basket</a>

When you click on this link the modal window open and the mypage.cfm receive the id of the href (15).

Mypage.cfm will be like this

<cfoutput>#ref#</cfoutput>

Sorry i'm french and sometimes it's very difficult for me to explain.


0
azadisaryevCommented:
you can do it like this using jqmodal (though i do advise you to switch to using jquery UI instead):

<script type="text/javascript">
$(document).ready(function() {
  $('#ex2').jqm({ajax: '@href'});
  $('a.ex2trigger').click(function(){$('#ex2').jqmShow();});
});
</script>
<cfoutput>
<cfloop index="ref" from="1" to="10" step="1">
<a href="mypage.cfm?ref=#ref#" class="ex2trigger">click to add this to cart</a>
</cfloop>
</cfoutput>
<div id="#ex2"></div>


Azadi
0
quarkmikeAuthor Commented:
Hmmm Sorry Azadi this don't work that open a new page not a modal :/

(If you have an example to do the same think using jquery UI don't hesitate :) )
0
StealthyDevCommented:
Is this the one you are looking for in UI ??

<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Dialog - Basic modal</title>
	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
	<script type="text/javascript" src="../../ui/ui.core.js"></script>
	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
	<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
	<script type="text/javascript" src="../../external/bgiframe/jquery.bgiframe.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<script type="text/javascript">
	$(function() {
		$("#dialog").dialog({
			bgiframe: true,
			height: 140,
			modal: true
		});
	});
	</script>
</head>
<body>
	<a class="ex2trigger" href="mypage.cfm?ref=#ref#">
	  Open as dialog
	</a>

	<script type="text/javascript">
	$(function (){
		$('a.ex2trigger').click(function() {
			var url = $(this).attr("href");
			var dialog = $('<div style="display:hidden"></div>').appendTo('body');
			dialog.load(
				url, 
				{},
					function (responseText, textStatus, XMLHttpRequest) {
					dialog.dialog();
				}
			);
			return false;
		});
	});
	</script>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
StealthyDevCommented:
If you want Modal dialogue, change the dialogue.dialogue() to:

dialog.dialog({ modal: true });

Best Regards.
0
quarkmikeAuthor Commented:
Thanks a lot all for your help
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft IIS Web Server

From novice to tech pro — start learning today.

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.