Problems with getting background-image using Javascript in IE and Chrome

Question

I have a site that allows users to tag pictures. Tags can be voted on. I have two options for sorting tags: "sort top" and "sort new", which is pretty self explanatory. When the user clicks on, for example, "sort new", this JS function is called:

<script type="text/javascript">
    function sortTagsNew()
    {

    var sortnew = document.getElementById('sortnew');
    var sorttop = document.getElementById('sorttop');
    sortnew.style.textDecoration = 'underline';
    sorttop.style.textDecoration = 'none';
    var filename = document.getElementById('center_frame').style.backgroundImage;

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("response_caption").innerHTML=xmlhttp.responseText;
}

}
 xmlhttp.open("GET","sortnew.php?filename="+filename,true);
 xmlhttp.send();


}
</script>

You can probably tell that that big IF statement does an AJAX call. It refers to the following PHP file, sortnew.php , which queries the database for tags under that image.

$capfilename = $_GET['filename'];
$acturl = substr($capfilename, 6, -3); //extracts filename from the url('')

$new_captions = mysql_query("SELECT * from captions where image = '$acturl' ORDER BY  time DESC LIMIT 5");
$caption = array();
while($rows = mysql_fetch_array($new_captions)){
$caption[] = $rows;

// Includes a PHP file that designates how tags should be displayed (uses a foreach), but that's kind of irrelevant.

What I think the problem is, is that IE and Chrome aren't getting the filename through. When I manually input a filename for a valid image with tags, it works fine, but for whatever reason, IE and Chrome don't get the filename and as a result, don't return anything. I think it might have something to do with how I use the substring to extract the filename itself. Maybe Chrome and IE automatically get the filename, but I couldn't find anything about that. Keep in mind that it does work in FF.

Answer 1

There is some problems with different css url presentations in different browsers:

In Chrome:

> document.getElementById('center_frame').style.backgroundImage;
"url(http://3.bp.blogspot.com/-8R0NUSKVupc/TfI92fvQY1I/AAAAAAAAAeA/B6e09X9hhqY/s1600/4.jpg)"
> document.getElementById('center_frame').style.backgroundImage.length;
90

In Opera:

>>> document.getElementById('center_frame').style.backgroundImage;
"url("http://3.bp.blogspot.com/-8R0NUSKVupc/TfI92fvQY1I/AAAAAAAAAeA/B6e09X9hhqY/s1600/4.jpg")"
>>> document.getElementById('center_frame').style.backgroundImage.length;
92

As You can see these two string are different in Opera and Chrome (I do not know about other browsers). So, first You should parse it and convert to common format (http://example.com/test.jpg) and than work with it.

---

Code that parses backgroundImage string (tested only in rhino):

/// Simple parsing
function parse1(str) {
  str = str.slice(4, -1);
  if (str[0] == '"' || str[0] == "'") {
    return str.slice(1, -1);
  }
  return str;
}

// Regular Expressions magic
function parse2(str) {
  return str.match(/^url\(['"]?([^'"]+)['"]?\)$/)[1];
}

a = "url(\"http://3.bp.blogspot.com/-8R0NUSKVupc/TfI92fvQY1I/AAAAAAAAAeA/B6e09X9hhqY/s1600/4.jpg\")";
b = "url(http://3.bp.blogspot.com/-8R0NUSKVupc/TfI92fvQY1I/AAAAAAAAAeA/B6e09X9hhqY/s1600/4.jpg)";

print(parse1(a));
print(parse1(b));
print(parse2(a));
print(parse2(b));