Passing HTML code as a variable / Using PHP to write to a specific element

I'm trying to make a site that loads values from a database and then displays these values in the form of gauges. I'm using a jquery plugin for the gauge's and the format for these is

<p id='NameofGauge' class='plot' style='height:100px;width:175px;float:left;'   title='GaugeValue'></p>

There is a top level which displays say 4 gauges and when you click on one of these top level gauges it shows other gauges which fall into the category this top level gauge represents. I've pulled the values from the database and can write them to a gauge, and had the side working although fully hardcoded. I'm now attempting to make the site more dynamic ie. more enteries in the database result in more gauges. I can do this for the top level gauges or the lower level gauges, but I can't find a way to allow the lower level gauges to be displayed when a top level gauge is clicked.

Here's the code I have so far;

$mymodel2 = new model();
    print "<div id='gaugearray5'>";
    $Testkpiquery1 = mysql_query("select * FROM KPI where KpiSection like 'Finance'");

    $TotalValue;
    $number = mysql_num_rows($Testkpiquery1);
    $Group = $KPIArray['KpiGroup'];
    while ($KPIArray = mysql_fetch_array($Testkpiquery1, MYSQL_ASSOC)) {
    $Group = $KPIArray['KpiGroup'];
    $kpiname = $KPIArray['KpiName'];
    $kpidescription = $KPIArray['KpiDescription'];
    $Units = $KPIArray['Units'];
    $Column1 = $KPIArray['Val1'];
    $Column2 = $KPIArray['Val2'];
    $Target = $KPIArray['Target'];
    $Gauge = $KPIArray['GaugeType'];





    $TestdataqueryThis = mysql_query("select * FROM data_nir where period like '201101'");
    $TestdataqueryCompare = mysql_query("select * FROM data_nir where period like '201001'");
    $DataArray = mysql_fetch_array($TestdataqueryThis);
    $DataArrayCompare = mysql_fetch_array($TestdataqueryCompare);



    $ValueNow = ($DataArray[$Column1]) / ($DataArray[$Column2] * 1.609344);
    $ValueCompare = ($DataArrayCompare[$Column1]) / ($DataArrayCompare[$Column2] * 1.609344);

    $ValuetoPrint = ($ValueNow * 100) / $ValueCompare;

    $TotalValue = $ValuetoPrint + $TotalValue;
    $TargetPerc = ($ValueNow * 100) / $Target;

    $StringtoPrint .= "<p id='".$kpiname."' class='plot' style='height:100px;width:175px;float:left;' title=".$ValuetoPrint." onmouseover=GenericLabel('".$kpidescription."',".$ValueNow.",".$ValueCompare.",".$Target.",".$ValuetoPrint.",".$TargetPerc.")></p>";
    }

    $TotalValuetoPrint = $TotalValue / $number;
    print "<p id='".$Group."' class='plot' style='height:100px;width:175px;float:left;' title='".$TotalValuetoPrint."' onClick=LowerLevelPrint('".$StringtoPrint."')></p>";

    print("</div>");

Because of the multiple quote marks in '$StringtoPrint' I'm having trouble getting it to pass to the javascript function LowerLevelPrint(). LowerLevelPrint() contains a document.GetE开发者_StackOverflow社区lementById('breakdownlayer').innerHTML to write the contents of the string to the element 'breakdownlayer'.

I need a way to either pass this string or else a way php can write directly to the element 'breakdownlayer'.

I've only been using php for about 2 months so I'm not entirely sure how else to get this to work, any help would be appreciated. Thanks

Edit: Using the JSON idea @Leif Wickland suggested below I've change a line to this

print "<p id='".$Group."' class='plot' style='height:100px;width:175px;float:left;' title='".$TotalValuetoPrint."' onClick=LowerLevelPrint(".json_encode(htmlspecialchars($StringtoPrint)).")></p>";

This is what the actual gauge code then appears as;

<p id="CSP" class="plot jqplot-target" p&gt;")="" km',3.4933572974895,3.243523598341,6,107.70253989446,58.222621624825)&gt;&lt;\="" km',2.7133283796449e-6,2.7133283796449e-6,6,100,4.5222139660748e-5)&gt;&lt;\="" cost="" p&gt;&lt;p="" km',11.080618560725,10.535479658845,7,105.17431497694,158.2945508675)&gt;&lt;\="" service="" per="" onmouseover="GenericLabel('OperatingCostperServiceKm',4.2798431771458,4.2520569037415,5,100.65347839959,85.596863542916)><\/p><p" onclick="LowerLevelPrint("<p" title="103.38258331775" style="height: 100px; width: 175px; float: left; position: relative;">

id, plot, title and the style are all correct. I'm if the middle section is what JSON is encoding the values as. The onClick event doesn't appear to pass anything other than <p and there should be 4 gauges worth of paragraphs sent through.

Instead of passing the whole <p> thing from PHP, it should be easier for the PHP to just pass back the $TargetPerc as JSON. The JQuery should then update it as necessary.

You need to ensure that the HTML you're passing to JavaScript is escaped for both HTML and for Javascript. I believe wrapping

$StringtoPrint

with calls to

json_encode(htmlspecialchars($StringtoPrint))

will fix your troubles. So, that whole line of code would look like:

print "<p id='".$Group."' class='plot' style='height:100px;width:175px;float:left;' title='".$TotalValuetoPrint."' onClick=LowerLevelPrint(".json_encode(htmlspecialchars($StringtoPrint)).")></p>";

You'll need to be running on PHP 5.2 or newer to have json_encode available. Strictly speaking, it's not necessary to HTML encode the markup with htmlspecialchars, but it's better form by far.