pass variable to jquery dialog - jquery-ui

Question

I am wanting to pass a variable to a jquery dialog window. I am using classic ASP and have onyl really touched on the world of jquery. I have spent a few hours researching and tring to use the .data method but are having trouble. Your time and assitance would be very much apriciated!
Here is my stripped down page:
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
show: "slide",
hide: "fade",
width: 452,
modal: true,
buttons: {
"Ok": function() {
PostItNote.submit();
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
});
and this is how I call the window:
<a href='#' id='dialog_link' CLASS='OrangeButton'> Show Window </a>
and the contents of my window:
<div ID="dialog" TITLE="Periodic Report">
stuff here
</div>
Why can I not do this:
<a href='#' id='dialog_link(someValue)' CLASS='OrangeButton'> Show Window </a>
Thank you in advance
How it is used in the ASP loop is:
do until Products.EOF
--other code here---
<a href='#' id='dialog_link(Products(0))' CLASS='OrangeButton'>
--other code here---
products.moveNext
loop

Answer 1

The dialog is just a div on your page, so it can't really be "passed" a value. It can be manipulated by any JavaScript variables in scope though. You could change your click handler to use a variable to manipulate the dialog:
var myVariable = "Some new text for the dialog";
$('#dialog_link').click(function(){
//New code to "pass" a value to the dialog
$('#dialog').text(myVariable);
$('#dialog').dialog('open');
return false;
});
Or you could use the open member of the dialog:
...
width: 452,
open: function() { $('#dialog').text(myVariable); },
modal: true,
...
To make changes to the dialog div whenever it is opened.
The code id='dialog_link(someValue)' will not do anything, as the id attribute cannot make function calls, only event handlers like onchange can do that. Even if it could, dialog_link is not a function that can be passed a value. It is just the id of another element.
I'm sure you're probably already aware, but the jQuery documentation is very useful- here are the docs for dialog.
Edit
In response to your comment: I would drop the $('#dialog_link').click(); statement and change the link code to the following:
<a href='#' class='OrangeButton' onclick='openDialog(someValue);'>Show Window</a>
And then add the JavaScript function to be called on the click event:
function openDialog(value) {
$('#dialog').text(value);
$('#dialog').dialog('open');
}
Edit 2
Inside of the ASP loop something like this should do the trick:
Response.Write("<a href='#' onclick='openDialog(" & Products(0) & ");'>Show</a>")
This will create an <a></a> element on the page with an onclick handler that passes the desired value to openDialog, making it accessible by the dialog.
I changed the code for the link slightly so that it all fit on one line, but you could always add back the class='OrangeButton' and all that if you'd like.