<div dir="ltr"><div>Don't feel obliged to use jQuery for simple DOM stuff: <a href="http://youmightnotneedjquery.com/">http://youmightnotneedjquery.com/</a></div><div><br></div><div>`<span style="color:rgb(31,73,125);font-family:Calibri,sans-serif;font-size:14.6667px">I’d expect it to replace Prototype at some point in Eprints development.`</span></div><div><span style="color:rgb(31,73,125);font-family:Calibri,sans-serif;font-size:14.6667px"><br></span></div><div><span style="color:rgb(31,73,125);font-family:Calibri,sans-serif;font-size:14.6667px">Truth is that some views (Screen) are tied to Prototype one way or another.</span></div><div><span style="color:rgb(31,73,125);font-family:Calibri,sans-serif;font-size:14.6667px"><br></span></div><div>Seb</div></div><div class="gmail_extra"><br><div class="gmail_quote">On Thu, Aug 3, 2017 at 2:40 PM, Robin Sylvestre <span dir="ltr"><<a href="mailto:robin.sylvestre@polymtl.ca" target="_blank">robin.sylvestre@polymtl.ca</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div bgcolor="white" lang="FR-CA" link="#0563C1" vlink="#954F72"><div class="m_-8211573234300411731WordSection1"><p class="MsoNormal"><span style="color:#1f497d">Hi Tomasz,<u></u><u></u></span></p><p class="MsoNormal"><span style="color:#1f497d"><u></u> <u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d">I agree we’ll probably need jQuery when we go through mobile-proofing. I’d expect it to replace Prototype at some point in Eprints development. <u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d">I’m still working on it, but for now, I’ve managed to achieve what I need with just a few lines of code. Using querySelectorAll, which returns an array of the matching elements, I can add the onclick event on both radio buttons. Voilà! There’s always another way around! </span><span lang="EN-CA" style="font-family:Wingdings;color:#1f497d">J</span><span lang="EN-CA" style="color:#1f497d"><u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d">Thanks guys!<u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d">Robin<u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></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">De :</span></b><span lang="EN-CA" style="color:windowtext"> Tomasz Neugebauer [mailto:<a href="mailto:Tomasz.Neugebauer@concordia.ca" target="_blank">Tomasz.Neugebauer@<wbr>concordia.ca</a>] <br><b>Envoyé :</b> 2 août 2017 16:19<br><b>À :</b> <a href="mailto:eprints-tech@ecs.soton.ac.uk" target="_blank">eprints-tech@ecs.soton.ac.uk</a></span></p><div><div class="h5"><br><b>Objet :</b> Re: [EP-tech] Enabling/disabling fields in the workflow using JS<u></u><u></u></div></div><p></p></div></div><div><div class="h5"><p class="MsoNormal"><span lang="EN-CA"><u></u> <u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d">Hi Robin,<u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d">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.<u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d">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" target="_blank">https://wiki.eprints.org/w/<wbr>Include_Javascript_in_the_<wbr>workflow</a> ) seems promising, and it sounds like you are making some progress with it. <u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d">Like Christopher, my intuition would also be to try to use jQuery (<a href="https://api.jquery.com/click/" target="_blank">https://api.jquery.com/click/</a> ) to add an event listener to <i>name$='_diplome_articles'.<u></u><u></u></i></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d">Best wishes,<u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d">Tomasz<u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></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">From:</span></b><span lang="EN-US" style="color:windowtext"> <a href="mailto:eprints-tech-bounces@ecs.soton.ac.uk" target="_blank">eprints-tech-bounces@ecs.<wbr>soton.ac.uk</a> [<a href="mailto:eprints-tech-bounces@ecs.soton.ac.uk" target="_blank">mailto:eprints-tech-bounces@<wbr>ecs.soton.ac.uk</a>] <b>On Behalf Of </b>Robin Sylvestre<br><b>Sent:</b> August-02-17 9:41 AM<br><b>To:</b> Christopher Gutteridge <<a href="mailto:cjg@ecs.soton.ac.uk" target="_blank">cjg@ecs.soton.ac.uk</a>>; <a href="mailto:eprints-tech@ecs.soton.ac.uk" target="_blank">eprints-tech@ecs.soton.ac.uk</a><br><b>Subject:</b> Re: [EP-tech] Enabling/disabling fields in the workflow using JS<u></u><u></u></span></p></div></div><p class="MsoNormal"><span lang="EN-CA"><u></u> <u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d">Hi Christopher,<u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></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! <u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></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?<u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d">Robin<u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="color:#1f497d"><u></u> <u></u></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">De :</span></b><span lang="EN-CA" style="color:windowtext"> Christopher Gutteridge [</span><span lang="EN-CA"><a href="mailto:cjg@ecs.soton.ac.uk" target="_blank"><span>mailto:cjg@ecs.soton.ac.uk</span></a></span><span lang="EN-CA" style="color:windowtext">] <br><b>Envoyé :</b> 1 août 2017 17:59<br><b>À :</b> </span><span lang="EN-CA"><a href="mailto:eprints-tech@ecs.soton.ac.uk" target="_blank"><span>eprints-tech@ecs.soton.ac.uk</span></a></span><span lang="EN-CA" style="color:windowtext">; Robin Sylvestre <</span><span lang="EN-CA"><a href="mailto:robin.sylvestre@polymtl.ca" target="_blank"><span>robin.sylvestre@polymtl.ca</span></a></span><span lang="EN-CA" style="color:windowtext">><br><b>Objet :</b> Re: [EP-tech] Enabling/disabling fields in the workflow using JS<u></u><u></u></span></p></div></div><p class="MsoNormal"><span lang="EN-CA"><u></u> <u></u></span></p><p><span lang="EN-CA">If you need jQuery to make life easier; </span><span lang="EN-CA" style="font-size:12.0pt"><u></u><u></u></span></p><pre id="m_-8211573234300411731line1"><span lang="EN-CA" style="font-size:10.0pt;font-family:"Courier New""><u></u> <u></u></span></pre><pre><span lang="EN-CA" style="font-size:10.0pt;font-family:"Courier New""> <<span class="m_-8211573234300411731start-tag">script</span> <span class="m_-8211573234300411731attribute-name">src</span>="/javascript/jquery.min.<wbr>js" <span class="m_-8211573234300411731attribute-name">type</span>="text/javascript">// <!-- No script --></<span class="m_-8211573234300411731end-tag">script</span>><u></u><u></u></span></pre><pre><span lang="EN-CA" style="font-size:10.0pt;font-family:"Courier New""> <<span class="m_-8211573234300411731start-tag">script</span> <span class="m_-8211573234300411731attribute-name">type</span>="text/javascript">$.<wbr>noConflict();</<span class="m_-8211573234300411731end-tag">script</span>><u></u><u></u></span></pre><pre><span lang="EN-CA" style="font-size:10.0pt;font-family:"Courier New""><u></u> <u></u></span></pre><p class="MsoNormal" style="margin-bottom:12.0pt"><span lang="EN-CA">The second bit is vital or it conflicts with prototype.js which also likes to use the $ variable and is required for EPrints features. <u></u><u></u></span></p><div><p class="MsoNormal"><span lang="EN-CA">On 01/08/2017 21:51, Robin Sylvestre wrote:<u></u><u></u></span></p></div><blockquote style="margin-top:5.0pt;margin-bottom:5.0pt"><p class="MsoNormal"><span lang="EN-CA">Hello fellow Eprinters!<u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA"> <u></u><u></u></span></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? <u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA"> <u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA"><a href="https://wiki.eprints.org/w/Include_Javascript_in_the_workflow" target="_blank">This page</a> contains some clues and I’ve tried adding a <i>render_input </i>option to my field definition: <u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA"> <u></u><u></u></span></p><p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span lang="EN-CA" style="font-family:"Courier New"">{</span><span lang="EN-CA"><u></u><u></u></span></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><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span lang="EN-CA" style="font-family:"Courier New""> 'type' => 'boolean',</span><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span lang="EN-CA" style="font-family:"Courier New""> 'multiple' => 0,</span><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span lang="EN-CA" style="font-family:"Courier New""> 'volatile' => 0,</span><span lang="EN-CA"><u></u><u></u></span></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><span lang="EN-CA"><u></u><u></u></span></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><span lang="EN-CA"><u></u><u></u></span></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><span lang="EN-CA"><u></u><u></u></span></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_<wbr>actual( $repository, $current_value, $dataset, $staff, $hidden_fields, $object, $basename );</span><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span lang="EN-CA" style="font-family:"Courier New""> </span><span lang="EN-CA"><u></u><u></u></span></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><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span lang="EN-CA" style="font-family:"Courier New""> </span><span lang="EN-CA"><u></u><u></u></span></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("'.$<wbr>basename.'");</span><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span lang="EN-CA" style="font-family:"Courier New"">buttonOpt.addEventListener("<wbr>click", function(){ alert() });</span><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span lang="EN-CA" style="font-family:"Courier New""> </span><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span lang="EN-CA" style="font-family:"Courier New"">');</span><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span lang="EN-CA" style="font-family:"Courier New""> </span><span lang="EN-CA"><u></u><u></u></span></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_<wbr>element("div");</span><span lang="EN-CA"><u></u><u></u></span></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><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span lang="EN-CA" style="font-family:"Courier New""> $superdom->appendChild($<wbr>script);</span><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span lang="EN-CA" style="font-family:"Courier New""> return $superdom;</span><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span lang="EN-CA" style="font-family:"Courier New""> }</span><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal" style="margin-left:35.4pt;text-autospace:none"><span lang="EN-CA" style="font-family:"Courier New"">}</span><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA" style="font-family:"Courier New""> </span><span lang="EN-CA"><u></u><u></u></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.<u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA"> <u></u><u></u></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 <u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA"> <u></u><u></u></span></p><p class="MsoNormal" style="margin-left:35.4pt"><span lang="EN-CA" style="font-family:"Courier New"">document.querySelector("[name$<wbr>='_diplome_articles']:checked"<wbr>).value</span><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA"> <u></u><u></u></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 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? <u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA"> <u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA">Thanks for your help!!<u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA"> <u></u><u></u></span></p><p class="MsoNormal"><span lang="EN-CA"> <u></u><u></u></span></p><p class="MsoNormal"><b><span lang="EN-CA" style="font-size:14.0pt;color:#fa961e">Robin Sylvestre</span></b><span lang="EN-CA"><u></u><u></u></span></p><p class="MsoNormal"><b><span>Technicien en gestion de l’information numérique</span></b><u></u><u></u></p><p class="MsoNormal"><span>Services techniques et systèmes informatisés</span><u></u><u></u></p><p class="MsoNormal"><span>Bibliothèque de l’École Polytechnique de Montréal</span><u></u><u></u></p><p class="MsoNormal"><span><a href="tel:(514)%20340-4711" value="+15143404711" target="_blank">514-340-4711</a> poste 3743</span><u></u><u></u></p><p class="MsoNormal"> <u></u><u></u></p><p class="MsoNormal" style="margin-bottom:12.0pt"><span style="font-size:12.0pt;font-family:"Times New Roman",serif"><u></u> <u></u></span></p><pre><span style="font-size:10.0pt;font-family:"Courier New"">*** Options: </span><span lang="EN-CA" style="font-size:10.0pt;font-family:"Courier New""><a href="http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech" target="_blank"><span lang="FR-CA">http://mailman.ecs.soton.ac.<wbr>uk/mailman/listinfo/eprints-<wbr>tech</span></a></span><span style="font-size:10.0pt;font-family:"Courier New""><u></u><u></u></span></pre><pre><span lang="EN-CA" style="font-size:10.0pt;font-family:"Courier New"">*** Archive: <a href="http://www.eprints.org/tech.php/" target="_blank">http://www.eprints.org/tech.<wbr>php/</a><u></u><u></u></span></pre><pre><span lang="EN-CA" style="font-size:10.0pt;font-family:"Courier New"">*** EPrints community wiki: <a href="http://wiki.eprints.org/" target="_blank">http://wiki.eprints.org/</a><u></u><u></u></span></pre><pre><span lang="EN-CA" style="font-size:10.0pt;font-family:"Courier New"">*** EPrints developers Forum: <a href="http://forum.eprints.org/" target="_blank">http://forum.eprints.org/</a><u></u><u></u></span></pre></blockquote><p class="MsoNormal" style="margin-bottom:12.0pt"><span lang="EN-CA" style="font-size:12.0pt;font-family:"Times New Roman",serif"><u></u> <u></u></span></p><pre><span lang="EN-CA" style="font-size:10.0pt;font-family:"Courier New"">-- <u></u><u></u></span></pre><pre><span lang="EN-CA" style="font-size:10.0pt;font-family:"Courier New"">Christopher Gutteridge -- <a href="http://users.ecs.soton.ac.uk/cjg" target="_blank">http://users.ecs.soton.ac.uk/<wbr>cjg</a><u></u><u></u></span></pre><pre><span lang="EN-CA" style="font-size:10.0pt;font-family:"Courier New""><u></u> <u></u></span></pre><pre><span lang="EN-CA" style="font-size:10.0pt;font-family:"Courier New"">University of Southampton Open Data Service: <a href="http://data.southampton.ac.uk/" target="_blank">http://data.southampton.ac.uk/</a><u></u><u></u></span></pre><pre><span lang="EN-CA" style="font-size:10.0pt;font-family:"Courier New"">You should read our Web & Data Innovation blog: <a href="http://blogs.ecs.soton.ac.uk/webteam/" target="_blank">http://blogs.ecs.soton.ac.uk/<wbr>webteam/</a><u></u><u></u></span></pre><pre><span lang="EN-CA" style="font-size:10.0pt;font-family:"Courier New""><u></u> <u></u></span></pre></div></div></div></div><br>*** Options: <a href="http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech" rel="noreferrer" target="_blank">http://mailman.ecs.soton.ac.<wbr>uk/mailman/listinfo/eprints-<wbr>tech</a><br>
*** Archive: <a href="http://www.eprints.org/tech.php/" rel="noreferrer" target="_blank">http://www.eprints.org/tech.<wbr>php/</a><br>
*** EPrints community wiki: <a href="http://wiki.eprints.org/" rel="noreferrer" target="_blank">http://wiki.eprints.org/</a><br>
*** EPrints developers Forum: <a href="http://forum.eprints.org/" rel="noreferrer" target="_blank">http://forum.eprints.org/</a><br>
<br></blockquote></div><br></div>