Change button in jQuery dialog box

Question

Hi there, 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?

Answer 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()
});

Answer 2

Do the following and it will work for ya ,cuz it is working for me

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) { ///////// }