Question 237628 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – pickatime.js opening when double/triple clicked on render event

I’m working on a project using pickatime.js and pickadate.js. I’m facing an issue where the time picker appears if I double or triple click on the element meant to only render it (not open it) but a single click doesn’t replicate the error. Here’s sample code which replicates the issue.

As you can see I have attempted to use stopImmediatePropagation with no luck.

This seems to be a problem with pickatime.js – how can I prevent this?

Thanks.

 $(".render-time-picker").dblclick(function(e){
        e.stopImmediatePropagation();
    });


$(".render-time-picker").click(function (e) {

        e.stopImmediatePropagation();
        returnTimePicker.render();
            
    });

    $(".return-time-picker").click(function (e) {
        e.stopPropagation();
        returnTimePicker.open();
    });

    //Start Return Time
    let $returnTimePicker = $('#return-time').pickatime({
        clear: "",
    onRender: function() {
            console.log ("Rendered!")
        },
        onStart: function() {
            this.set('select', [12, 0]); // Sets the default selected time to noon
        },
    });
    let returnTimePicker = $returnTimePicker.pickatime('picker');
    //End Return Time
<button class="render-time-picker p-6 border border-red-400">Render time picker (Double/Triple Click for Acccidental Renter / Single Click for Expected Result)</button>

<button class="return-time-picker p-6 border border-green-400">
    Set Return Time (Opens Picker)
</button>

<input type="text" name="return-time" id="return-time" class="border border-gray-200">


<link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.css" id="theme_base">
<link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.date.css" id="theme_date">
<link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.time.css" id="theme_time">

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/legacy.js"></script>
Tags:

2

Answers


  1. 0

    looks like theres a double render on the page also.
    witha plugin like this I might do something like set a flag onRender that prevents rendering for happening again until a flag has changed.

    Something like

    const isRendered = false;

$(".render-time-picker").click(function (e) {
   e.preventDefault();
   if (!isRendered) { returnTimePicker.render(); }
   
});

let $returnTimePicker = $('#return-time').pickatime({
    clear: "",
    onRender: function() {
        isRendered = true
        console.log ("Rendered!")
        // idk maybe setTimeout or whenever you think you might want to allow re-rendnering
    },
    onStart: function() {
        this.set('select', [12, 0]);
    },
});

    disclaimer: this is more of a workaround.

    edit: looks like it’s designed to open if it’s rendered already, so the workaround might be suitable

    https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js

            /**
         * Render a new picker
         */
        render: function( entireComponent ) {

            // Insert a new component holder in the root or box.
            if ( entireComponent ) {
                P.$holder = $( createWrappedComponent() )
                prepareElementHolder()
                P.$root.html( P.$holder )
            }
            else P.$root.find( '.' + CLASSES.box ).html( P.component.nodes( STATE.open ) )

            // Trigger the queued “render” events.
            return P.trigger( 'render' )
        }, //render
    Login or Signup to reply.
  2. 0

    The behavior you’re describing might be due to the way event propagation and handling work. The click event might be triggering the default behavior of the time picker even though you’re using stopImmediatePropagation().

    Here’s a suggestion to try resolving the issue:

    $(".render-time-picker").click(function (e) {
e.preventDefault(); // Prevent the default click behavior
e.stopPropagation();
returnTimePicker.render(); // Render the time picker
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search