Databases
StackOverflow2013
Postsdbo
POPassing HTML code as a variable / Using PHP to write to a specific element
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPassing HTML code as a variable / Using PHP to write to a specific element
    text
    copied!<p>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> <pre><code>&lt;p id='NameofGauge' class='plot' style='height:100px;width:175px;float:left;' title='GaugeValue'&gt;&lt;/p&gt; </code></pre> <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.</p> <p>Here's the code I have so far;</p> <pre><code>$mymodel2 = new model(); print "&lt;div id='gaugearray5'&gt;"; $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 .= "&lt;p id='".$kpiname."' class='plot' style='height:100px;width:175px;float:left;' title=".$ValuetoPrint." onmouseover=GenericLabel('".$kpidescription."',".$ValueNow.",".$ValueCompare.",".$Target.",".$ValuetoPrint.",".$TargetPerc.")&gt;&lt;/p&gt;"; } $TotalValuetoPrint = $TotalValue / $number; print "&lt;p id='".$Group."' class='plot' style='height:100px;width:175px;float:left;' title='".$TotalValuetoPrint."' onClick=LowerLevelPrint('".$StringtoPrint."')&gt;&lt;/p&gt;"; print("&lt;/div&gt;"); </code></pre> <p>Because of the multiple quote marks in <code>'$StringtoPrint'</code> I'm having trouble getting it to pass to the javascript function <code>LowerLevelPrint()</code>. <code>LowerLevelPrint()</code> contains a <code>document.GetElementById('breakdownlayer').innerHTML</code> to write the contents of the string to the element 'breakdownlayer'.</p> <p>I need a way to either pass this string or else a way php can write directly to the element <code>'breakdownlayer'</code>.</p> <p>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</p> <p>Edit: Using the JSON idea @Leif Wickland suggested below I've change a line to this</p> <pre><code>print "&lt;p id='".$Group."' class='plot' style='height:100px;width:175px;float:left;' title='".$TotalValuetoPrint."' onClick=LowerLevelPrint(".json_encode(htmlspecialchars($StringtoPrint)).")&gt;&lt;/p&gt;"; </code></pre> <p>This is what the actual gauge code then appears as;</p> <pre><code>&lt;p id="CSP" class="plot jqplot-target" p&amp;gt;")="" km',3.4933572974895,3.243523598341,6,107.70253989446,58.222621624825)&amp;gt;&amp;lt;\="" km',2.7133283796449e-6,2.7133283796449e-6,6,100,4.5222139660748e-5)&amp;gt;&amp;lt;\="" cost="" p&amp;gt;&amp;lt;p="" km',11.080618560725,10.535479658845,7,105.17431497694,158.2945508675)&amp;gt;&amp;lt;\="" service="" per="" onmouseover="GenericLabel('OperatingCostperServiceKm',4.2798431771458,4.2520569037415,5,100.65347839959,85.596863542916)&gt;&lt;\/p&gt;&lt;p" onclick="LowerLevelPrint("&lt;p" title="103.38258331775" style="height: 100px; width: 175px; float: left; position: relative;"&gt; </code></pre> <p>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 <code>&lt;p</code> and there should be 4 gauges worth of paragraphs sent through.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload