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.

Answer 1

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

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