Kik is not enabled on Kik site

Question

I recently wanted to test kik site development. I forked and cloned the kik starter-kit repository. I followed the setup, and wrote this simple script (the script runs fine without the if statement):

if (kik.enabled) {
    var div = document.getElementById("main_button");
    div.innerHTML = "KIK IS ENABLED!"
}

This is supposed to change the text of the main button on the webpage to "KIK IS ENABLED!" if the site is running through the kik app. I start the debug server on my local network using

npm start

I start kik on my phone, go to the browser and connect to the server. It connects fine and the webpage shows up, only problem is that the text of the button hasn't changed, suggesting that kik is not enabled even though I ran it through the kik app.

I have no idea what's causing this. Does the website need to be running on a online webserver for kik to be enabled?

Here's the code that should be relevant:

index.html

<!DOCTYPE html>
<html manifest="manifest.appcache">
    <head>
        <!-- App info -->
        <title>Starter Kit</title>
        <meta charset="utf-8">
        <meta name="description" content="My amazing app!">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="kik-transparent-statusbar" content="black">
        <meta name="kik-hide-form-helpers" content="true">
        <link rel="kik-icon" href="/img/icon.png">

        <!-- Styles -->
        <link rel="stylesheet" href="//cdn.kik.com/app/3.0.1/app.min.css">
        <link rel="stylesheet" href="/css/styles.css">
        <link rel="stylesheet" href="/css/home.css">
        <link rel="stylesheet" href="/css/page2.css">
    </head>

    <body>
        <!-- Pages -->

        <div class="app-page home-page" data-page="home">
            <div class="app-topbar red">
                <div class="app-title">Home page</div>
            </div>
            <div class="app-content">
                <div class="app-section">
                    <div id="main_button" class="app-button" data-target="page2">Go to Page 2</div>
                </div>
            </div>
        </div>

        <div class="app-page page2-page" data-page="page2">
            <div class="app-topbar red">
                <div class="app-button left" data-back data-autotitle></div>
                <div class="app-title">Page 2</div>
            </div>
            <div class="app-content">
                Page 2 is lonely
            </div>
        </div>

        <!-- Scripts -->
        <script src="/zerver/API.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.3/zepto.min.js"></script>
        <script src="//cdn.kik.com/kik/1.0.22/kik.js"></script>
        <script src="//cdn.kik.com/app/3.0.1/app.min.js"></script>
        <script src="/controller/home.js"></script>
        <script src="/controller/page2.js"></script>
        <script src="/main.js"></script>
    </body>
</html>

home.js

if (kik.enabled) {
    var div = document.getElementById("main_button");
    div.innerHTML = "KIK IS ENABLED!"
}

Do you have your code available somewhere? Sounds like there might be an issue there — jairajs89, Feb 17 '15 at 21:28
Yeah, sure. I added the source code that I think should be relevant to the original question. — Dramentiaras, Feb 17 '15 at 22:32
Is the home.js stuff in an App.controller? That could be the issue — jairajs89, Feb 18 '15 at 16:16

score 1 · Answer 1 · answered Apr 13 '15 at 13:27

This: document.getElementById("main_button")

Should be: page.querySelector("#main_button")

App.js uses the HTML pages in the document as templates when it creates new pages for the user to navigate to. The controller in home.js is supposed to be a self-sufficient way to setup and run the page.

So the query that needs to happen is: page.querySelector("#main_button"). This is because the page element may not be attached to the DOM yet so document.querySelector won't be able to find it.

score 0 · Answer 2 · answered Mar 08 '15 at 15:18

Is this still an issue?

I don't know if home.js is doing anything else, but I would recommend trying to put it in some ready closure. Either JQuery's $(function(){}), or kik.ready

Example:

home.js

kik.ready(function() {

    if (kik.enabled) {
        var div = document.getElementById("main_button");
        div.innerHTML = "KIK IS ENABLED!"
    }

}

Kik is not enabled on Kik site

2 Answers2