Search code examples
phpjquerymysqlajaxbackslash

Spaces breaking img src in jQuery

Basically the title.

I have a mysql query:

while ($array = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
    $jsonData[] = $array;
}
echo json_encode($jsonData);

A variable referencing a value that has spaces in it named "Remnant of Argus":

var pname = value.Pet_Name;

that is being used to insert the value into both a plaintext <div> and an image style='background-image: url():

$("img#"+char).click(function(){
    $("#charlist").html(title
           +"<table style='background:#888' width='600px'>"
             +"<tr>"
               +"<td rowspan='4' height='150px' width='150px' style='background-image: "
                       +"url(/images/char/"+char+".png)'></td>"
               +"<td>Name: "+fname+" "+lname+"</td>"
               +"<td>Class: "+spec+" "+role+"</td>"
             +"</tr>"
             +"<tr>"
               +"<td>Race: "+race+"</td>"
               +"<td>Rank: "+rank+"</td>"
             +"</tr>"
             +"<tr>"
               +"<td>Height: "+height+"</td>"
               +"<td>Weight: "+weight+"</td>"
             +"</tr>"
             +"<tr>"
               +"<td>Age: "+age+"</td>"
               +"<td>Birthplace: "+birth+"</td>"
             +"</tr>"
           +"</table>"
           +"<table width='600px'>"
             +"<tr>"
               +"<td>Bio:<br />"+bio+"</td>"
             +"</tr>"
           +"</table>"
           +"Pets"
           +"<table class='"+pname+"' width='300px'>"
             +"<tr>"
               +"<td rowspan='2' height='150px' width='150px' style='background-image: "
                       +"url(/images/pets/"+pname+".png)'></td>"
               +"<td>Name: "+pname+"</td>"
             +"</tr>"
             +"<tr>"
               +"<td>Species: "+prace+"</td>"
             +"</tr>"
           +"</table>"
           +"<table width='300px'>"
             +"<tr>"
               +"<td rowspan='2' height='150px' width='150px' style='background-image: "
                       +"url(/images/battlepets/"+cname+".png)'></td>"
               +"<td>Name: "+cname+"</td>"
             +"</tr>"
             +"<tr>"
               +"<td>Species: "+crace+"</td>"
             +"</tr>"
           +"</table>");

    $("table.none").hide();
});

Everything shows up fine except for the image. I've added backslashes to both the filename and value and THEN it shows up fine. I've tried everything I can think of, to replacing the spaces in the MySQL call (just adds backslashes everywhere), tried replacing the character in my jQuery (either breaks it completely or just plain doesn't work), adding another variable for just this one instance and trying encodeURIComponent or replace to no avail, and I'm at my wit's end.

I was hoping to not have to add another column of values without spaces JUST for background-image source URL, but if that's what it comes down to, I'll just do it and say screw it.

Any advice on what I'm doing wrong? If you need any other pertinent info, lemme know. The website is: http://wow.zenakrua.com/ and you click Windwalkers, then click the angry purple chick, middle of the second row.

Solution

  • That image doesn't exist. If it did, you would be able to access it using this URL on the browser:

    wow.zenakrua.com/images/battlepets/Remnant%20of%20Argus.png

    The image name is either wrong, or you need to change the permissions on it.