F7 v5 How to include jQuery

1

I just used the CLI and installed F7 with Cordova and webpack. I have some plugins that need jQuery to work. My question is what is the best way to include jQuery?

1 Like
2

What does it have to do with F7?

3

I’m new to doing things this way and thought I’d ask here as I followed the directions on F7. Is that good enough for you or do you want an in depth thesis on why I posted here?

1 Like
4

First, install jquery:

npm i jquery

Then in the very top of your main JS file (app.js):

import jQuery from 'jquery';
window.jQuery = jQuery;
window.$ = jQuery;
7 Likes
5

Thank you, you are always helpful!

6

Thank you :slight_smile: really helpful.

7

I got this.

SyntaxError: import declarations may only appear at top level of a module.

8

If you don’t use webpack, then just include it in index.html via <script src="..."> tag

9

This works, but how can i add third party jquery plugins to the app?

10

Same as JQuery - add them to the <script src=… after the JQuery

11

Yeah i did that, for example i want to load this plugin (payform)

I have loaded it in the index page

<script src="js/vendor/payform/dist/jquery.payform.js"></script>

    When i call it payform init in the component page it does not work.

         <script>

          ccnum  = $('#card-number');
          expiry = $('#expiration');
          cvc    = $('#cvc');
          submit = document.getElementById('submit');
          result = document.getElementById('result');
          type   = document.getElementById('ccnum-type');

      payform.cardNumberInput(ccnum);
      payform.expiryInput(expiry);
      payform.cvcInput(cvc);

      // Format input for card number entry
      $('#card-number').payform('formatCardNumber');

      // Validate a credit card number
      $.payform.validateCardNumber('4242 4242 4242 4242'); //=> true

      // Get card type from number
      $.payform.parseCardType('4242 4242 4242 4242'); //=> 'visa'
    </script>

but when i place this script inside the main index.html it returns an error.

Uncaught ReferenceError: payform is not defined

12

You’ve loaded JQuery version - shouldn’t you use $.payform ???

13

Then how do i initiate the jquery plugin in the component page?

14

You have so many page events - choose one.
https://framework7.io/docs/router-component.html#component-page-events

1 Like