<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<p>If you need jQuery to make life easier; <br>
</p>
<pre id="line1"><span>
<span id="line11"></span> </span><span><<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a class="attribute-value">/javascript/jquery.min.js</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>// </span><span><!</span><span>-- No script --></span><span></<span class="end-tag">script</span>></span><span>
<span id="line12"></span> </span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>$.noConflict();</span><span></<span class="end-tag">script</span>></span><span>
</span></pre>
The second bit is vital or it conflicts with prototype.js which also
likes to use the $ variable and is required for EPrints features. <br>
<br>
<div class="moz-cite-prefix">On 01/08/2017 21:51, Robin Sylvestre
wrote:<br>
</div>
<blockquote type="cite"
cite="mid:EMEW3|ef5d274ef2d047fc0531a9c70653d26fy70MYm14eprints-tech-bounces|ecs.soton.ac.uk|00d101d30b07$f3b7ec30$db27c490$@polymtl.ca">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<meta name="Generator" content="Microsoft Word 15 (filtered
medium)">
<style><!--
/* Font Definitions */
@font-face
        {font-family:"Cambria Math";
        panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
        {font-family:Calibri;
        panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
        {margin:0cm;
        margin-bottom:.0001pt;
        font-size:11.0pt;
        font-family:"Calibri",sans-serif;
        mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
        {mso-style-priority:99;
        color:#0563C1;
        text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
        {mso-style-priority:99;
        color:#954F72;
        text-decoration:underline;}
span.EmailStyle17
        {mso-style-type:personal-compose;
        font-family:"Calibri",sans-serif;
        color:windowtext;}
.MsoChpDefault
        {mso-style-type:export-only;
        font-family:"Calibri",sans-serif;
        mso-fareast-language:EN-US;}
@page WordSection1
        {size:612.0pt 792.0pt;
        margin:72.0pt 90.0pt 72.0pt 90.0pt;}
div.WordSection1
        {page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
<div class="WordSection1">
<p class="MsoNormal">Hello fellow Eprinters!<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><span lang="EN-CA">I’m trying to
enable/disable a date field in the workflow based on the
value of a radio button (value = True or False), using
JavaScript. Is there an easy way to do it? <o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA"><a
href="https://wiki.eprints.org/w/Include_Javascript_in_the_workflow"
moz-do-not-send="true">This page</a> contains some clues
and I’ve tried adding a <i>render_input </i>option to my
field definition: <o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA"><o:p> </o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"">{<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">
'name' => 'diplome_articles',<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">
'type' => 'boolean',<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">
'multiple' => 0,<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">
'volatile' => 0,<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">
'input_style' => 'radio',<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">
'render_input' => sub {<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">
my ( $field, $repository, $current_value, $dataset, $staff,
$hidden_fields, $object, $basename ) = @_;<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA"> <o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA"> my
$dom = $field->render_input_field_actual( $repository,
$current_value, $dataset, $staff, $hidden_fields, $object,
$basename );<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA"><o:p> </o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">my
$script = $repository->make_javascript('<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA"><o:p> </o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">var
buttonOpt = document.getElementById("'.$basename.'");<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">buttonOpt.addEventListener("click",
function(){ alert() });<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA"><o:p> </o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">');<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA"><o:p> </o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">
my $superdom =
$repository->xml->create_element("div");<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">
$superdom->appendChild($dom);<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">
$superdom->appendChild($script);<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">
return $superdom;<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">
}<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-left:35.4pt;text-autospace:none"><span
style="font-family:"Courier New"" lang="EN-CA">}<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-family:"Courier
New"" lang="EN-CA"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA">…but since both radio
buttons (true/false) get the same ID when rendered by
EPrints, using “getElementById” returns only the first
element, thus only works when the first option is clicked.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA">From the console of my
browser, I know I can get the value of the selected option
using <o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:35.4pt"><span
style="font-family:"Courier New"" lang="EN-CA">document.querySelector("[name$='_diplome_articles']:checked").value<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA">…but I can’t figure out
how to add an event listener for when this value is
changing. Actually, the much, much easier way would be to
just add </span><span style="font-family:"Courier
New"" lang="EN-CA">onclick="function()" </span><span
lang="EN-CA">to the radio button itself and toggle the date
field accordingly. But is it possible to do it without
hacking EPrints too much? <o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA">Thanks for your help!!<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA"><o:p> </o:p></span></p>
<p class="MsoNormal"><b><span
style="font-size:14.0pt;color:#FA961E;mso-fareast-language:FR-CA"
lang="EN-CA">Robin Sylvestre</span></b><span
style="mso-fareast-language:FR-CA" lang="EN-CA"><o:p></o:p></span></p>
<p class="MsoNormal"><b><span
style="color:black;mso-fareast-language:FR-CA">Technicien
en gestion de l’information numérique</span></b><span
style="mso-fareast-language:FR-CA"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:black;mso-fareast-language:FR-CA">Services
techniques et systèmes informatisés</span><span
style="mso-fareast-language:FR-CA"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:black;mso-fareast-language:FR-CA">Bibliothèque
de l’École Polytechnique de Montréal</span><span
style="mso-fareast-language:FR-CA"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:black;mso-fareast-language:FR-CA">514-340-4711
poste 3743</span><span style="mso-fareast-language:FR-CA"><o:p></o:p></span></p>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">*** Options: <a class="moz-txt-link-freetext" href="http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech">http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech</a>
*** Archive: <a class="moz-txt-link-freetext" href="http://www.eprints.org/tech.php/">http://www.eprints.org/tech.php/</a>
*** EPrints community wiki: <a class="moz-txt-link-freetext" href="http://wiki.eprints.org/">http://wiki.eprints.org/</a>
*** EPrints developers Forum: <a class="moz-txt-link-freetext" href="http://forum.eprints.org/">http://forum.eprints.org/</a>
</pre>
</blockquote>
<br>
<pre class="moz-signature" cols="72">--
Christopher Gutteridge -- <a class="moz-txt-link-freetext" href="http://users.ecs.soton.ac.uk/cjg">http://users.ecs.soton.ac.uk/cjg</a>
University of Southampton Open Data Service: <a class="moz-txt-link-freetext" href="http://data.southampton.ac.uk/">http://data.southampton.ac.uk/</a>
You should read our Web & Data Innovation blog: <a class="moz-txt-link-freetext" href="http://blogs.ecs.soton.ac.uk/webteam/">http://blogs.ecs.soton.ac.uk/webteam/</a>
</pre>
</body>
</html>