embed-with-observe-and-set.html

---
layout: default
title: Observing and setting a property
---
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://lab.dev.concord.org/vendor/iframe-phone/iframe-phone.js"></script>
<p>
  Demonstrates embedding
  <a href="http://lab.concord.org/version/0.5.12/interactives.html#interactives/sam/diffusion/2-temperature.json">Diffusion &amp; Temperature</a>
  Interactive and receiving a callback when the selectedTemperature changes, and setting the selectedTemperature from the outside.
</p>
<iframe id="interactive-iframe" width="724px" height="439px"
        frameborder="no" scrolling="no" allowfullscreen="true"
        webkitallowfullscreen="true" mozallowfullscreen="true"
        src="http://lab.concord.org/embeddable.html#interactives/sam/diffusion/2-temperature.json">
</iframe>
<div>
  Value of selectedTemperature:<span id="selected-temperature">unknown</span>
  <a id="set-temperature-0">Set the temperature to Low</a>
</div>

<script>
  // call this function when jQuery thinks the page is ready 
  $(function(){
    // Intitialization
    var interactive = new iframePhone.ParentEndpoint($('#interactive-iframe')[0]);

    interactive.addListener('propertyValue', function(result){
      if(result.name == 'selectedTemperature') {
        $('#selected-temperature').html("" + result.value);
      }
    });

    interactive.addListener('modelLoaded', function() {
      // tell the interactive we want to observe the selectedTemperature property
      interactive.post('observe', 'selectedTemperature');
    });

    // add a listener to the set-temperature-0
    $('#set-temperature-0').click(function(){
      interactive.post('set', {name: 'selectedTemperature', value: '0'});
    })
  });
</script>