Is jQuery rewriting my CSS attributes?

Question

I have a search results web page which breaks the results up into multiple pages. Rather then reloading the entire page as the user navigates from one search result page to the next, I'm using a jQuery ajax call to get the page (via a "GET" request), extract the element that contains the search results and then swap out the html.

This is working great, but I'm seeing a problem with my background-image CSS attribute. Some of the background image names contain spaces, so I've wrapped the url in quotes, like so:

<div style="position: absolute; right: 0; bottom: 0; 
            width: 30px; height: 30px; 
            background-image: url('Images/Image One_small.png');
            background-repeat: no-repeat;" 
     title="Image One">
</div>

But, when I reload the HTML element via the .html() jQuery function, it seems like HTML is reformatted (including stripping the quotes), like so:

<DIV style="BACKGROUND-IMAGE: url(Images/Icons/Image One_small.png); POSITION: absolute; WIDTH: 30px; BOTTOM: 0px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 30px; RIGHT: 0px" title="Image One"></DIV>

Chrome seems to be handling this fine, but IE8 is choking (not resolving the background image).

Does the html() function rewrite the HTML or CSS attributes? If so, is there a better solution? I don't want to rename the images because the names are driven off user input (which can legitimately contain spaces).

Here's my ajax call:

var l_url = "SearchResults.aspx?pg=" + pageNo;
$.ajax({
    type: "GET",
    dataType: "html",
    url: l_url,
    beforeSend: function(jqXHR, settings) {
        $("#WhiteoutDiv").css("display", "block");
    },
    success: function(data, textStatus, jqXHR) {
        $("#SearchResultsDiv").html($("#SearchResultsDiv", data).html());
        $("#WhiteoutDiv").css("display", "none");
        // The below line is for debugging. It selects one of the search result
        // elements and displays the html so I can see what's going on. Chrome's
        // developer tools give conflicting results.
        alert($(".ReportItem", data).html());
    },
    error: function(textStatus, jqXHR) {
        window.location = l_url;
    }
})

ADDENDUM

Just to be clear, everything works perfectly before the DIV is reloaded via jQuery AJAX (and was working perfectly with my old, non-jQuery AJAX implementation). The path is correct, and the CSS is valid with the quotes. Changing the space to a "+" does not fix the issue.

More a browser issue than javascript/jquery related. In fact, your issue is that you are using space in img src, which is not valid. — A. Wolff, Nov 20 '12 at 16:29
Could you set your background image via a class instead? Then you don't have to worry about how jquery outputs your inline styles. Also if you are just showing and hiding a div you may want to use `show()` and `hide()` — Jared, Nov 20 '12 at 16:30

score 6 · Accepted Answer · answered Nov 20 '12 at 16:28

6

You should ALWAYS use + or %20 in place of a space in URLs:

<div style="background-image:url(/images/image+one.png);">

answered Nov 20 '12 at 16:28

Blazemonger

90,923
26
142
180

I appreciate the suggestions, but `BACKGROUND-IMAGE: url(Images/Image+One_small.png);` is still not resolving. And `BACKGROUND-IMAGE: url('Images/Icons/Microsoft Access_small.png');` is perfectly legal. – JDB Nov 20 '12 at 16:43
Then make sure the URL is valid. Remember that relative URLs in stylesheets are computed from the CSS file's location, not the HTML file's location -- `BACKGROUND-IMAGE: url(Images/Image+One_small.png);` will look for an `Images` directory in the same place as your CSS file. Using spaces in URLs may work in certain cases but it's never correct to do so. – Blazemonger Nov 20 '12 at 16:45
The URL is valid - if you look at my code, you'll see that this is an inline style attribute, not a CSS file. The perfectly valid quoted url resolves correctly in every browser I've tried. The issue is that jQuery seems to be mucking around with my HTML attributes. Is this expected behavior and how can I stop it? – JDB Nov 20 '12 at 18:27
The quotes are optional, which is why jQuery is happily removing them. Your URL is not valid, which is why IE8 isn't resolving it. Try replacing the space AND using a URL which begins at the root (with a slash) and see if that helps things. – Blazemonger Nov 20 '12 at 18:30
Quotes are not optional when the url contains special characters. Removing the quotes requires escaping the special characters, according to the [specification](http://www.w3.org/TR/CSS21/syndata.html#uri). jQuery is not escaping special characters, which is why IE8 is not parsing the CSS correctly. Is this a bug in jQuery? – JDB Nov 20 '12 at 18:34
Feel free to report it and see what they say. I stand by my answer. – Blazemonger Nov 20 '12 at 18:35
Ok... for some reason, "+" does not work, but "%20" does. This is true in both Chrome and IE. – JDB Nov 20 '12 at 19:04

score 0 · Answer 2 · answered Nov 20 '12 at 18:40

Found this in the .html() documentation (after re-reading it):

This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.

I think IE8 is responsible for mangling my HTML, not jQuery directly. I will have to re-engineer my solution to account for this.

Is jQuery rewriting my CSS attributes?

2 Answers2