How to pass data (a dropped element) to a jQuery dialog?

Question

Hi There, This is probably a simple one but I cant get my head around it.

Basically I have a list that is set up to accept dropped elements. I want a jQuery dialog to display in response to a dropped element and, upon the user pressing OK, post to the server with info regarding said dropped element.

My current problem is that I have to setup the jQuery dialog prior to calling it (in document load) and so have to define the function that runs when Ok is pressed. However I can't access the dropped element at this stage as I don't know what it is.

Currently I am setting some invisible spans to hold the data from the dropped element that I need and reading it back out when the function bound to the Ok runs. Im sure there has to be a better way.

Thanks in advance, and apologies is this question is somewhat confusing.

Answer 1

Why not stick it in a variable? Either a global one, or one that can be accessed by both the writing code and the reading code.

Answer 2

The dialog is actually a div, which stays hidden (you know that), so before actually showing it, just add the content in it with jquery

Suppose the dialog has id-"dialog", you se it with

$("#dialog").innerHTML(yourDiv);

just before you show it

Answer 3

That way sounds fair, as would the similar solution of using <input type="hidden" /> fields on the page or dialog.

If you declare a variable outside of any function or clause, it will be accessible in all your JS. For example:

<script type="text/javascript" language="javascript">

    var info;

    //...

    drop: function(){
        info = {
            info1: "value",
            info2: "value"
        }
    }

    //...

    function clickOK(){
        alert(info.info1);
        alert(info.info2);
    }

But your way really is fine!

Answer 4

There are a lot of ways to do this:

I assume that you have created dialog using modal window, am I right?

So you have a a dialog with the message and the button, let's suppose that the button will pass some certain parameters on sumbit.

Now regarding to ways:

1. Use jquery data() function if your caller element is created dynamically:

   $('#someDiv').data('someVar', 'itsVal');

2. Use attributes:

   $('#someDiv').attr('rel', 'itsVal');

or inject it through html

<div id="someDiv" rel="itsVal">Hello</div>

On showing dialog you can access the value using the following ways:

var $myVar = $('#someDiv').data('someVar');

or

var $myVar = $('#someDiv').attr('rel');

Theese ones are my default ways to solve this issue. Hope it helps