jQuery UI: how to reset dialog title?

Question

I want to clear the dialog title, but $('#dialog').dialog('option', 'title', ' '); doesn't work as expected, it will make the dialog title very thin, what is the proper way to clear the title?

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Dialog - Default functionality</title>
        <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css"/>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script>
            $(function() {
                $("#b1").click(function(){
                    $('#dialog').dialog('option', 'title', 'test');
                });
                $("#b2").click(function(){
                    $('#dialog').dialog('option', 'title', ' ');
                });
                $("#b3").click(function(){
                    alert($('#dialog').dialog('option', 'title'));
                });
                $("#dialog").dialog();
            });
        </script>
    </head>
    <body>
        <div id="dialog">
            <p>This is a dialog.</p>
        </div>
        <input id='b1' type='button' value='set title to test'>
        <input id='b2' type='button' value='clear title'>
        <input id='b3' type='button' value='alert(title);'>
    </body>
</html>

Nicolas Albert · Accepted Answer · 2014-09-21 13:42:03Z

2

Just insert a non breaking space, not just a space. I copy/paste it from the wikipedia page:

U+2007 figure space (HTML:  ). Produces a space somewhat equal to the figures (0–9) characters.

I make an interactive sample:

            $(function() {
                $("#b1").click(function(){
                    $('#dialog').dialog('option', 'title', 'test');
                });
                $("#b2").click(function(){
                    $('#dialog').dialog('option', 'title', ' ');
                });
                $("#b3").click(function(){
                    alert($('#dialog').dialog('option', 'title'));
                });
                $("#dialog").dialog();
            });

        <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css"/>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        
        <div id="dialog">
            <p>This is a dialog.</p>
        </div>
        <input id='b1' type='button' value='set title to test'>
        <input id='b2' type='button' value='clear title'>
        <input id='b3' type='button' value='alert(title);'>

answered Sep 21, 2014 at 13:42

Nicolas Albert

2,5961 gold badge18 silver badges18 bronze badges

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

1 Comment

agou Over a year ago

Thanks, this does work! I actually tried another unicode space character before posting this question but it didn't work, this one does the magic.

Collectives™ on Stack Overflow

jQuery UI: how to reset dialog title?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related