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.