Question

I have this code that is supposed to echo some values from a MySQL database. I use the exact same code twice, and that specific part of the code doesn’t work as expected.

I have a DIV which changes content on mouseover (with $(this).html('')).

Basically we have something like:

echo "<a href=\" event.php?id=".$donnees['event_ID']." \">";
echo "<div class=\"" ;
//here, check which category we have, and select the appropriate CLASS (DP_0, _1, _2, _3).
if ($donnees['event_category'] == 'universitaire') {
    echo "DP_0";
} else if ($donnees['event_category'] == 'sociol') {
    echo "DP_1";
} else if ($donnees['event_category'] == 'artiste') {
    echo "DP_2";
} else if ($donnees['event_category'] == 'aventurier') {
    echo "DP_3";
} else {
    echo "DP_0";
}
echo "\" id=\"".$donnees['event_ID']."\" onmouseover=\"$(this).html('";
echo "Institution: ".$donnees['event_institution']. "</br>";
echo "Association: ".$donnees['event_association']. "</br></br>";
echo "')\” onmouseout=\"$(this).html('";

echo $donnees['event_name'] . "</br></br>";
echo "Adresse: ".$donnees['event_adresse'] . "</br></br>";

if ($donnees['event_payant'] == '0') {
    echo "PAYANT"; //Works
    echo "<p>BLABLA</p></br'>"; // Works
    echo "<p style=\"background-color:red;\”>BLABLA</p></br>"; // doesn't work
}


echo "')\" sty1e=\" ";
//here, check which category we have, and select the appropriate background
if ($donnees['event_category'] == 'universitaire') {
    echo "background-image:url('images/universitaireCategory.png');";
} else if ($donnees['event_category'] == 'sociol') {
    echo "background-image:url('images/socialCategory.png');";
} else if ($donnees['event_category'] == 'artiste') {
    echo "background-image:url('images/artisteCategory.png');";
} else if ($donnees['event_category'] == 'aventurier') {
    echo "background-image:url('images/aventurierCategory.png');";
} else {
    echo "background-image:url('images/universitaireCategory.png');";
}
echo " \"> ";

I commented the weird part. If I do:

echo "<p>BLABLA</p></br>"; // That code works fine

but:

echo "<p style=\"background-color:red;\">BLABLA</p></br>"; // doesn't work

As soon as I add something with \"\" or ' ', everything that is after is broken. Why?

The exact same code later in my code works:

<div> <p style=\"background-color:red;\">BLABLA</p></br> </div>

Answer 1

I think the problem lies in the fact that the problematic html is encapsulated in onmouseover="" PHP is echoing out \" as " and the resulting html is something like:

onmouseover="$(this).html('<p style="background-color:red">BLABLA</p></br>')"

as a result, onmouseover actually only equals "$(this).html('<p style=".

To get it to work, you would have to escape your double quotes in the PHP and Javascript parts of your code. Unfortunately I’ve no idea how to do that.

I set up a jsfiddle here which I hope demonstrates my point.