Js in detail template

[mogy74]

Hi to All
Sometimes i come back for a little help

This time i have a question/problem

I try to make a little complex template view , in default.php i have a strange problem:

i need to pass a php variable to js ag in work if i define a $myvar but not if i use element_ro
exemple
$myvar = "XXX"
dump is string(3) "XXX"
if i use

$myvar2 = $elements ['myelement']->element_ro;

dump is the same string(3) "XXX"

a echo confirm it
echo $myvar and $myvar2 works in both case

But when i try to pass it in js won't work

exemple if i do
alert("<?php echo $myvar;?>"); work whit XXX
alert("<?php echo $myvar2;?>"); don't work and stop the script

so the question is:
i cant't use elements in custom js in the same page?

Thx for any help

 

[cheesegrits]

Are you talking about the ./components/com_fabrik/form_X.js file? Or some inline JS in your template?

-- hugh

 

[mogy74]

inline js a simple script ... i had many test about and i find some problem with element_ro .. looks like have a eol somewhere or a br i don't know ... but i find also a more clen solution in ->value[0]; looks like work now , anoher problem is about js var .. work now whit put directly php var in js function ... anyway this is the working template if someone need help about

<?php



Recupero Dati --------------------------------------------------
$group_name = $this->groups['Report Affluenze Corsi'];
$elements = $group_name->elements;
$giorno = $elements ['giorno']->element;
$corso = $elements ['corso']->element;
$dal = $elements ['periodo_dal']->element;
$al = $elements ['periodo_al']->element;
$sede = $elements ['sede']->element;
$oraDa = $elements ['fascia_oraria_dalle']->element;
$oraA = $elements ['fascia_oraria_alle']->element;
$partecipantiTotale = $elements ['partecipanti']->element;
$idRiga = $elements ['id']->element;

$test =$elements['giorno']->value[0];

QUERY ESEMPIO---------------------------------------------------

$db = JFactory::getDBO();
$query = $db->getQuery(true);

$query
->select('SUM(numero_partecipanti)')
->from('planning_corsi')
->where('sede = ' . $db->quote($sede))
->where('nome = ' . $db->quote($corso))
->where('giorno = ' . $db->quote($giorno))
->where('data >= ' . $db->quote($dal->format('Y-m-d H:i:s')))
->where('data <= ' . $db->quote($al->format('Y-m-d H:i:s')))
->where('ora >= ' . $db->quote($oraDa->format('H:i:s')))
->where('ora <= ' . $db->quote($oraA->format('H:i:s')));

$db->setQuery($query);
$partecipanti = $db->loadResult();

--------------------------------------------------------------
*/

$group_name = $this->groups['Report Affluenze Corsi'];
$elements = $group_name->elements;
$giorno = $elements ['giorno']->value[0];
$corso = $elements ['corso']->value[0];
$dal = $elements ['periodo_dal']->element_ro;
$al = $elements ['periodo_al']->element_ro;
$sede = $elements ['sede']->value[0];
$oraDa = $elements ['fascia_oraria_dalle']->element_ro;
$oraA = $elements ['fascia_oraria_alle']->element_ro;
$partecipantiTotale = $elements ['partecipanti']->element_ro;
$idRiga = $elements ['id']->value[0];
//formatto le date-------------------

//formattazioni
$dal = new DateTime($dal);
$al = new DateTime($al);
$oraDa = new DateTime($oraDa);
$oraA = new DateTime($oraA);
// Funzioni




//-------------COSTRUISCO LE QUERY PHP PER I GRAFICI------------------------
/*echo"<pre>";
var_dump($giorno);echo"<br>";
var_dump($corso);echo"<br>";
var_dump($dal);echo"<br>";
var_dump($al);echo"<br>";
var_dump($sede);echo"<br>";
var_dump($oraDa);echo"<br>";
var_dump($oraA);echo"<br>";
var_dump($partecipantiTotale);echo"<br>";
var_dump($idRiga);echo"<br>";
echo "</pre>";
//__________COMMENTARE I DUMP!!_____________________
*/
$db = JFactory::getDBO();
$query = $db->getQuery(true);

$query
->select('id')
->from('giorni_settimana')
->where('nome = ' . $db->quote($giorno));
$db->setQuery($query);
$giornoQuery = $db->loadResult();

$db = JFactory::getDBO();
$query = $db->getQuery(true);
$query
->select('id')
->from('corsi_sala')
->where('nome = ' . $db->quote($corso));
$db->setQuery($query);
$corsoQuery = $db->loadResult();

$db = JFactory::getDBO();
$query = $db->getQuery(true);
$query
->select('id')
->from('unita_locali')
->where('nome = ' . $db->quote($sede));
$db->setQuery($query);
$sedeQuery = $db->loadResult();




// SE SELEZIONA TUTTI I GIORNI


if ( $giornoQuery == 8) {

$db = JFactory::getDBO();
$query = $db->getQuery(true);

$query
->select($db->quoteName(array('nome','giorno','sede','data','numero_partecipanti')))
->from('planning_corsi')
->where('sede = ' . $db->quote($sedeQuery))
->where('nome = ' . $db->quote($corsoQuery))
->where('data >= ' . $db->quote($dal->format('Y-m-d H:i:s')))
->where('data <= ' . $db->quote($al->format('Y-m-d H:i:s')))
->where('ora >= ' . $db->quote($oraDa->format('H:i:s')))
->where('ora <= ' . $db->quote($oraA->format('H:i:s')));

$db->setQuery($query);
$numeroRiga = $db->query();
$numeroRiga = $db->getNumRows();
$risultato = $db->loadAssocList();
$CompletoDate = '';
$CompletoPartecipanti = '';


for ($i = 0; $i < $numeroRiga; $i++){
$DataGrafico = $risultato[$i]['data'];
$GiornoGrafico =$risultato[$i]['giorno'];
$db = JFactory::getDBO();
$query = $db->getQuery(true);

$query
->select('nome')
->from('giorni_settimana')
->where('id = ' . $db->quote($GiornoGrafico));
$db->setQuery($query);
$GiornoGrafico = $db->loadResult();

$CompletoDate .= '"'.$DataGrafico.' '.$GiornoGrafico.'"'.',';
$NumeroGrafico = $risultato[$i]['numero_partecipanti'];
$CompletoPartecipanti .= $NumeroGrafico.',';
}

}else{
// Giorno Singolo
$db = JFactory::getDBO();
$query = $db->getQuery(true);

$query
->select($db->quoteName(array('nome','giorno','sede','data','numero_partecipanti')))
->from('planning_corsi')
->where('sede = ' . $db->quote($sedeQuery))
->where('nome = ' . $db->quote($corsoQuery))
->where('giorno = ' . $db->quote($giornoQuery))
->where('data >= ' . $db->quote($dal->format('Y-m-d H:i:s')))
->where('data <= ' . $db->quote($al->format('Y-m-d H:i:s')))
->where('ora >= ' . $db->quote($oraDa->format('H:i:s')))
->where('ora <= ' . $db->quote($oraA->format('H:i:s')));

$db->setQuery($query);
$numeroRiga = $db->query();
$numeroRiga = $db->getNumRows();
$risultato = $db->loadAssocList();
$CompletoDate = '';
$CompletoPartecipanti = '';


for ($i = 0; $i < $numeroRiga; $i++){
$DataGrafico = $risultato[$i]['data'];
$GiornoGrafico =$risultato[$i]['giorno'];
$db = JFactory::getDBO();
$query = $db->getQuery(true);

$query
->select('nome')
->from('giorni_settimana')
->where('id = ' . $db->quote($GiornoGrafico));
$db->setQuery($query);
$GiornoGrafico = $db->loadResult();

$CompletoDate .= '"'.$DataGrafico.' '.$GiornoGrafico.'"'.',';
$NumeroGrafico = $risultato[$i]['numero_partecipanti'];
$CompletoPartecipanti .= $NumeroGrafico.',';
}
}

?>

<script type="application/javascript" src="http://localhost/gestionale/components/com_fabrik/views/details/tmpl/ReportCorsi/resurces/awesomechart.js">


</script>

<script type="text/jscript">

var titolo = "<?php echo $corso;?>";



</script>

<script type="application/javascript">



function drawMyChart(){
if(!!document.createElement('canvas').getContext){ //check that the canvas
// element is supported
var mychart = new AwesomeChart('canvas1');
mychart.title = titolo;
mychart.data = [<?php echo $CompletoPartecipanti;?>];
mychart.labels = [<?php echo $CompletoDate;?>];
mychart.draw();
}
}

window.onload = drawMyChart;
</script>

</script>

<div align="center">
<h2> DETTAGLIO GRAFICO ANALISI <h2>
</div>
<div align="left"><table width="100%" border="2" cellspacing="1" cellpadding="1">
<tr>
<td><table >
<th>Elenco Scelte</th>

<tr>
<td><h3>CORSO:</h3></td>
<td><h3><?php echo $corso; ?></h3></td>
</tr>
<tr>
<td><h3>SEDE:</h3></td>
<td><h3><?php echo $sede; ?></h3></td>
</tr>
<tr>
<td><h3>INTERVALLO DATE:</h3></td>
<td><h3><?php echo 'DAL'.' '.$dal->format('d-m-Y').' '.'AL'.' '.$al->format('d-m-Y'); ?></h3></td>
</tr>
<tr>
<td><h3>FASCIA ORARIA:</h3></td>
<td><h3><?php echo 'DALLE'.' '.$oraDa->format('H:i').' '.'ALLE'.$oraA->format('H:i'); ?></h3></td>
</tr>
<tr>
<td><h3>GIORNO:</h3></td>
<td><h3><?php echo $giorno; ?></h3></td>
</tr>
<tr>
<td><h3>TOTALE PARTECIPANTI:</h3></td>
<td><h3><?php echo $partecipantiTotale; ?></h3></td>
</tr>

</table></td>
<td><canvas id="canvas1" width="600" height="300"> Your web-browser does not support the HTML 5 canvas element. </canvas></td>
</tr>
</table>


</div>

<div align="right"></div>
<?php

//FINE ESPERIMENTI
//FINE MIE AGGIUNTE


defined('_JEXEC') or die('Restricted access');

$form = $this->form;
$model = $this->getModel();

if ($this->params->get('show_page_heading', 0)) : ?>


div class="componentheading<?php echo $this->params->get('pageclass_sfx')?>">

</div>
<?php
endif;

if ($this->params->get('show-title', 0)) :?>
<div class="page-header">

</div>
<?php
endif;

echo $form->intro;
//echo '<div class="fabrikForm fabrikDetails" id="' . $form->formid . '">';
echo $this->plugintop;
echo $this->loadTemplate('buttons');
echo $this->loadTemplate('relateddata');
foreach ($this->groups as $group) :
$this->group = $group;
?>

<div class="<?php echo $group->class; ?>" id="group<?php echo $group->id;?>" style="<?php echo $group->css;?>">

<?php
if ($group->showLegend) :?>
<h3 class="legend">
<span><?php echo $group->title;?></span>
</h3>
<?php endif;

if (!empty($group->intro)) : ?>
<div class="groupintro"><?php echo $group->intro ?></div>
<?php
endif;

// Load the group template - this can be :
// * default_group.php - standard group non-repeating rendered as an unordered list
// * default_repeatgroup.php - repeat group rendered as an unordered list
// * default_repeatgroup_table.php - repeat group rendered in a table.

$this->elements = $group->elements;
echo $this->loadTemplate($group->tmpl);

if (!empty($group->outro)) : ?>
<div class="groupoutro"><?php echo $group->outro ?></div>
<?php
endif;
?>
</div>
<?php
endforeach;

echo $this->pluginbottom;
echo $this->loadTemplate('actions');
echo '</div>';
echo $form->outro;
echo $this->pluginend;


Now i try to make a pfd from it ... but this is another story/war

Thanks for reply like always

 

[cheesegrits]

Yeah, if your chart is being created in JS, then a PDF isn't going to work, as it won't run any JS.

-- hugh

 

[mogy74]

i'm working with a external library if i can do it i will let you know if you like

 

[mogy74]

<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
</head>

<body>
<script>
function getPDF(){
var HTML_Width = $(".sppb-row").width();
var HTML_Height = $(".sppb-row").height();
var top_left_margin = 15;
var PDF_Width = HTML_Width+(top_left_margin*2);
var PDF_Height = (PDF_Width*1.5)+(top_left_margin*2);
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height;
var totalPDFPages = Math.ceil(HTML_Height/PDF_Height)-1;
html2canvas($(".sppb-row")[0],{allowTaint:true}).then(function(canvas) {
canvas.getContext('2d');
console.log(canvas.height+" "+canvas.width);
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin,canvas_image_width,canvas_image_height);
for (var i = 1; i <= totalPDFPages; i++) {
pdf.addPage(PDF_Width, PDF_Height);
pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
}
pdf.save("HTML-Document.pdf");
});
};

</script>
<div>
<button onclick="getPDF()" id="downloadbtn" style="display: inline-block;"><b>Crea PDF</b></button>
</div>



</body>

</html>

work !!
if someone need it ...