[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[EP-tech] Enabling/disabling fields in the workflow using JS



Hi Tomasz,



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.



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! J



Thanks guys!

Robin





De : Tomasz Neugebauer [mailto:Tomasz.Neugebauer at concordia.ca]
Envoy? : 2 ao?t 2017 16:19
? : eprints-tech at ecs.soton.ac.uk
Objet : Re: [EP-tech] Enabling/disabling fields in the workflow using JS



Hi Robin,



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.



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
(https://wiki.eprints.org/w/Include_Javascript_in_the_workflow ) seems
promising, and it sounds like you are making some progress with it.



Like Christopher, my intuition would also be to try to use jQuery
(https://api.jquery.com/click/ ) to add an event listener to
name$='_diplome_articles'.



Best wishes,



Tomasz





From: eprints-tech-bounces at ecs.soton.ac.uk
<mailto:eprints-tech-bounces at ecs.soton.ac.uk>
[mailto:eprints-tech-bounces at ecs.soton.ac.uk] On Behalf Of Robin Sylvestre
Sent: August-02-17 9:41 AM
To: Christopher Gutteridge <cjg at ecs.soton.ac.uk
<mailto:cjg at ecs.soton.ac.uk> >; eprints-tech at ecs.soton.ac.uk
<mailto:eprints-tech at ecs.soton.ac.uk>
Subject: Re: [EP-tech] Enabling/disabling fields in the workflow using JS



Hi Christopher,



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!



Could I pass another option to render_input_field_actual to add the
onclick event to the radio button?



Robin





De : Christopher Gutteridge [ <mailto:cjg at ecs.soton.ac.uk>
mailto:cjg at ecs.soton.ac.uk]
Envoy? : 1 ao?t 2017 17:59
? :  <mailto:eprints-tech at ecs.soton.ac.uk> eprints-tech at ecs.soton.ac.uk;
Robin Sylvestre < <mailto:robin.sylvestre at polymtl.ca>
robin.sylvestre at polymtl.ca>
Objet : Re: [EP-tech] Enabling/disabling fields in the workflow using JS



If you need jQuery to make life easier;


  <script src="/javascript/jquery.min.js" type="text/javascript">// <!--
No script --></script>
  <script type="text/javascript">$.noConflict();</script>


The second bit is vital or it conflicts with prototype.js which also likes
to use the $ variable and is required for EPrints features.

On 01/08/2017 21:51, Robin Sylvestre wrote:

Hello fellow Eprinters!



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?



This page <https://wiki.eprints.org/w/Include_Javascript_in_the_workflow>
contains some clues and I?ve tried adding a render_input option to my
field definition:



{

  'name' => 'diplome_articles',

  'type' => 'boolean',

  'multiple' => 0,

  'volatile' => 0,

  'input_style' => 'radio',

   'render_input' => sub {

                    my ( $field, $repository, $current_value, $dataset,
$staff, $hidden_fields, $object, $basename ) = @_;

                    my $dom = $field->render_input_field_actual(
$repository, $current_value, $dataset, $staff, $hidden_fields, $object,
$basename );



my $script = $repository->make_javascript('



var buttonOpt = document.getElementById("'.$basename.'");

buttonOpt.addEventListener("click", function(){ alert() });



');



     my $superdom = $repository->xml->create_element("div");

              $superdom->appendChild($dom);

              $superdom->appendChild($script);

              return $superdom;

             }

}




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.



>From the console of my browser, I know I can get the value of the selected
option using



document.querySelector("[name$='_diplome_articles']:checked").value




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
onclick="function()" to the radio button itself and toggle the date field
accordingly. But is it possible to do it without hacking EPrints too much?




Thanks for your help!!





Robin Sylvestre

Technicien en gestion de l?information num?rique

Services techniques et syst?mes informatis?s

Biblioth?que de l??cole Polytechnique de Montr?al

514-340-4711 poste 3743





*** Options:
<http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech>
http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech
*** Archive: http://www.eprints.org/tech.php/
*** EPrints community wiki: http://wiki.eprints.org/
*** EPrints developers Forum: http://forum.eprints.org/



--
Christopher Gutteridge -- http://users.ecs.soton.ac.uk/cjg

University of Southampton Open Data Service:
http://data.southampton.ac.uk/
You should read our Web & Data Innovation blog:
http://blogs.ecs.soton.ac.uk/webteam/

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mailman.ecs.soton.ac.uk/pipermail/eprints-tech/attachments/20170803/9da2ac51/attachment-0001.html