Google Apps Script Web App AJAX, jQuery, JSON?

Question

I am trying to follow "Example 3: Web Response" on " https://learn.sparkfun.com/tutorials/electric-imp-breakout-hookup-guide/all#example-3-web-response "

I implemented the code on script.google.com but was unable to see the pin readings. Can someone please help me out! Here is the code

http://jsfiddle.net/8GdLw/44/

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

<script>
    $( function() {   
        // Edit these values first! The externalURL variable should be the
        // unique URL of your agent. e.g. the last part of:
        // https://agent.electricimp.com/UpyYpRLmBB7m
        // pollRate defines how often the values on your page will refresh.
        var externalURL ="8XpIqEEdiILG";
        var pollRate ="1000";

        function poll(){
            // Construct an ajax() GET request.
            // http://www.w3schools.com/jquery/ajax_ajax.asp

            $.ajax({
                type: "get",
                url: "https://agent.electricimp.com/"+externalURL,  // URL of our imp agent.
                dataType: "json",   // Expect JSON-formatted response from agent.
                success: function(agentMsg) {   // Function to run when request succeeds.

                    // jQuery find "pin1" id and overwrite its data with "pin1" key value in agentMsg
                    $("#pin1").html(agentMsg.pin1);             
                    $("#pin2").html(agentMsg.pin2);
                    $("#pin5").html(agentMsg.pin5);
                    $("#pin7").html(agentMsg.pin7);
                    $("#pin8").html(agentMsg.pin8);
                    $("#pin9").html(agentMsg.pin9);
                    $("#vin").html(agentMsg.voltage);

                    updateBG(agentMsg.pin5);    // Try this if you have a photocell connected to pin 5
                },
                error: function(err) {
                    console.log("err"+ err.status)
                }
            });
        }

        // setInterval is Javascript method to call a function at a specified interval.
        // http://www.w3schools.com/jsref/met_win_setinterval.asp
        setInterval(function(){ poll(); }, pollRate);

        // This function updates the 
        function updateBG(lightSensor)
        {
            if (lightSensor > 30000)
            {
                document.body.style.backgroundColor = "#FFFFFF";
            }
            else
            {
                document.body.style.backgroundColor = "#AAAAAA";
            }
        }
    });
</script>

        <h3>Imp Pins:</h3>
    <div id="pins">
    <p> <b>Pin 1:</b> <span id="pin1"><!-- This is where the pin 1 reading will go --></span></p>
    <p> <b>Pin 2:</b> <span id="pin2"><!-- This is where the pin 2 reading will go --></span></p>
    <p> <b>Pin 5:</b> <span id="pin5"><!-- This is where the pin 5 reading will go --></span></p>
    <p> <b>Pin 7:</b> <span id="pin7"><!-- This is where the pin 7 reading will go --></span></p>
    <p> <b>Pin 8:</b> <span id="pin8"><!-- This is where the pin 8 reading will go --></span></p>
    <p> <b>Pin 9:</b> <span id="pin9"><!-- This is where the pin 9 reading will go --></span></p>
    <p> <b>Voltage:</b> <span id="vin"><!-- This is where the voltage reading will go --></span></p>

that works on jfiddle

I would really appreciate some help here.

Thanks

Answer 1

It's because the scripts executed first when the elements did not exist.

The script tags should go AFTER the tags with pin IDs have been declared.

Something like (Inside the )

        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        $( function() {   
        // Edit these values first! The externalURL variable should be the
        // unique URL of your agent. e.g. the last part of:
        // https://agent.electricimp.com/UpyYpRLmBB7m
        // pollRate defines how often the values on your page will refresh.
        var externalURL ="8XpIqEEdiILG";
        var pollRate ="1000";

        function poll(){
            // Construct an ajax() GET request.
            // http://www.w3schools.com/jquery/ajax_ajax.asp

            $.ajax({
            type: "get",
            url: "https://agent.electricimp.com/"+externalURL,  // URL of our imp agent.
            dataType: "json",   // Expect JSON-formatted response from agent.
            success: function(agentMsg) {   // Function to run when request succeeds.

                // jQuery find "pin1" id and overwrite its data with "pin1" key value in agentMsg
                $("#pin1").html(agentMsg.pin1);             
                $("#pin2").html(agentMsg.pin2);
                $("#pin5").html(agentMsg.pin5);
                $("#pin7").html(agentMsg.pin7);
                $("#pin8").html(agentMsg.pin8);
                $("#pin9").html(agentMsg.pin9);
                $("#vin").html(agentMsg.voltage);

                updateBG(agentMsg.pin5);    // Try this if you have a photocell connected to pin 5
            },
            error: function(err) {
                console.log("err"+ err.status)
            }
            });
        }

        // setInterval is Javascript method to call a function at a specified interval.
        // http://www.w3schools.com/jsref/met_win_setinterval.asp
        setInterval(function(){ poll(); }, pollRate);

        // This function updates the 
        function updateBG(lightSensor)
        {
            if (lightSensor > 30000)
            {
            document.body.style.backgroundColor = "#FFFFFF";
            }
            else
            {
            document.body.style.backgroundColor = "#AAAAAA";
            }
        }
        });
    </script>

 <h3>Imp Pins:</h3>
<div id="pins">
<p> <b>Pin 1:</b> <span id="pin1"><!-- This is where the pin 1 reading will go --></span></p>
<p> <b>Pin 2:</b> <span id="pin2"><!-- This is where the pin 2 reading will go --></span></p>
<p> <b>Pin 5:</b> <span id="pin5"><!-- This is where the pin 5 reading will go --></span></p>
<p> <b>Pin 7:</b> <span id="pin7"><!-- This is where the pin 7 reading will go --></span></p>
<p> <b>Pin 8:</b> <span id="pin8"><!-- This is where the pin 8 reading will go --></span></p>
<p> <b>Pin 9:</b> <span id="pin9"><!-- This is where the pin 9 reading will go --></span></p>
<p> <b>Voltage:</b> <span id="vin"><!-- This is where the voltage reading will go --></span></p>

Answer 2

The problem was with the way you were setting up your web app. In the Google Apps Script Code.gs file, change your doGet() function:

function doGet() {
  return HtmlService
      .createHtmlOutputFromFile('Page1')
  }

The way you had it, it was expecting templated HTML.