How to on integrating JQuery handleTickInit

[nikolaosinlight]

Hi,

Flip is absolutely awesome. It is super simple to setup a count down timer.

My challenge is that we are heavily utilizing JQuery and it isn't obvious how to have the "data-did-init" invoke a JQuery method to do a countdown OR how to wire up the method from JQuery (I would expect this is the approach needed).

Say I have the following HTML:

          <div id="preview-countdown" class="tick">
            <div data-repeat="true" data-layout="horizontal center fit" data-transform="preset(d, h, m, s) -> delay">
              <div class="tick-group">
                <div data-key="value" data-repeat="true" data-transform="pad(00) split -> delay">
                  <span data-view="flip"></span>
                </div>
                <span data-key="label" data-view="text" class="tick-label"></span>
              </div>
            </div>
          </div>

How would I be able to from JQuery attach my own "handleTickInit" method?

I suspect the solution involves using the find method and have tried the following but it complains that "Uncaught TypeError: Cannot read properties of undefined (reading 'count')"

      $('#preview-countdown').tick.count.down(new Date(previewMode), {
       format: ['d', 'h', 'm', 's'],
       interval: 1000
       }).onupdate = function(value) {
            $.tick.value = value;
       };

What is strange is that I see the tick is initialized by the fact that the data-state says so but just don't know how to attach the method to handle the tick object. Ultimately, I assume it is super simple and others might benefit from docs updated to include this manner to access this great counter.

Thanks!

[rikschennink]

It should be something like this

$('#preview-countdown').tick('create', {
    didInit: function(tick) {
        // Tick.count.down() here
    }
});

[nikolaosinlight]

Thanks for the reply. My problem is still there. Perhaps a screen shot might help:

[rikschennink]

Have you loaded the jQuery version?

[nikolaosinlight]

Hmmm... No... I simply looked at the example folder which only references: flip.min.js and flip.min.css

But looking at the dist folder I see there is: tick.view.flip.jquery.min.js But then there is a flip.module.js which references the ../tick folder

Quite simply if I wanted to only use flip with JQuery what JS files would I need to import? Clearly the following is not sufficient: <script type="text/javascript" src="/assets/js/tick.view.flip.jquery.min.js"></script>

It also might be helpful to have a JQuery example in the examples folder. Thanks!

[rikschennink]

Agreed, this should be better described in docs.

I think you need tick.core.jquery.js from https://github.com/pqina/tick/tree/master/dist/core

Then you also need the tick.view.flip.jquery.min.js

And tick.view.flip.css + tick.core.css

It's been a while since I worked with the code but I believe adding the script tags in order will auto register the flip plugin. so first add core js tag then flip js tag.

[nikolaosinlight]

Hmm... so I added the following:

  <link rel="stylesheet" type="text/css" href="/assets/css/tick.core.min.css">
  <link rel="stylesheet" type="text/css" href="/assets/css/tick.view.flip.min.css">
  <script type="text/javascript" src="/assets/js/tick.core.jquery.min.js"></script>
  <script type="text/javascript" src="/assets/js/tick.view.flip.jquery.min.js"></script>

And the errors have gone away... however I am not getting any visual counter...

And although the html shows that it is initialized... the values being fed into onupdate is an array of NaN...

Feel like very close to having this working.... Thanks!

[nikolaosinlight]

I should also point out I tried using the argument tick in the function block (i.e. changed $.tick to tick) but that fails.

Strange that the call with tick as an argument cannot be used to access the counter but it is what it is I guess.

I appreciate your insights and sharing a great plugin!

[nikolaosinlight]

Okay... so I tried plugging in a date string and now I get numerics for the value array HOWEVER still no flip counter visually.

Something is clearly still missing. This is really painful... :-(

[rikschennink]

If you can make a reproduction on https://codesandbox.io I'm happy to take a quick look.

[rikschennink]

Closed because inactive

[nikolaosinlight]

Hello... apologies for not getting back to this sooner... I have finally found the time to circle back to this and I took your example in the flip-master project and created a version on https://codesandbox.io and shared it with you.

I would sincerely appreciate it if you could take a look. The flip counter is simply not rendering. If you could resolve the issue then might be worthwhile to include this example as a jquery variant in your project if you like.

Hoping you can help me out and this can help others in the future. This flip counter is truly amazing!

[rikschennink]

This is the error I see when I check "preserve log"

ReferenceError: Can't find variable: $

So apparently jQuery is not loading

[nikolaosinlight]

Hi @rikschennink,

Circling back b/c I really want to resolve this. I am not an export on codesandbox.io and I am not even sure where it is even reporting that that JQuery cannot load. Could I ask you to please simply help massage the example I provided into a working example that leverages JQuery. I love the Flip component but it is the ONLY component not using JQuery in our Apps.

Thank You Kindly!

[joseoconnor]

Hey @nikolaosinlight were you able to sort this out? I'm having the same issue after getting the demo example to work using HTML and javascript and then trying to move it to my existing jquery / require js architecture. It's not showing up. I've tried all recommendations above facing the same outcome. If you had any further finding's please share! :-)