jQuery UI Dialog To Load HTML Title

Question

I'm using jQuery UI Dialog for pop-ups that read from external pages. How do I get it to load the title from the external HTML instead of having the change it in the code every time? Because I want different titles as well.

Any suggestions please?

function openDialog(url) {
   $("<div class='popupDialog'>Loading...</div>")
        .dialog({
            autoOpen: true,
            closeOnEscape: true,
            width: '900',
            height: '900',
            modal: true,
            title: 'Bonus Features',
            beforeClose: function(){   $(this).remove();   }
        }).bind('dialogclose', function() {
            jdialog.dialog('destroy');
        }).load(url, function() {
            $(this).dialog("option", "position", ['center', 'center'] );
        });

        adjustJQueryDialogOverlay();
    }

    $(window).resize(function() {
        $(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
    });

You'll have to play with it a little to get it to use the title of the page you're loading and not the page you're on. Are you loading actual pages or just some text or xml? — Brian Seim at EvoDynamic Inc
– Brian Seim at EvoDynamic Inc, Commented May 12, 2011 at 23:22
I just need it to read from whichever page it loads. Actual pages. I wouldn't know how to play with it through, unfortunately. — DearRicky
– DearRicky, Commented May 13, 2011 at 1:16
You're able to load the page into the dialog. . . then check the length of $('title').length and see if it is two (one for the "host" page and one for the "dialog" page). If you get that far, try to determine which title is which: get the title of the "host" page before you load the additional page into the dailog and compare it against the text of the titles returned in your jQuery array. — Brian Seim at EvoDynamic Inc
– Brian Seim at EvoDynamic Inc, Commented May 13, 2011 at 20:16

villecoder · Accepted Answer · 2011-05-13 18:36:39Z

1

What you seem to have are two questions. First, the simple one. How do you change the title?

The jQuery Dialog title comes from the title parameter. In your code, you have:

title: 'Bonus Features'

But if you were to change your function signature to accept a title parameter, you could pass the title along to the function and not have to worry about changing your code all the time.

function openDialog(url, title) {
   $("<div class='popupDialog'>Loading...</div>").dialog({
   ...
   title: title,
   ...
   );
}

Now for the complex one: How do you get the title from your target page. I'm not sure there's an easy way for you to pull this off short of requesting the page through AJAX and parsing the result as XML/Text. Here's a link to do that if you're really interested.

http://forum.jquery.com/topic/getting-title-tag-from-html-page-using-ajax

But I really don't want to encourage that. I mean, it seems a little overboard to ask the client script to do all that. And you're not guaranteed that it may work from browser to browser. Rather it would be much easier just to associate whatever you're using to launch your dialogs with the page titles by hard-coding the titles.

answered May 13, 2011 at 18:36

villecoder

13.5k2 gold badges37 silver badges54 bronze badges

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

2 Comments

DearRicky Over a year ago

That sounds even more complicated, which is what I need to get away from. I want the title of the HTML to be the one for the dialog itself. I guess that's impossible. I really appreciate your time and effort in your answer. Thank you so much.

villecoder Over a year ago

No problem. And you're right, it is complicated but not impossible. The net effect would be that you'd have a delay while the browser loaded the page to parse the title before it displayed the dialog.

wannadream · Accepted Answer · 2013-04-12 19:10:19Z

0

Put this in 'open' event:

$(this).parent().find('.ui-dialog-title').html('Printed Card Designer');

answered Apr 12, 2013 at 19:10

wannadream

1,7601 gold badge12 silver badges16 bronze badges

Collectives™ on Stack Overflow

jQuery UI Dialog To Load HTML Title

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related