Get reference to element in jquery-ui dialog function

Question

Assuming the following markup

<div class="popup" data-title="Popup dialog title 1" data-modal="1" >
    ...
</div>
<div class="popup" data-title="Popup dialog title 2">
    ...
</div>

and the following javascript:

$(".popup").dialog({
    title: '????', // Should be the value of the element's data-title attribute
    modal: ???, // Should be true if the element has a data-modal attribute
    ... etc, other options ...
});

I want to set the dialog title to the value of the "data-title" attribute on the popup element, and set modal based on the presence of the "data-modal" attribute. How can I get a reference to the element - i.e. what can I replace '????' with in the above script?. The first div should get the title "Popup dialog title 1" and the second "Popup dialog title 2". The first div should be a modal popup, the second modeless

UPDATED

Answers to date have addressed the specific example, but the question was intended to be more general, though I'm not sure how to formulate the more general question. Basically I want to be able to access attributes of the relevant element when behavior is attached to it using jQuery.

I've updated the example to be more general.

I suspect the answer might involve calling $(".popup").each and attaching the dialog to elements inside the each, but as a jQuery beginner, I'm not sure of the most idiomatic way to do this.

UPDATE 2

I've implemented this using .each as in the following example.

$(".popup").each(function() {
    var title = $(this).data('title');
    var modal = ($(this).data('modal') != null);
    $(this).dialog({
        title: title,
        modal: modal,
        ... etc ...
    });
});

I'd be interested to know if this is the most idiomatic / elegant way to achieve what I want.

This might be a dumb clarification on my part , but by default .dialog on the div uses the title attribute of the div as the title of the dialog, do u still want to use a data-title attribute to specify the title? — frictionlesspulley
– frictionlesspulley, Commented Feb 10, 2012 at 8:21
@frictionlesspulley - My question isn't specifically about the title property or even specifically about dialogs. — to StackOverflow
– to StackOverflow, Commented Feb 10, 2012 at 9:13

frictionlesspulley · Accepted Answer · 2012-02-10 10:01:39Z

1

If I get the generality of the question correctly , the selector ('.popUp' in your) selects multiple DOM elements.

Here is a fiddle which shows a few ways you can do this.

Using $.each

we inspect each item and check if the modal is 1. Note that item is not a Jquery object and you need to wrap it before using jquery functions on it.

   $('div.each').each(function(index, item) {
        if ($(item).data('modal') == 1) {
            $(item).dialog({
                title :$(this).data('title'),
                position:'top'
            });
        }
    });

Using $.filter

I call the dialog() on the entire set returned by filter returns a wrapped collection of elements which satisfy the boolean condition of the function. Here as well the item is a DOM element and needs to be wrapped before you.

    $('div.filter').filter(function(index, item) {
        return $(item).data('modal') == 1
    }).dialog({
        create: function(event, ui) {
            $(this).dialog("option", "title", $(this).data('title'));
        },
        position:'bottom'
    });

I hope I got the essence of the question correctly. The title of the dialog can be set multiple ways as show in each script...( but I guess that was just an addendum to the question and not the actual question itself)

answered Feb 10, 2012 at 10:01

frictionlesspulley

12.6k16 gold badges73 silver badges124 bronze badges

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

2 Comments

to StackOverflow Over a year ago

$.each seems to be the way to go. Thanks! As you the say, the specifics can be done in multiple ways, but I'm really only interested in how to get each item individually.

Rob W Over a year ago

@Joe Although they're called the same, $.each is not equal to $().each. Don't confuse them.

Rob W · Accepted Answer · 2012-02-09 22:38:46Z

1

var $popup = $("#popup");
$popup.dialog({
    title: $popup.data('title'), // Or $popup.attr('data-title')
    modal:true,
    ... etc, other options ...
});

If you specify title (without data-prefix), the title is automatically used as a title for the dialog. Semantically, it's also correct, because the title attribute describes the title of your element:

<div id="popup" title="Popup dialog title">

$("#popup").dialog({
    modal: true,
    ... etc, other options ...
});

answered Feb 9, 2012 at 22:38

Rob W

350k87 gold badges811 silver badges683 bronze badges

1 Comment

to StackOverflow Over a year ago

How does this work if there's more than one match to the selector? See updated example.

Community · Accepted Answer · 2017-05-23 12:11:23Z

0

Below should do the trick,

$("#popup").dialog({
    title: $("#popup").attr('data-title'),
    modal:true,
    ... etc, other options ...
});

Edit: See DEMO here.

You can access the specific dialog inside any of the dialog events. Dialog Events All those events are executed using this context so can access the dialog contents and its parent which contains the title and buttons.

For Ex: You can set the title inside create function so that you can access the dialog's this element. see below,

$( ".dialog" ).dialog({
  create: function(event, ui) {
    var $this = $(this);
    $this.parent().find('.ui-dialog-title').html($this.attr('data-title'));
}});

Below is the jQuery dialog structure. I have removed unnecessary class and other stuff for readability. The div#our-dialog is the actual dialog content. Inside those events, You can access the title or buttons.

Also See jquery dialog save cancel button styling

<div class="ui-dialog">
   <div class="ui-dialog-titlebar">
     <span class="ui-dialog-title">
        Dialog Title
     </span>
     <a href="#" class="ui-dialog-titlebar-close" >
        <span class="ui-icon-closethick">close</span>
     </a>
   </div>
   <div id="our-dialog" data-title="Basic dialog 3" class="ui-dialog-content" >
      <p>Dialog Content </p>
   </div>
   <div class="ui-dialog-buttonpane">
     <div class="ui-dialog-buttonset">
       <button type="button" class="ui-button" >
         <span class="ui-button-text">Ok</span>
       </button>
     </div>
   </div>
</div>

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Feb 9, 2012 at 22:38

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

2 Comments

to StackOverflow Over a year ago

How does this work if there's more than one match to the selector? See updated example.

to StackOverflow Over a year ago

thanks for the response. However my question is more general than just dialogs; I'm looking for a technique I can apply generally to access the element(s) matching the selector. See updates to the question.

Collectives™ on Stack Overflow

Get reference to element in jquery-ui dialog function

3 Answers 3

Using $.each

Using $.filter

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Using $.each

Using $.filter

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related