<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:SimSun;
panose-1:2 1 6 0 3 1 1 1 1 1;}
@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;}
@font-face
{font-family:"\@SimSun";
panose-1:2 1 6 0 3 1 1 1 1 1;}
/* 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:"HTML Preformatted Char";
margin:0cm;
margin-bottom:.0001pt;
font-size:10.0pt;
font-family:"Courier New",serif;
color:black;
mso-fareast-language:FR-CA;}
span.HTMLPreformattedChar
{mso-style-name:"HTML Preformatted Char";
mso-style-priority:99;
mso-style-link:"HTML Preformatted";
font-family:Consolas;
color:black;
mso-fareast-language:EN-US;}
p.msonormal0, li.msonormal0, div.msonormal0
{mso-style-name:msonormal;
mso-style-priority:99;
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;}
p.PrformatHTML, li.PrformatHTML, div.PrformatHTML
{mso-style-name:"Préformaté HTML";
mso-style-priority:99;
mso-style-link:"Préformaté HTML Car";
margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
color:black;
mso-fareast-language:EN-US;}
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.EmailStyle26
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.EmailStyle27
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle28
{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="EN-CA" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal"><span style="color:#1F497D;mso-fareast-language:ZH-CN">Hi Robin,<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D;mso-fareast-language:ZH-CN"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D;mso-fareast-language:ZH-CN">I think that jQuery is worthwhile to have integrated with EPrints, in part because Bootstrap plugins require it – and let’s face it – EPrints will have to become mobile friendly eventually,
and that will most likely mean Bootstrap - that is how most repositories that have adapted to mobile are dealing with it now.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D;mso-fareast-language:ZH-CN"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D;mso-fareast-language:ZH-CN">My experience with trying to pass additional options to render functions in Eprints is that it is very difficult to do without touching the EPrints core in ways that are difficult to
maintain when it comes time to upgrading. The page you found (<a href="https://wiki.eprints.org/w/Include_Javascript_in_the_workflow">https://wiki.eprints.org/w/Include_Javascript_in_the_workflow</a> ) seems promising, and it sounds like you are making some
progress with it. <o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D;mso-fareast-language:ZH-CN"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D;mso-fareast-language:ZH-CN">Like Christopher, my intuition would also be to try to use jQuery (<a href="https://api.jquery.com/click/">https://api.jquery.com/click/</a> ) to add an event listener to
<i>name$='_diplome_articles'.<o:p></o:p></i></span></p>
<p class="MsoNormal"><span style="color:#1F497D;mso-fareast-language:ZH-CN"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D;mso-fareast-language:ZH-CN">Best wishes,<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D;mso-fareast-language:ZH-CN"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D;mso-fareast-language:ZH-CN">Tomasz<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D;mso-fareast-language:ZH-CN"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D;mso-fareast-language:ZH-CN"><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-US" style="color:windowtext;mso-fareast-language:ZH-CN">From:</span></b><span lang="EN-US" style="color:windowtext;mso-fareast-language:ZH-CN"> eprints-tech-bounces@ecs.soton.ac.uk [mailto:eprints-tech-bounces@ecs.soton.ac.uk]
<b>On Behalf Of </b>Robin Sylvestre<br>
<b>Sent:</b> August-02-17 9:41 AM<br>
<b>To:</b> Christopher Gutteridge <cjg@ecs.soton.ac.uk>; eprints-tech@ecs.soton.ac.uk<br>
<b>Subject:</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 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 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 style="color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D">Could I pass another option to </span>
<span style="font-family:"Courier New",serif">render_input_field_actual </span><span style="color:#1F497D">to add the onclick event to the radio button?<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D">Robin<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span 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 style="color:windowtext;mso-fareast-language:FR-CA">De :</span></b><span style="color:windowtext;mso-fareast-language:FR-CA"> Christopher Gutteridge [</span><a href="mailto:cjg@ecs.soton.ac.uk"><span style="mso-fareast-language:FR-CA">mailto:cjg@ecs.soton.ac.uk</span></a><span style="color:windowtext;mso-fareast-language:FR-CA">]
<br>
<b>Envoyé :</b> 1 août 2017 17:59<br>
<b>À :</b> </span><a href="mailto:eprints-tech@ecs.soton.ac.uk"><span style="mso-fareast-language:FR-CA">eprints-tech@ecs.soton.ac.uk</span></a><span style="color:windowtext;mso-fareast-language:FR-CA">; Robin Sylvestre <</span><a href="mailto:robin.sylvestre@polymtl.ca"><span style="mso-fareast-language:FR-CA">robin.sylvestre@polymtl.ca</span></a><span style="color:windowtext;mso-fareast-language:FR-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">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></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal"><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: <o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif">{</span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif"> 'name' => 'diplome_articles',</span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif"> 'type' => 'boolean',</span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif"> 'multiple' => 0,</span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif"> 'volatile' => 0,</span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif"> 'input_style' => 'radio',</span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif"> 'render_input' => sub {</span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif"> 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 style="font-family:"Courier New",serif"> 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 style="font-family:"Courier New",serif"> </span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif">my $script = $repository->make_javascript('</span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif"> </span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif">var buttonOpt = document.getElementById("'.$basename.'");</span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif">buttonOpt.addEventListener("click", function(){ alert() });</span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif"> </span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif">');</span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif"> </span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif"> 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 style="font-family:"Courier New",serif"> $superdom->appendChild($dom);</span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif"> $superdom->appendChild($script);</span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif"> return $superdom;</span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif"> }</span><o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span style="font-family:"Courier New",serif">}</span><o:p></o:p></p>
<p class="MsoNormal"><span style="font-family:"Courier New",serif"> </span><o:p></o:p></p>
<p class="MsoNormal">…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></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal">From the console of my browser, I know I can get the value of the selected option using
<o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal" style="margin-left:35.4pt"><span style="font-family:"Courier New",serif">document.querySelector("[name$='_diplome_articles']:checked").value</span><o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal">…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 style="font-family:"Courier New",serif">onclick="function()" </span>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></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal">Thanks for your help!!<o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal"><b><span 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 lang="FR-CA" style="mso-fareast-language:FR-CA">Technicien en gestion de l’information numérique</span></b><span lang="FR-CA"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="FR-CA" style="mso-fareast-language:FR-CA">Services techniques et systèmes informatisés</span><span lang="FR-CA"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="FR-CA" style="mso-fareast-language:FR-CA">Bibliothèque de l’École Polytechnique de Montréal</span><span lang="FR-CA"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="FR-CA" style="mso-fareast-language:FR-CA">514-340-4711 poste 3743</span><span lang="FR-CA"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="FR-CA"> <o:p></o:p></span></p>
<p class="MsoNormal" style="margin-bottom:12.0pt"><span lang="FR-CA" 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><span lang="FR-CA">*** Options: </span><a href="http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech"><span lang="FR-CA">http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech</span></a><span lang="FR-CA"><o:p></o:p></span></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" style="margin-bottom:12.0pt"><span style="font-size:12.0pt;font-family:"Times New Roman",serif;mso-fareast-language:FR-CA"><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>