Javascript, jQuery

How to Create jQuery Widget

Api | Javascript | Jquery | PHP | Widget

jQuery Widget Tutorial


jQuery Widget : We get a lot of request from our users & developer community about ” How to create your own jQuery Widget “. In this jQuery Widget tutorial, we will explain how to create a simple jQuery Widget. We will be using mysql as backend storage and php as a server-side scripting language. We will also use jQuery 1.7.2 to perform our jQuery operations.

What is jQuery Widget?

Sites like Facebook, Twitter, Google+, Linked in & Pinterest provides jquery widgets for other sites. For example facebook like widget, twitter tweet widget, facebook share widget. So those are called jQuery Widgets. From screenshot we can clearly see how all social networking sites uses them in their API and SDK.

jQuery Widget Facebook Like

As we can see that when we put facebook like button javascript it creates this cool like button on our website. We are creating a simple version of jQuery Widget to illustrate concept behind jQuery Widget. Then you can dive into it for detailed knowledge. Let’s get started.

jQuery Widget Implementation Requirements

  • jQuery 1.7.2.
  • Basic knowledge of jQuery code.
  • Any Server side scripting language although we will use PHP for this tutorial (I will explain code in PHP for server side logic).

Coding jQuery Widget

Introduction: we are creating a jQuery Widget which will output particular product given by server using javascript. So client puts javascript code given by server api on his webpage. when page loads javascript calls server api to retrieve output and that will be added to webpage. pretty simple.

Step 1: Create a Database or use existing database. Execute the following sql query in your database to add post table or you can use your existing table and change code accordingly.

Step 2: Create a file on your server. We are using PHP so let’s create server.php file. Add following code in server.php file.

Here we add header line indicating output is javascript. So browser will treat output as a javascript instead of text/html. Next we create $str variable with blank string. Now at server side we are expecting an ID parameter in GET array for which we have to return post details. If we haven’t get any ID then we will simply set $str string to ERROR. If we have an id then we will open mysql connection and retrieve record from post table with same id. Then we set $str variable with HTML containing post title and post content details. Finally, last line which echo function with name whatever we get in $_GET['callback'] which we will see in client side script. and function body to a JSON containing html key with $str as value.

Now let’s move to Client Side Logic of jQuery Widget.

Step 3: Create a file in other website or wherever you want to. I am creating in same directory for demo purpose. I set it’s name to client.html. Add following code in it.

We have a basic HTML structure here containing div element with id example-widget-container. After that we have a block of javascript. In document ready event, we set server side call URL including id & callback as a parameter in URL. id is whatever post we want to retrieve. we can also remove it from here and modify server code to get random post. But callback is required with value set to question mark(?). which will send unique callback string to server. server will return same function. We call server URL using getJSON and when it completed we fetch html key from returned JSON and put it in div element. Rest of the code of javascript block is to ensure proper jQuery is loaded or not. If not, load proper jQuery for our jQuery widget to work properly.

Step 4: Time to run in browser. open client.html in browser. Because it’s HTML file we directly open. as you can see we get what we returned in server side login. Have a look at below output of jQuery Widget we just created from scratch.jQuery Widget Output

What you have to do next is to compact javascript and give it to public so they can show your post on their website. Feel free to customise your jQuery Widget the way you want it to look.

Download code and modify URL as needed.


Download Source Code Files


Please like our Facebook Fan page for instant updates on Tutorials.

Bookmark Link using: bookmark at folkd