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

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



Don't feel obliged to use jQuery for simple DOM stuff:
http://youmightnotneedjquery.com/

`I?d expect it to replace Prototype at some point in Eprints development.`

Truth is that some views (Screen) are tied to Prototype one way or another.

Seb

On Thu, Aug 3, 2017 at 2:40 PM, Robin Sylvestre <robin.sylvestre at polymtl.ca>
wrote:

> 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@
> ecs.soton.ac.uk <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>;
> 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
> <cjg at ecs.soton.ac.uk>]
> *Envoy? :* 1 ao?t 2017 17:59
> *? :* eprints-tech at ecs.soton.ac.uk; Robin Sylvestre <
> 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 <(514)%20340-4711> poste 3743
>
>
>
>
>
> *** Options: 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/
>
>
>
>
> *** Options: 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/
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mailman.ecs.soton.ac.uk/pipermail/eprints-tech/attachments/20170803/b96b03ca/attachment-0001.html