Question

I’m trying to change page title using value retrieved from the div on the external page. All files are local, in the same folder, or it will be under same domain once uploaded.

This is html on the external page (settings.html):

<div id="clientName">Some Company</div>

I’m using .load function to get the content of that div from different page (index.html):

$('title').load('settings.html #clientName');

Once executed page title is changed into file path to settings.html page (file://blahblah) instead “Some Company”. But all works fine if I try to load same content into div, like this:

$('div.test').load('settings.html #clientName');

What I’m doing wrong?

Thanks,
Klikerko

EDIT: Just to clarify, I don’t want to start discussion about practicality of the code above. I’m aware that there are better ways to do this but, this is demo/test project that will be most likely run from the local machine without local server running.

Answer 1

I expect this needs to be done asynchronously with a callback.

$('<div/>').load('settings.html #clientName', function(response, status, xhr) {
    $("title").text($(this).text());
    //or
    //document.title = $(this).text();
});

document.title = $('<div/>'). ... won’t work in a month of Sundays. You can’t assign a jQuery object as if it was text.

If @Magicmarkker is right about IE not playing with $("title")..., then use document.title = $(this).text().