<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv=Content-Type content="text/html; charset=iso-8859-1"><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;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 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;
color:black;
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;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0cm;
mso-margin-bottom-alt:auto;
margin-left:0cm;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
color:black;
mso-fareast-language:EN-US;}
pre
{mso-style-priority:99;
mso-style-link:"Préformaté HTML Car";
margin:0cm;
margin-bottom:.0001pt;
font-size:10.0pt;
font-family:"Courier New";
color:black;
mso-fareast-language:FR-CA;}
p.msonormal0, li.msonormal0, div.msonormal0
{mso-style-name:msonormal;
mso-margin-top-alt:auto;
margin-right:0cm;
mso-margin-bottom-alt:auto;
margin-left:0cm;
font-size:12.0pt;
font-family:"Times New Roman",serif;
color:black;
mso-fareast-language:FR-CA;}
span.PrformatHTMLCar
{mso-style-name:"Préformaté HTML Car";
mso-style-priority:99;
mso-style-link:"Préformaté HTML";
font-family:Consolas;
color:black;}
span.start-tag
{mso-style-name:start-tag;}
span.attribute-name
{mso-style-name:attribute-name;}
span.end-tag
{mso-style-name:end-tag;}
span.EmailStyle24
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.EmailStyle25
{mso-style-type:personal-reply;
font-family:"Calibri",sans-serif;
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@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]--></head><body bgcolor=white lang=FR-CA link="#0563C1" vlink="#954F72"><div class=WordSection1><p class=MsoNormal><span style='color:#1F497D'>Hi Christopher,<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-CA style='color:#1F497D'>Thanks for your suggestion. I’m a bit more familiar to jQuery than Prototype, although I think it would be overkill to load jQuery on top of Prototype just for doing this. I’m sure there is an easier way to fix this! <o:p></o:p></span></p><p class=MsoNormal><span lang=EN-CA style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-CA style='color:#1F497D'>Could I pass another option to </span><span lang=EN-CA style='font-family:"Courier New"'>render_input_field_actual </span><span lang=EN-CA style='color:#1F497D'>to add the onclick event to the radio button?<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-CA style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-CA style='color:#1F497D'>Robin<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-CA style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-CA style='color:#1F497D'><o:p> </o:p></span></p><div><div style='border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0cm 0cm 0cm'><p class=MsoNormal><b><span lang=EN-CA style='color:windowtext;mso-fareast-language:FR-CA'>De :</span></b><span lang=EN-CA style='color:windowtext;mso-fareast-language:FR-CA'> Christopher Gutteridge [mailto:cjg@ecs.soton.ac.uk] <br><b>Envoyé :</b> 1 août 2017 17:</span><span lang=FR style='color:windowtext;mso-fareast-language:FR-CA'>59<br><b>À :</b> eprints-tech@ecs.soton.ac.uk; Robin Sylvestre <robin.sylvestre@polymtl.ca><br><b>Objet :</b> Re: [EP-tech] Enabling/disabling fields in the workflow using JS<o:p></o:p></span></p></div></div><p class=MsoNormal><o:p> </o:p></p><p>If you need jQuery to make life easier; <span style='font-size:12.0pt;mso-fareast-language:FR-CA'><o:p></o:p></span></p><pre id=line1><o:p> </o:p></pre><pre> <<span class=start-tag>script</span> <span class=attribute-name>src</span>="/javascript/jquery.min.js" <span class=attribute-name>type</span>="text/javascript">// <!-- No script --></<span class=end-tag>script</span>><o:p></o:p></pre><pre> <<span class=start-tag>script</span> <span class=attribute-name>type</span>="text/javascript">$.noConflict();</<span class=end-tag>script</span>><o:p></o:p></pre><pre><o:p> </o:p></pre><p class=MsoNormal style='margin-bottom:12.0pt'>The second bit is vital or it conflicts with prototype.js which also likes to use the $ variable and is required for EPrints features. <o:p></o:p></p><div><p class=MsoNormal>On 01/08/2017 21:51, Robin Sylvestre wrote:<o:p></o:p></p></div><blockquote style='margin-top:5.0pt;margin-bottom:5.0pt'><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? </span><o:p></o:p></p><p class=MsoNormal><span lang=EN-CA> </span><o:p></o:p></p><p class=MsoNormal><span lang=EN-CA><a href="https://wiki.eprints.org/w/Include_Javascript_in_the_workflow">This page</a> contains some clues and I’ve tried adding a <i>render_input </i>option to my field definition: </span><o:p></o:p></p><p class=MsoNormal><span lang=EN-CA> </span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span style='font-family:"Courier New"'>{</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> 'name' => 'diplome_articles',</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> 'type' => 'boolean',</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> 'multiple' => 0,</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> 'volatile' => 0,</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> 'input_style' => 'radio',</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> 'render_input' => sub {</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> my ( $field, $repository, $current_value, $dataset, $staff, $hidden_fields, $object, $basename ) = @_;</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> my $dom = $field->render_input_field_actual( $repository, $current_value, $dataset, $staff, $hidden_fields, $object, $basename );</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> </span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'>my $script = $repository->make_javascript('</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> </span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'>var buttonOpt = document.getElementById("'.$basename.'");</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'>buttonOpt.addEventListener("click", function(){ alert() });</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> </span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'>');</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> </span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> my $superdom = $repository->xml->create_element("div");</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> $superdom->appendChild($dom);</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> $superdom->appendChild($script);</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> return $superdom;</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'> }</span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt;text-autospace:none'><span lang=EN-CA style='font-family:"Courier New"'>}</span><o:p></o:p></p><p class=MsoNormal><span lang=EN-CA style='font-family:"Courier New"'> </span><o:p></o:p></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.</span><o:p></o:p></p><p class=MsoNormal><span lang=EN-CA> </span><o:p></o:p></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 </span><o:p></o:p></p><p class=MsoNormal><span lang=EN-CA> </span><o:p></o:p></p><p class=MsoNormal style='margin-left:35.4pt'><span lang=EN-CA style='font-family:"Courier New"'>document.querySelector("[name$='_diplome_articles']:checked").value</span><o:p></o:p></p><p class=MsoNormal><span lang=EN-CA> </span><o:p></o:p></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 lang=EN-CA style='font-family:"Courier New"'>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? </span><o:p></o:p></p><p class=MsoNormal><span lang=EN-CA> </span><o:p></o:p></p><p class=MsoNormal><span lang=EN-CA>Thanks for your help!!</span><o:p></o:p></p><p class=MsoNormal><span lang=EN-CA> </span><o:p></o:p></p><p class=MsoNormal><span lang=EN-CA> </span><o:p></o:p></p><p class=MsoNormal><b><span lang=EN-CA style='font-size:14.0pt;color:#FA961E;mso-fareast-language:FR-CA'>Robin Sylvestre</span></b><o:p></o:p></p><p class=MsoNormal><b><span style='mso-fareast-language:FR-CA'>Technicien en gestion de l’information numérique</span></b><o:p></o:p></p><p class=MsoNormal><span style='mso-fareast-language:FR-CA'>Services techniques et systèmes informatisés</span><o:p></o:p></p><p class=MsoNormal><span style='mso-fareast-language:FR-CA'>Bibliothèque de l’École Polytechnique de Montréal</span><o:p></o:p></p><p class=MsoNormal><span style='mso-fareast-language:FR-CA'>514-340-4711 poste 3743</span><o:p></o:p></p><p class=MsoNormal> <o:p></o:p></p><p class=MsoNormal><span style='font-size:12.0pt;font-family:"Times New Roman",serif;mso-fareast-language:FR-CA'><br><br><br><o:p></o:p></span></p><pre>*** Options: <a href="http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech">http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech</a><o:p></o:p></pre><pre>*** Archive: <a href="http://www.eprints.org/tech.php/">http://www.eprints.org/tech.php/</a><o:p></o:p></pre><pre>*** EPrints community wiki: <a href="http://wiki.eprints.org/">http://wiki.eprints.org/</a><o:p></o:p></pre><pre>*** EPrints developers Forum: <a href="http://forum.eprints.org/">http://forum.eprints.org/</a><o:p></o:p></pre></blockquote><p class=MsoNormal><span style='font-size:12.0pt;font-family:"Times New Roman",serif;mso-fareast-language:FR-CA'><br><br><o:p></o:p></span></p><pre>-- <o:p></o:p></pre><pre>Christopher Gutteridge -- <a href="http://users.ecs.soton.ac.uk/cjg">http://users.ecs.soton.ac.uk/cjg</a><o:p></o:p></pre><pre><o:p> </o:p></pre><pre>University of Southampton Open Data Service: <a href="http://data.southampton.ac.uk/">http://data.southampton.ac.uk/</a><o:p></o:p></pre><pre>You should read our Web & Data Innovation blog: <a href="http://blogs.ecs.soton.ac.uk/webteam/">http://blogs.ecs.soton.ac.uk/webteam/</a><o:p></o:p></pre><pre><o:p> </o:p></pre></div></body></html>