1

I'm creating a page that loads content from other pages using jQuery like this:

$('#newPage').load('example.html' + ' #pageContent', function() {
    loadComplete();         
});

That all works fine.

Now what I want to do is change the background image of the current page to the background image of the page I'm loading from.

This is what I'm doing now but I can't for the life of me get it to work:

$.get('example.html', function(data) {

    var pageHTML = $(data);
    var pageBody = pageHTML.$('body');
    alert(pageBody.attr("background"));

});

What am I doing wrong??

Thanks,
-Ben

bbeckford
  • 4,467
  • 6
  • 34
  • 48

5 Answers5

1

Update: please change your background image to CSS: style="background-image: url(...)" I think the way you are trying now is not going to reach the background attribute.

Old answer:

background is shorthand. Try

pageBody.attr("backgroundImage");

I've never seen a complete HTML structure being pulled through an Ajax request, but as long as it's not inserted into the DOM, it should be fine.

If it turns out the HTML structure is the problem, consider creating an iframe element on the fly, loading the page into that, and then fetching the backgroundImage property from there.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • Hi Pekka, thanks for the speedy reply. Hmmm backgroundImage isn't doing it, its coming back 'undefined'. Is there an easy way to just search the string for the 'background=' part? Or am I going totally the wrong way about this? – bbeckford May 21 '10 at 15:58
  • @bbeckford it could be that the HTML structure isn*t parsed, I don't know what happens when you pull a whole document. Can you do a `console.log(pageHTML)` and look at the result in firebug to make sure the HTML structure actually gets loaded? – Pekka May 21 '10 at 16:00
  • I haven't got firefox/firebug installed atm. Doing alert(data) comes back with the complete html of the page. Doing alert(pageHTML) and alert(pageBody) both returns [object Object] – bbeckford May 21 '10 at 16:07
  • I can't change the way that page works as its generated by php on a system I've got nothing to do with :S Is there no way to do a straightforward search of the string? – bbeckford May 21 '10 at 16:15
  • 1
    @bbeckford I'm sure there is using a regular expression. I'm not very good at those I'm afraid. Maybe asking a separate question asking for "how to extract a `background=` value from a string containing HTML in JavaScript" gets you there faster. – Pekka May 21 '10 at 16:17
  • Ok I've asked that too. I'm surprised this hasn't come up before! Thanks for your help – bbeckford May 21 '10 at 16:21
  • @bbeckford on second thought, this may have been come up before :D anyway, I bet you're going to get an answer either way, or a link to a duplicate. – Pekka May 21 '10 at 16:22
1

When you generate a jQuery object from HTML, it will ignore tags such as html, head and, more important, body . If, for example, your example.html page contained the following html:

<html>
    <body>
        <div>
            <p>Text</p>
        </div>
    </body>
</html>

then your jQuery object generated from doing var pageHTML = $(data) would be based on the div. To get the attribute of the body element, you'd have to deal with data as a string, which you asked for here :)

(Well, you could do some ninja string replacements and convert the <body> and <html> tags in data into e.g. divs, but doing a regex search through the string would be both faster and more stable)

Community
  • 1
  • 1
Simen Echholt
  • 11,243
  • 2
  • 34
  • 26
1

Thanks to all of you for your replies.

I started another thread here in hopes that I could do it a different way and I got a working solution from Simen Echholt, for the sake of people searching here it is:

I patched together a regex to do this, which will search the data string variable (containing the HTML) for the background attribute of the body tag. The regex is stolen from here and modified a bit. I'm still new to regex, so I guess it can be done more fluently, but it still gets the job done

var data = /* your html */;
var regex = /body.*background=["']?((?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']?/;
var result = regex.exec(data);
if (result.length > 1) {
    var background = result[1];
    alert(background);
}
else {
    //no match
}

If you used that answer please vote him up over here!

Thanks again!
-Ben

Community
  • 1
  • 1
bbeckford
  • 4,467
  • 6
  • 34
  • 48
0

I think the problem is that when you are loading the data from the other site you are actually just loading the HTML, not loading another DOM to which you can do things like find attributes like background.

As to actually solving your problem, I'm not really sure.

Jade Robbins
  • 163
  • 5
  • It struck me as odd at first, too, but he is at no point inserting the structure into the current document, so it *should* work. – Pekka May 21 '10 at 15:53
  • Thanks Jade. Is there any other way you can think of doing it? Perhaps just searching the string?.. – bbeckford May 21 '10 at 15:59
  • 1
    I would follow Pekka's advice and start another thread, I'm not a pro regex'er either :D Good luck! – Jade Robbins May 21 '10 at 16:45
0

Doesn't this line throw an error?

var pageBody = pageHTML.$('body');

There should be something like this:

var pageBody = $('body', pageHTML);
Crozin
  • 43,890
  • 13
  • 88
  • 135