Call Jquery class in html/php page

Question

I've searched on internet but I just can't seem to figure this out. I got this Jquery function which I want to call in my php/html page. I'm an absolute noob when it comes to Jquery.

!function( $ ){
  var Keyboard = function ( element, options ) {
    this.$element = $(element)
    this.options = options
    if (this.options.display) {
      this.$keyboard = $('<div class="keyboard"><input type="text" class="input-keyboard"></div>').appendTo('body') 
    } else {
      this.$keyboard = $('<div class="keyboard"></div>').appendTo('body') 
    }

    this.$biginput = this.$keyboard.find('.input-keyboard')
    this.wait_timer = null
    this.init()
    this.listen()
  }
}

How can I call this function in a div or button?

<body>
    <button id="testKeyboard">Test open keyboard</button>
</body>

<script>
    $(document).ready(function(){
       $("#testKeyboard").keyboard();
    });
</script>

reyaner · Accepted Answer · 2014-09-12 09:10:24Z

1

Without knowing this plugin, i would say something like this:

$(document).ready(function(){
   $("div, button").keyboard();
});

with ID:

$(document).ready(function(){
   $("#button_id").keyboard();
});

your php/html file, needs also the jQuery Library in the head part... For example:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="yourKeybordPlugin.js"></script>

maybe an other version. It should be before the plugin script...

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="yourKeybordPlugin.js"></script>
</head>
<body>
    <button id="testKeyboard">Test open keyboard</button>
    <script>
        $(document).ready(function(){
            $("#testKeyboard").keyboard();
        });
    </script>
</body>

edited Sep 12, 2014 at 9:10

answered Sep 12, 2014 at 8:51

reyaner

2,8091 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Matheno Over a year ago

Hm, this doesn't seem to work, I will update my fiddle

reyaner Over a year ago

First is for every button, every DIV, second is for sepcific ID.. you could also go with: $("#id_1, #id_2")

Matheno Over a year ago

Hm, I have specified the files on top of my index file, but still it doesnt show anything, maybe I should try another version of jquery, i have jquery-1.11.0 in my library

reyaner Over a year ago

the <script> should be in body tag

reyaner Over a year ago

Let us continue this discussion in chat.

|

Shamanth · Accepted Answer · 2014-09-12 08:55:58Z

0

Call like this from your php file,

<script type = "text/javascript">
    $(window).keyboard();
</script>

Check now on JSfiddle, included Jquery plugin and added that in head section from the option. You can see the console.log firing.

http://jsfiddle.net/7ttq2gf0/2/

answered Sep 12, 2014 at 8:55

Shamanth

2164 silver badges12 bronze badges

2 Comments

Matheno Over a year ago

This works perfect in the fiddle, but in my actual page it doesn't work. Does it matter that the jquery file is an external resource? Do I need to call the class first for example, like in php and C#? I do have <script src="/js/jquery.keyboard.js"></script> on top of my index file

Shamanth Over a year ago

If you have not included the Jquery plugin in your file then you can add it as <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> or else you can download it and load it from your local server. This is enough to call the keyboard function.

Collectives™ on Stack Overflow

Call Jquery class in html/php page

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related