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']);
    });

Answer 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.