spaces are causing my javascript to display incorrectly (trims the output)

Question

I don't know if this is an issue with JavaScript, jQuery, or JSON, but when I use spaces in any of my Data Entries (see var title1 below) then everything after the space is omitted. Perhaps the data has to be encoded in a certain way? I tried using & nbsp ; instead of actual spaces without luck.

For the sake of simplicity I tried to remove any code no relevant to this issue.

html\javascript:

 <div id="verification"></div>

 <script>


function update() {
    $.ajax({
    url: 'update.php', //php          
    data: "", 
    dataType: 'json',   
    success: function (data) {
        //on receive of reply
        var title1 = data[2];          

        $('#verification').html("<img src=images/data-image.gif title="+title1+"></img>");     //output to html
        }
    });
}

</script>

json response

["this is a really long test that has 123 numbers and letters. * . test"]

output (by Mouseover text with Title)

this

*****php******

$result = mysql_query("SELECT title1 FROM users WHERE username = '$foobar'")
or die(mysql_error());
$array = mysql_fetch_row($result);
echo json_encode($array);

I used data[0] but I didn't want to display EVERY variable as it's not relevant to the issue. I also tried using %20% instead of spaces. — michelle, Aug 29 '15 at 19:06
http://stackoverflow.com/questions/8516235/max-length-of-title-attribute has important information — Mark Schultheiss, Aug 29 '15 at 19:09

score 6 · Accepted Answer · answered Aug 29 '15 at 19:08

6

You are missing the quotes in the attributes definition, you final HTML string will end up something like:

<img src=images/data-image.gif title=this is a really long test that has 123 numbers and letters. * . test></img>

and this is the reason that only the first word show up in the title attribute. To avoid escaping issue I suggest to create the element with jquery, something like:

var $img = $('<img>').attr('src', 'images/data-image.gif').attr('title', title1);
$('#verification').append($img);

answered Aug 29 '15 at 19:08

aghidini

2,855
5
29
32

1

I'll give this a shot. Sorry for the entry level question. – michelle Aug 29 '15 at 19:09
Otherwise it should be enough to just place the quotes like this \""+title1+"\" – Florian Wendelborn Aug 29 '15 at 19:11
is the \ for escaping purposes? Is title='"+title1+"' fine? – michelle Aug 29 '15 at 19:15
@Dodekeract surrounding `title1` with " will open your code to errors (or worse code injection) if `title1` contains double quotes. It's just safer to let jquery set directly the attribute. – aghidini Aug 29 '15 at 19:15
Andrea Ghidini why is escaping so important if the javascript data is just being displayed? All the sanitizing of user input is being handled by PHP. – michelle Aug 29 '15 at 19:21
@michelle escaping is always important when dealing with user-entered data. In your case a double quote is enough to break your page (someone can then add arbitrary html tags and execute JS code in your page) and double quotes are usually legit characters inside titles so you cannot remove them. Even if your PHP code is safe from SQL injection and encodes all double quotes to " you may never know, for example, if someone gained access to your DB through another page or directly. – aghidini Aug 30 '15 at 07:44

score 2 · Answer 2 · answered Aug 29 '15 at 19:09

2

Your title attribute will end up without quotes. anytime an attribute has other than alphanumeric characters it must be quoted. try:

$('#verification').html("<img src=images/data-image.gif title='"+title1+"'></img>");

answered Aug 29 '15 at 19:09

bknights

14,408
2
18
31

Thank you. This was an easier fix for my solution, though I'm sure I should handle it as Andrea suggested. – michelle Aug 29 '15 at 19:12

spaces are causing my javascript to display incorrectly (trims the output)

2 Answers2