javascript/jQuery: how to use var from click event in jQuery dialog?

Question

Using jQuery dialog to open a modal box to confirm e.g. to delete a specific user from friends. I would like to use the friends name in the modal box (currently I print it with php in the name-tag of the link and use jQuery to get it from there).

//create the html for the modal box
var dialog_html_ignore = $('<div id="dialog-confirm" title="Ignore Friend Request?"><p>Some text... ignore [put the name here], ...?</p></div>')

//set up the jQuery dialog
var dialog_ignore=$( dialog_html_ignore ).dialog({
        autoOpen:false,
        resizable: false,
        modal: true,
        buttons: {
            "No": function() {
                $( this ).dialog( "close" );
            },
            "Yes": function() {
                window.location.href = targetUrl;
            }
        }
    });

//open the dialog on click event
$('.click_ignore').click(function() {
    window.fName = $(this).attr("name");
    alert(fName); /* this gives me the right username */
    dialog_ignore.dialog('open');
    return false;
});

How/what is the best way to use the username variable actually as a part of the text (in the html of the modal box)??

Any help is highly appreciated, thank you in advance!! :)

@RajaGopal: yes, the frame (which value is in the name attribute of the clicked a element)... — Chris
– Chris, Commented May 24, 2012 at 13:24
this is really easy to do as Rory's solution points out, since the dialog window is actually just a div on the parent page, all of your selectors work just as if it were a DOM element on your page (since it is) — jbabey
– jbabey, Commented May 24, 2012 at 13:31
@jbabey: yes, you are right.. I can see now how easy it actually is! Thank you for very much your help and sorry, I am still quite new and unexperienced... :S — Chris
– Chris, Commented May 24, 2012 at 13:36

Rory McCrossan · Accepted Answer · 2012-05-24 13:25:51Z

2

Try this:

var dialog_html_ignore = $('<div id="dialog-confirm" title="Ignore Friend Request?"><p>Some text... ignore <span class="name"></span>, ...?</p></div>')

$('.click_ignore').click(function() {
    window.fName = $(this).attr("name");
    $(".name", dialog_html_ignore).text(fName);
    dialog_ignore.dialog('open');
    return false;
});

Example fiddle

answered May 24, 2012 at 13:25

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

1 Comment

Chris Over a year ago

thank you very much Rory! This is wonderful, works perfectly and is easily adaptable for any number of variables... thank you, your solution opened my eyes once again what all is possible :)

Rajagopal 웃 · Accepted Answer · 2012-05-24 13:32:36Z

1

Use the following code in your click event,

dialog_html_ignore.attr("name", fname);

In dialog box you can access like this

dialog_html_ignore.attr("name");

answered May 24, 2012 at 13:32

Rajagopal 웃

8,5617 gold badges33 silver badges44 bronze badges

1 Comment

Rory McCrossan Over a year ago

That will just get/set the attribute, not the visible text of the element. I don't see how this has so many upvotes?

apsillers · Accepted Answer · 2012-05-24 13:35:37Z

1

I would write the dialog HTML as actual HTML in the page, not as a string to be parsed by $. Then, I would select it by ID and dialog-ify it so it is hidden at once.

I'd also include an empty <span id='ignore-dialog-fname'></span> in the dialog HTML and then select by ID to set its textContent/innerText to fname.

<script>
$(function() {
    //set up the jQuery dialog
    var dialog_ignore=$("#dialog-confirm").dialog({
        autoOpen:false,
        resizable: false,
        modal: true,
        buttons: {
            "No": function() {
                $( this ).dialog( "close" );
            },
            "Yes": function() {
                window.location.href = targetUrl;
            }
        }
    });

    //open the dialog on click event
    $('.click_ignore').click(function() {
        window.fName = $(this).attr("name");
        $("#ignore-dialog-fname").text(fName);
        dialog_ignore.dialog('open');
        return false;
    });
});
</script>

<div id="dialog-confirm" title="Ignore Friend Request?">
    <p>Some text... ignore <span id='ignore-dialog-fname'></span>, ...?</p>
</div>

edited May 24, 2012 at 13:35

answered May 24, 2012 at 13:29

apsillers

116k18 gold badges248 silver badges249 bronze badges

3 Comments

Chris Over a year ago

thx for the answer. is there a specific reason to write the html in the html page rather than in js? The reason I'm doing it this way, is that if the page does not load very quickly, you can see the html for a moment (although just a flash)... unless you would hide it, of course..

apsillers Over a year ago

I was also concerned that $("#ignore-dialog-fname") would not be accessible if the HTML was only known the the dialog handler (that is, I didn't know if .dialog would automatically add the dialog HTML to the DOM). My concern is apparently unfounded if Rory's solution works. Use that, since it's basically the same as mine and doesn't make you rewrite your code.

Chris Over a year ago

hey, thank you for your effort, really! and for giving it so honestly to Rory.. but his solution works really fine, did not expect that it was that easy... :) thx again!

Collectives™ on Stack Overflow

javascript/jQuery: how to use var from click event in jQuery dialog?

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related