title: how to bind the updated value from the input element using jquery knob through pusher in laravel?
body: <p>I want to bind the updated value from tinker to the html element ..I am using <strong>PUSHER</strong> to do this in laravel..But I could n't do so .</p>
  <p>Here is my code</p>
  <pre><code>$(document).ready(function(){
   $.ajaxSetup({
       headers: {
            'X-CSRF-TOKEN': $('meta[name=&quot;csrf-token&quot;]').attr('content')
          }
      });
  
     $.get('/api/progress', function(response, status){
         console.log(response);
         var data = response.data;
         var progress = [];
         //knob code
          $(function($) {
  
              $(&quot;.knob&quot;).knob({
                   draw : function () {
  
                      // &quot;tron&quot; case
                      if(this.$.data('skin') == 'tron') {
  
                          this.cursorExt = 0.3;
  
                          var a = this.arc(this.cv)  // Arc
                                  , pa                   // Previous arc
                                  , r = 1;
  
                          this.g.lineWidth = this.lineWidth;
  
                          if (this.o.displayPrevious) {
                              pa = this.arc(this.v);
                              this.g.beginPath();
                              this.g.strokeStyle = this.pColor;
                              this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
                              this.g.stroke();
                          }
  
                          this.g.beginPath();
                          this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
                          this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
                          this.g.stroke();
  
                          this.g.lineWidth = 2;
                          this.g.beginPath();
                          this.g.strokeStyle = this.o.fgColor;
                          this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                          this.g.stroke();
  
                          return false;
                      }
                  }
              });
              });
  
         var target = document.getElementById(&quot;appContent&quot;);
              data.forEach((element) =&gt; {
                var container = document.createElement('div');
                    container.setAttribute(&quot;class&quot;, &quot;row&quot;);
                var column = document.createElement('div');
                    column.setAttribute(&quot;class&quot;, &quot;col-md-4&quot;);
                var myName = document.createElement('div');
                    myName.innerHTML = 'Progress_ID: ' + element.id;
                /*var myValue = document.createElement('div');
                    myValue.innerHTML = 'Progress_Value:' +element.value;
                    myValue.dataset.goal = element.goal;
                    myValue.id = element.id;*/
                  var myValue = document.createElement('input');
                      myValue.setAttribute(&quot;class&quot;, &quot;knob&quot;);
                      myValue.setAttribute(&quot;data-readOnly&quot;, &quot;true&quot;);
                      myValue.setAttribute(&quot;data-max&quot;, element.goal);
                      myValue.setAttribute(&quot;data-angleoffset&quot;, &quot;-125&quot;);
                      myValue.setAttribute(&quot;data-anglearc&quot;, &quot;250&quot;);
                      myValue.setAttribute(&quot;data-fgcolor&quot;, &quot;#0099ff&quot;);
                      myValue.setAttribute(&quot;value&quot;, element.value);
                      myValue.dataset.goal = element.goal;
                      myValue.id = element.id;
  
                container.appendChild(column);
                container.appendChild(myName);
                container.appendChild(myValue);
                target.appendChild(container);
  
       });
  })
  
     // Pusher
      var pusher = new Pusher('API_KEY', {
          cluster: 'ap3',
          encrypted: true
        });
     // Subscribe to the channel we specified in our Laravel Event
        var channel = pusher.subscribe('progress');
     // Binding a function to a Event
       channel.bind('App\\Events\\UpdatedValue', function(data){
       console.log(data);
       setTimeout(() =&gt;{
         var someUpdate = document.getElementById(data.id);
         someUpdate.innerHTML ='Progress_Value:'+ data.value ; '/' + someUpdate.dataset.goal;  // get goal from div
  }, 5000);
   });
  });
  </code></pre>
  <p><strong>html</strong>:</p>
  <pre><code>&lt;div id =&quot;appContent&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>When I trigger the event through <strong>tinker</strong> .</p>
  <pre><code>$record = Progress::find(4);
  $record-&gt;value = $record-&gt;value + 20
  $record-&gt;save();
  </code></pre>
  <p>The Value should be appended to the input with <strong>ID:4</strong> . But I could not do so..Could somebody please help me to solve this issue..
  Many thanks.</p>