Restrict Ajax Mechanism while enter key is pressed in jsf component

Question

Here is the selector for capture and disable enter key

$(".disableEnterKey").keydown(function(event) {

    var charCode = event.charCode || event.keyCode || event.which;
    if (charCode === 13) {

        event.preventDefault();

        return false;
    }
});

Disable enter key for inputfield of primefaces-timepicker

    <pe:timePicker id="startTime"
    value="#{xxx.xxx.var}"
     mode="popup" startHours="0" endHours="23"
     showPeriod="true" widgetVar="startTimeWidget" 
     styleClass="form-control keyDownFalse disableEnterKey" >
        <p:ajax event="timeSelect" partialSubmit="false"
        listener="#{xxx.var}"
        update="endTime, duration" 
        oncomplete="keyDownFalse()"/>
    </pe:timePicker>

But the problem here is update attribute under ajax tag. i.e., I'm updating end-time timepicker once start-time timepicker event is triggered. But it should trigger only when hours and minutes choosen from start-time timepicker rather than pressing enter key.

The end-time gets updated once the enter key pressed on start-time.

So please suggest me that what is the exact way to restrict ajax mechanism while pressing enter. Thanks in advance.

you don't return anything in the oncomplete... You should... Is https://stackoverflow.com/questions/34354839/return-false-not-working-and-action-gets-triggered-on-click-of-hcommandbutton a duplicate? — Kukeltje, Jun 19 '17 at 13:05
@Kukeltje, I think `return` doesn't impact any changes. i.e., oncomplete="return keyDownFalse()". — Abdul Gaffar, Jun 20 '17 at 05:37
The oncomplete fires at the end of the ajax request... sure you need that? But now I think of it (and you **do need the 'return'**), you cannot prevent the ajax call from the ajax call itself. You need something on the timePicker that prevents the call in the first place. Let me see during the day if I can find a 'sort of ' duplicate — Kukeltje, Jun 20 '17 at 06:51

score 0 · Answer 1 · answered Jun 22 '17 at 11:58

The source of this behaviour is by design actually, on enter key, the update of the value is being fired by the original jQuery plugin fgtimepicker, exactly right here.

To fix this, the easiest way would be to extend the plugin, and change this specific behaviour. An example of the extend approach:

$.extend($.fgtimepicker, {
   _doKeyDown: function (event) {
       //copy original source here with different handling for 13/enter case        
   }
});

A full example of the enter case handling could be like the following:

<script>
//<![CDATA[
    $.extend($.fgtimepicker, {
        _doKeyDown: function (event) {
            var inst = $.fgtimepicker._getInst(event.target);
            var handled = true;
            inst._keyEvent = true;
            if ($.fgtimepicker._timepickerShowing) {
                switch (event.keyCode) {
                    case 9:
                        $.fgtimepicker._hideTimepicker();
                        handled = false;
                        break; // hide on tab out
                    case 13:
                        //CHANGE Enter KEY BEHAVIOUR
                        //NO NEED TO FIRE THE UPDATE ---> $.fgtimepicker._updateSelectedValue(inst);
                        $.fgtimepicker._hideTimepicker();
                        handled = false;
                        break; // hide on tab out
                    case 27:
                        $.fgtimepicker._hideTimepicker();
                        break; // hide on escape
                        default:
                            handled = false;
                }
            } else if (event.keyCode == 36 && event.ctrlKey) { // display the time picker on ctrl+home
                $.fgtimepicker._showTimepicker(this);
            } else {
                handled = false;
            }
            if (handled) {
                event.preventDefault();
                event.stopPropagation();
            }
    }
 });
 //]]>
 </script>

This would prevent any update event caused by the Enter key.

Please note that this piece of script has to be launched without delay like document.ready or so, that's the reason I included the extend in a <script> tag, to make that clearer for later comers.

Restrict Ajax Mechanism while enter key is pressed in jsf component

1 Answers1