add custom method to jquery ui dialog

Question

How can I do something like:

$("#some_div").dialog("doSomething");

And what that method should do is to add an extra icon in the titlebar

EDIT 1: I've tried this solution: the method gets called but I can't access the dialog object (maybe I'm doing something wrong)

@Ohgodwhy: I've updated my question to show what I've tried so far — Matías Cánepa
– Matías Cánepa, Commented Oct 1, 2012 at 20:22

technophobia · Accepted Answer · 2012-10-01 19:32:52Z

2

First, if you're adding an icon to the title bar I would suggest applying a class to that dialog box and styling it with CSS. Example:

$( "#some_div" ).dialog({ dialogClass: "someClass" });

If you'd still like to add a custom method, here's what the documentation says:

Supply a callback function to handle the create event as an init option.

$( ".selector" ).dialog({
   create: function(event, ui) { ... }
});

Bind to the create event by type: dialogcreate.

$( ".selector" ).bind( "dialogcreate", function(event, ui) { 
    ... 
});

answered Oct 1, 2012 at 19:32

technophobia

2,6291 gold badge23 silver badges30 bronze badges

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

2 Comments

Matías Cánepa Over a year ago

the "create" approach is for use that event when the dialog is created. I need to add an icon at run time.

technophobia Over a year ago

Should have clarified that in your question - glad you solved your problem.

Community · Accepted Answer · 2017-05-23 11:44:09Z

2

Ok, this is what I did:

//in a separate js file
$.ui.dialog.prototype.showExtraButton = function()
{
    this.uiDialogTitlebar.append("<a role='button' class='ui-dialog-titlebar-icon ui-dialog-titlebar-icon-extra'><span class='ui-icon'></span></a>");
}

//call it this way
$("#some_div").dialog("showExtraButton");

//css
.ui-dialog-titlebar-icon {
  position: absolute;
  right: 25px;
}

.ui-dialog-titlebar-icon-extra span
{
    display: block;
    background-image: url(../path_to_img/button_extra.png)!important;
}

This solution by Langdon, along with this one by Kevin B gave me the answer on how to resolve my problem

UPDATE 2014-01-03

TIL about $.widget(), so here is another implementation of the same thing

$.widget("ui.dialog", $.ui.dialog,
{
    showExtraButton: function()
    {
        this.uiDialogTitlebar.append("<a role='button' class='ui-dialog-titlebar-icon ui-dialog-titlebar-icon-extra'><span class='ui-icon'></span></a>");
    }
});

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Oct 2, 2012 at 12:55

Matías Cánepa

6,0144 gold badges63 silver badges111 bronze badges

1 Comment

technophobia Over a year ago

Side Note: Try separating form from function. Unless that anchor (that's wrapping the <span class='ui-icon'></span> serves a specific purpose, you're probably better off without it (i.e.: you can use a different tag instead).

Collectives™ on Stack Overflow

add custom method to jquery ui dialog

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related