Search this site

Kwwika ceased operation on 01/06/2011. Please migrate to Pusher
API‎ > ‎JavaScript‎ > ‎How to...‎ > ‎

How to subscribe to <form> values submitted through Kwwika

In a previous How to we described how to easily push <form> values through Kwwika. This How to shows you how to subscribe to, and display, those values.

If you know the field names (<form> element names) then the simplest way is probably to use the Kwwika jQuery Real-Time Push plugin.

Using the Kwwika jQuery Real-Time Push plugin

Create your basic page HTML

In the code below we are assuming that only four fields are submitted, question1, answer1, question2 and answer2.

<html>
    <head>
        <title>Subscribe to FORM values using Kwwika jQuery plugin</title>
    </head>
    <body>
        <h1>Questions &amp; Answers</h1>

        <span>Question 1:</span>
        <span>No question present</span><br />
        <span>Answer 1:</span>
        <span >No answer present</span>

        <br /><br />

        <span>Question 2:</span>
        <span>No question present.</span><br />
        <span>Answer 2:</span>
        <span>No answer present</span>
    </body>
</html>

Include <script> tags

In order to use Kwwika you must include the Kwwika JavaScript API <script> tag. In order to use the Kwwika jQuery Real-Time Push plugin you must first include the jQuery <script> tag and then the Kwwika jQuery Real-Time Push plugin <script> tag.

<html>
    <head>
        <title>Subscribe to FORM values using Kwwika jQuery plugin</title>

        <script src="http://js.kwwika.com/beta/api.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script src="http://api.kwwika.com/latest/plugins/jQuery/jquery.kwwika/jquery.kwwika.js"></script>

    </head>
    <body>
        <h1>Questions &amp; Answers</h1>

        <span>Question 1:</span>
        <span>No question present</span><br />
        <span>Answer 1:</span>
        <span >No answer present</span>

        <br /><br />

        <span>Question 2:</span>
        <span>No question present.</span><br />
        <span>Answer 2:</span>
        <span>No answer present</span>
    </body>
</html>  

Add Kwwika attributes to the HTML

For the Kwwika jQuery real-time push plugin to know what topics to subscribe to and which fields to push into the web page you need to apply some attributes to your HTML markup. You identify the topic by using the data-topic attribute and the field using the data-field attribute. In the example below we are subscribing to the /KWWIKA/SANDBOX topic and the fields question1, answer1, question2 and answer2.

<html>
    <head>
        <title>Subscribe to FORM values using Kwwika jQuery plugin</title>

        <script src="http://js.kwwika.com/beta/api.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script src="http://api.kwwika.com/latest/plugins/jQuery/jquery.kwwika/jquery.kwwika.js"></script>
    </head>
    <body>
        <h1>Questions &amp; Answers</h1>

        <span>Question 1:</span>
        <span data-topic="/KWWIKA/SANDBOX" data-field="question1">No question present</span><br />
        <span">Answer 1:</span>
        <span data-topic="/KWWIKA/SANDBOX" data-field="answer1">No answer present</span>

        <br /><br />

        <span>Question 2:</span>
        <span data-topic="/KWWIKA/SANDBOX" data-field="question2">No question present.</span><br />
        <span>Answer 2:</span>
        <span data-topic="/KWWIKA/SANDBOX" data-field="answer2">No answer present</span>
    </body>
</html>

Enabling Kwwika real-time push updates

The last thing that needs to be done is to call the plugin to enable real-time push. You do this in the standard jQuery way by first selecting the element, or elements, to activate and then calling the kwwika() method.

<html>
    <head>
        <title>Subscribe to FORM values using Kwwika jQuery plugin</title>

        <script src="http://js.kwwika.com/beta/api.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script src="http://api.kwwika.com/latest/plugins/jQuery/jquery.kwwika/jquery.kwwika.js"></script>

        <script>
            $(function ()
            {            
                $("body").kwwika();
            });
        </script>
    </head>
    <body>
        <h1>Questions &amp; Answers</h1>

        <span>Question 1:</span>
        <span data-topic="/KWWIKA/SANDBOX" data-field="question1">No question present</span><br />
        <span">Answer 1:</span>
        <span data-topic="/KWWIKA/SANDBOX" data-field="answer1">No answer present</span>

        <br /><br />

        <span>Question 2:</span>
        <span data-topic="/KWWIKA/SANDBOX" data-field="question2">No question present.</span><br />
        <span>Answer 2:</span>
        <span data-topic="/KWWIKA/SANDBOX" data-field="answer2">No answer present</span>
    </body>
</html>

See it in action

You can see this code in action here:

And you can push updates to the page via a <form> submit here: