[dev] How do I use the JS-file caching mechanism of Horde?

[Sebastian Birnbach]

2017-11-23 17:38 GMT+01:00 Jan Schneider <jan at horde.org>:

>
> Zitat von Sebastian Birnbach <birnbacs at gmail.com>:
>
>
> Followup:
>>
>>
>> I meanwhile figured out the official method for adding JS files:
>> Horde_PageOutput::addScriptFile().
>>
>> Still, I can't seem to make it work.
>>
>>
>> Everything works when the Horde_View file contains
>>
>> <script type="text/javascript" src="/js/form_sections.js"></script>
>>
>> But if I replace that with
>>
>> <?php
>> $GLOBALS['page_output']->addScriptFile('form_sections.js', 'horde');
>> ?>
>>
>> I see that the generated HTML code loads a cached version of the js file:
>>
>> <script type="text/javascript"
>> src="/js/form_sections.js?v=596ca0a81b7fe741719c6df2f8b52a22"></script>
>>
>> only that functionality is negative.
>>
>>
>> In this case, JS console complains about undefined variable
>> sections_dossier_form
>> which is in fact defined near the bottom of the Horde_View file:
>>
>> <script type="text/javascript">//<![CDATA[
>> var sections_dossier_form = new Horde_Form_Sections('dossier_form',
>> 'overview');
>> document.observe("dom:loaded",function(){$("horde_form").foc
>> usFirstElement();});
>> //]]></script>
>>
>> Any clues, anybody?
>>
>> 2017-11-23 9:35 GMT+01:00 Sebastian Birnbach <birnbacs at gmail.com>:
>>
>> I am playing around with Horde_Views and the Javascript gems in /js, like
>>> tables.js or form_sections.js. It is a real pity that there is so little
>>> documentation (none at all?) on these.
>>>
>>> Anyway, I am wondering how to include JS files making use of the Horde JS
>>> caching system. For instance, I see in the HTML source of an average
>>> Horde
>>> page something like
>>>
>>>   <script type="text/javascript" src="/js/prototype.js?v=596ca0
>>> a81b7fe741719c6df2f8b52a22
>>>
>>> and I assume that the v=... is a caching key. What would be the proper
>>> way
>>> to get such a key and denote inclusion of a JS file in a Horde_View with
>>> caching support?
>>>
>>>
> You need to call addScriptFile() *before* starting the page output.
>

Hm, unfortunately that does not do the trick.

I have one file called rebuilt.php and one called mytabs.php.
rebuilt.php calls addScriptFile() as soon as it possibly can. The complete
file reads:

require_once __DIR__ . '/../lib/Application.php';
Horde_Registry::appInit('abakus');
$GLOBALS['page_output']->addScriptFile('form_sections.js', 'horde');
$page_output->header(array(
    'title' => _("Test Tabs"),
));
$view = new Horde_View (array('templatePath' => 'formsections'));
echo $view->render('mytabs.php');
$page_output->footer();

--

Here is the other file, mytabs.php:

<?php
    $this->addHelper('Horde_View_Helper_Tag');
?>

<!-- the tabs -->
<div class="tabset">
<ul>
 <li class="horde-active" id="dossier_form_tab_overview"><a href="#"
onclick="sections_dossier_form.toggle('overview'); return
false;">overview</a> </li>
 <li id="dossier_form_tab_accounting"><a href="#"
onclick="sections_dossier_form.toggle('accounting');
return false;">accounting</a> </li>
 <li id="dossier_form_tab_schmu"><a href="#"
onclick="sections_dossier_form.toggle('schmu');
return false;">schmu</a> </li>
</ul>
</div>

<!-- the sections -->
<div id="dossier_form_section_overview" style="display:block;">
<table><tr valign="top">
  <td width="15%" align="right"><strong>subject</strong></td>
  <td>Bluetooth Pairing</td>
</tr>
<tr valign="top">
  <td width="15%" align="right"><strong>status</strong></td>
  <td>Open</td>
</tr>
<tr valign="top">
  <td width="15%" align="right"><strong>due date</strong></td>
  <td>2011-05-35</td>
</tr>
</table>
</div>

<div id="dossier_form_section_accounting" style="display:none;">
<table><tr valign="top">
  <td width="15%" align="right"><strong>budget</strong></td>
  <td></td>
</tr>
<tr valign="top">
  <td width="15%" align="right"><strong>invoiced amount</strong></td>
  <td></td>
</tr>
</table>
</div>

<div id="dossier_form_section_schmu" style="display:none;">
<table><tr valign="top">
  <td width="15%" align="right"><strong>nothing</strong></td>
  <td></td>
</tr>
<tr valign="top">
  <td width="15%" align="right"><strong>void</strong></td>
  <td></td>
</tr>
<tr valign="top">
  <td width="15%" align="right"><strong>emptiness</strong></td>
  <td></td>
</tr>
</table>
</div>

<!-- this line makes it work if issued BEFORE the CDATA section
<script type="text/javascript" src="/js/form_sections.js"></script>
-->

<!-- JS files -->
<script type="text/javascript">//<![CDATA[
var sections_dossier_form = new Horde_Form_Sections('dossier_form',
'overview');
document.observe("dom:loaded",function(){$("horde_form").
focusFirstElement();});
//]]></script>


--

I noticed that things work well if in the HTML file the JS file is included
before the CDATA section.
I don't see how I can include the JS any sooner, so the question is what
controls the CDATA section?