JQuery dialog change button
I wonder if there is a correct way to remove the default close button in the title bar and change it to something else that I want to assign a different function to than Close. I manage to change the classes, but despite this, the closure function seems to override any header line.
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");
Header HTML code:
<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 the previous javascript code, the classes are overridden, but the function remains. This is because of the internal jQuery code, I suppose, isn't it? Any advice how to easily overcome it?
source to share
I am assuming you are implying that the close function remains.
What you can do is keep the old click event and then cancel it, add your own, which internally triggers 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()
});
source to share
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)
{
/////////
}
source to share