Forum | Appery.io

hi,

Can I have a simple example as to how I can use third party (free) plugins? For example there is this datebox jquery mobile plugin: https://github.com/jtsage/jquery-mobi...

Can I have some quick steps how to incorporate that into my app?

Thanks,
M&M

Hello,

Here is a brief plan for this goal:

1 Download jQuery plugin. Copy JS text.

2 Create new JS asset in Appery.io application.

3 Paste JS code from 1st step to the JS asset from 2nd step.

4 Now you can plugin like it described in documentation for plugin.

For example:

pre

jQuery('[name="inputName"]').pluginName();

/pre

Regards.

hi Yurii,

Thanks a ton.

Cheers,
M&M

hi Yurii,

I have done everything exactly as you mentioned but I get this error (the screenshot is attached). This is an error that I have come across even when trying to use other third party plugins. Btw the plugin that I am using is the numeric keypad jQuery Keypad from

http://keith-wood.name/keypad.html

The way I am trying to attach this plugin to the inputbox is
$(selector).keypad();

Thanks n regards,
M&M

oops forgot the attachment

Hi M&M,

Did you add CSS asset?

As i can see - this plugin requires following CSS asset:

http://keith-wood.name/css/jquery.key...

Regards.

hi Yurii,

Yes I did copy paste the entire CSS / JS files etc.

Thanks & Regards,
M&M

Ok, i will try it in my app and post the solution after.

Regards.

hi Yurii,

Cool thanks. Wouldn't have bothered you with that but I saw a similar error message when I had used another plugin. So if this problem is solved, the solution can be perhaps applied to other similar plugin problem too.

Cheers,
M&M

Hi M&M,

So here is a solution:

1. Delete all assets which is you added to achieve this goal.

2. Add JS asset "plugin". And populate it with JS from here: http://keith-wood.name/js/jquery.plug...

   http://prntscr.com/5jwdrg/direct

3. Add JS asset "keypad". And populate it with JS from here: http://keith-wood.name/js/jquery.keyp...

   Details: http://prntscr.com/5jw0xp/direct

4. Add CSS asset "keypad" and populate it with CSS from here: http://keith-wood.name/css/jquery.key...

   Details: http://prntscr.com/5jw2rq/direct

5. Add input component on the page and give it name "keyPadinputTest"
   Details: http://prntscr.com/5jw3r7/direct

6. Add "page show" event handler and populate it with following JS code:

   pre

   jQuery('[name="keyPadinputTest"]').keypad();

   /pre
   Details: http://prntscr.com/5jwezr/direct

   Please note: you should do all these steps step by step.

   Regards.