Search code examples
javascripthttprequesttizentizen-wearable-sdktizen-web-app

Tizen Javascript function undefined: Uncaught ReferenceError: checkToggle is not defined

I'm trying to do a simple http request to my server in a tizen web application for gear s2.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>Wearable UI</title>
    <link rel="stylesheet"  href="../../lib/tau/wearable/theme/default/tau.min.css">
    <link rel="stylesheet"  href="../../css/style.css">        
    <!--<script type="text/javascript" src="toggle.js"></script>-->
    <script type="text/javascript" >
function checkToggle(name){
    //make box2 = box1 when checked              
           var checkbox = document.getElementById(name);
           if (checkbox.checked == 1){
               HTTPReq('http://secret.nl/WebServer/edit.php?name='+name+'&value=1');
              console.log("set "+name+" ON");
           }else{
               HTTPReq('http://secret.nl/WebServer/edit.php?name='+name+'&value=0');
               console.log("set "+name+" OFF");
           }
}    
function HTTPReq(theUrl){
    console.log('httpReq');
    var client = new XMLHttpRequest();
    client.open('GET', theUrl);
    client.send();
    }        
</script>
</head>
<body>
    <div class="ui-page" data-enable-page-scroll="false">
        <div class="ui-content">
            <div class="ui-switch">
                <div class="ui-switch-text">
                Led001
                </div>
                <div class="ui-toggleswitch ui-toggleswitch-large">
                        <input type="checkbox" class="ui-switch-input" id="Led001" onclick="checkToggle('Led001')">
                    <div class="ui-switch-button"></div>
                </div>
                <div class="ui-switch-sub-text">
                    Bedroom Light
                </div>
            </div>
        </div>
        <script src="controls.js"></script>
    </div>
</body>
<script type="text/javascript" src="../../lib/tau/wearable/js/tau.min.js"></script>

</html>

When i emulate this i get the error: Uncaught ReferenceError: checkToggle is not defined. How ever when i save the same file when i'm in web emulator mode and live editing. the code works....? Can anyone explain this and tell me how to fix this. Thanks

Solution

  • I'm not 100% sure how i fixed it but here is the code that works:

    ( function () {

    var led001Button = document.getElementById("Led001"),
        led002Button = document.getElementById("Led002");   

    function httpReq(theUrl){
        var xmlhttp = null;
        xmlhttp = new XMLHttpRequest();
//      xmlhttp.onreadystatechange = function(){
//      if (xmlhttp.readyState == xmlhttp.DONE){
//      alert(xmlhttp.responseText);
//      }
//      else{
//      alert(xmlhttp.statusText);
//      }
//      };
//      xmlhttp.onerror = function(e){
//      alert("onerror: " + xmlhttp.statusText);
//      };
        xmlhttp.open("GET", theUrl);
        xmlhttp.send();
    }

    function checkToggle(name){
            //make box2 = box1 when checked              
               var checkbox = document.getElementById(name);
               if (checkbox.checked === true){
                   httpReq('http://secret.nl/WebServer/edit.php?name='+name+'&value=1');
//                console.log("set "+name+" ON");
               }else{
                   httpReq('http://secret.nl/WebServer/edit.php?name='+name+'&value=0');
//                 console.log("set "+name+" OFF");
               }
    }           
    if (led001Button) {
        led001Button.addEventListener("change", function(){
               checkToggle("Led001");
        });
    }
    if (led002Button) {
        console.log('test');
        led002Button.addEventListener("change", function(){
               checkToggle("Led002");
        });
    }
} () );

    Thanks for all the replies they have all helped in some way.