pass variable to jquery dialog

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

Drew Gaynor · Accepted Answer · 2011-12-15 13:43:32Z

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.

edited Dec 15, 2011 at 13:43

answered Dec 15, 2011 at 2:58

Drew Gaynor

8,4925 gold badges42 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Mat41 Over a year ago

Thank you for you quick response. I see you have given me an example of initiaing the variable inside the JS. I should have mentioned the : <a href='#' id='dialog_link'... part of the code is inside an ASP loop. One of the records in this loop is the variable I would like to pass to the jquery window. This is whay I used this as a an example of what i wanted to do : <a href='#' id='dialog_link(someValue)'

Drew Gaynor Over a year ago

@Mat41: could you post the code of your ASP loop? That would be very helpful. I've edited my response with something that I think will work.

Mat41 Over a year ago

mmmmmm Im not so sure I hit the correct edit button (first time on this forum) beause ny addition does not appear to be below and 'Edit' heading like yours. I have posted my loop above under the 'How it is used in the ASP loop is' text hopefully you can see it

Drew Gaynor Over a year ago

@Mat41: See my second edit, it should give you what you want. Don't forget to accept my answer (check the tick to the left of it) if you found this helpful, and welcome to stack overflow!

Mat41 Over a year ago

Hi JackieChiles - Please forgive my basic understanding of JQuery. So I see $('#dialog').text(value); in the opendialog function prints the value I am passing to screen, great. I have commented this out ffor now. If I want to assign this to value to an existing hidden form variable within my dialog window when the user clicks the OK im my dialog window how woudld do this? I am getting value is undefined when I place this line inside my OK function (just before the PostItNote.Submit) line PostItNote.ProductID.value = text(value); Thank you in advance!

|

Collectives™ on Stack Overflow

pass variable to jquery dialog

1 Answer 1

Edit

Edit 2

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

Edit 2

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related