CODEWITHSUNDEEP
javascriptjqueryjquery-uidialog
Madhu
Madhu

Reputation: 1019

Pass data to a jqueryUI Dialog

For a web-app I'm developing, I need to pass the current user to a jqueryUI dialog box. Right now, I'm trying out simple examples to get to this point. I'm trying to pass the contents of "p" tag from parent page, to be displayed in the jqueryUI dialog. 

$(document).ready(function(){
    $('#test').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
            .data('test',$("test_p"))
            .load($link.attr('href') + ' #content')
            .dialog({
                modal: true,
                autoOpen: false,
                title: $link.attr('title'),
                width: 500,
                height: 300
            });
        $link.click(function() {
            $dialog.dialog('open');
            return false;
        });
    });

Here, test_p is the p tag I want to send to my dialog box. I am displaying the "content" div from a HTML file - 

<html>
<head>
<title>Add link</title>
<body>
    <div id="content">
                    <!-- CONTENT OF <P> FROM THE CALLER PAGE -->
        <form id="info" method="POST" action="/">
            Link : <input type=text name="thelink"/><br>
            tag : <input type=text name="thetags"/><br>
            <input type=submit name='submit' value="submit"/>
        </form>

    </div>
</body>

I want it such that, the content of the p tag is displayed in the dialog.

Is .data() the way to do this? Or is there a better way to do this?

And, sorry if I've got some terminology wrong... I'm rather new to jquery.

Upvotes: 2

Views: 1517

Answers (2)

ChrisP
ChrisP

Reputation: 10116

The .data() method attached to the dialog element would be a good solution to pass the data. You might also look at the "open" method of the jQueryUI dialog widget which would allow you to use the value and insert it or perform some other action when the dialog window is displayed.

Upvotes: 0

Manuel Leuenberger
Manuel Leuenberger

Reputation: 2367

The dialog widget allows you to set the content via $dialog.html('<p>hello world</p>'). This works because the dialog is built around the element and not in the element, so the content of the dialog element is exactly the content of the actual dialog.

Upvotes: 1

Related Questions