Change button in jQuery dialog box

Question

I wonder, if there is a proper way to remove the default close button in the title bar and change it with other, to which I want to assign other function than Close. I manage to change the classes, but despite that, the close function seems to override to any in the titlebar.

My current code for changing classes:

var closeButton = $("#dialog").parent().find('.ui-dialog-titlebar a');
closeButton.attr("class","ui-dialog-titlebar-lock");
closeButton.find("span").attr("class","ui-icon ui-icon-lock");

The HTML code of the titlebar:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on" style="-moz-user-select: none;">
  <span id="ui-dialog-title-profile-dialog" class="ui-dialog-title" unselectable="on" style="-moz-user-select: none;">Edit My Profile</span>
    <a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button" unselectable="on" style="-moz-user-select: none;">
      <span class="ui-icon ui-icon-closethick" unselectable="on" style="-moz-user-select: none;">close</span>
    </a>
 </div>

As a result of previous javascript code, the classes are overriden, but the function remains. This is because of jQuery inner code, I suppose, isn't it? Any advices how to overcome it easily?

redsquare · Accepted Answer · 2009-08-29 07:48:04Z

1

I assume you mean the close function remains.

What you can do is to persist the old click event, then unbind it, add your own which internally calls the old click to actually close the dialog.

//persist old click
var oldClickFn = closeButton.click;

closeButton.unbind('click').click( function(){
    //functionality you want

    //call the persisted click
    oldClickFn && oldClickFn()
});

edited Aug 29, 2009 at 7:48

answered Aug 29, 2009 at 7:40

redsquare

78.8k21 gold badges155 silver badges160 bronze badges

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

Comments

Leigh · Accepted Answer · 2013-01-02 10:19:17Z

0

The following should work:

var dialog = // here open the dialog and assign it to the dialog variable
dialog.parent(".ui-dialog").find(".ui-dialog-titlebar-close").unbind('click');        
dialog.parent(".ui-dialog").find(".ui-dialog-titlebar-close").show();   
dialog.parent(".ui-dialog").find(".ui-dialog-titlebar-close").bind('click', function() { showNoteDialogClose(null, null) });  


function showNoteDialogClose(data, args)
{
 /////////
}

edited Jan 2, 2013 at 10:19

Leigh

28.9k10 gold badges58 silver badges109 bronze badges

answered Jan 5, 2010 at 20:33

Daniel

1

Collectives™ on Stack Overflow

Change button in jQuery dialog box

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related