Jquery override default functionality

Question

So - jQuery UI library. There is a dialog component. There is also a "title" option for this component. How would I override jQuery's default functionality so that whenever I set a new title for a dialog - it adds "xxx" in front of it?

It's just a `div` tag with a title attribute, perhaps I don't understand the question? — SpaceBison, Oct 16 '13 at 10:30
Can you give code sample including both html and javascript code? — ovunccetin, Oct 16 '13 at 10:32

score 1 · Accepted Answer · edited May 23 '17 at 12:05

I would write a helper method to set the title and call that instead:

function setTitleWithPrefix(selector, title) {
    $(selector).dialog('option', 'title', 'xxx' + title);
}

You could even create it as a jQuery plugin:

$.fn.dialogTitleWithPrefix = function(title) {
     this.each(function() { 
         $(this).dialog('option', 'title', 'xxx' + title);
     });
};

Which can be called as:

$('.myDialog').dialogTitleWithPrefix('New Title');

Working example of both methods - http://jsfiddle.net/kReA5/1/

Alternatively, look at the answer to this question (How to extend an existing jQuery UI widget?) if you want to extend the dialog widget itself.

score 0 · Answer 2 · answered Oct 16 '13 at 10:43

You can override the jQuery.dialog method

var oldDialog = jQuery.fn.dialog;
jQuery.fn.dialog = function(title, options, otherStuff) {
    title = 'xxx' + title;
    return this.oldDialog(title, options, otherStuff);
});

However, I don't know what other options you use with this method. If you provide some code to your question I'll update my answer.

score 0 · Answer 3 · answered Oct 16 '13 at 10:45

Well this will render your dialog:

<div id="dialog" title="Your title">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

It will render it with the selected title however if you now also wish to prepend xxx to the title you will need to change the title attribute value after that div.

To do this use the following script:

<script>
  var title = $("#dialog").getAttribute("title"); // This will return "YOUR TITLE"

  // Now we change the title to xxx YOUR TITLE
  $("#dialog").attr("title", "XXX" + title);
</script>

Jquery override default functionality

3 Answers3