Javascript 如何通过laravel中的pusher使用jquery旋钮绑定输入元素的更新值?

Javascript 如何通过laravel中的pusher使用jquery旋钮绑定输入元素的更新值?,javascript,php,laravel,jquery-knob,Javascript,Php,Laravel,Jquery Knob,我想将tinker更新后的值绑定到html元素。我正在使用PUSHER在laravel中执行此操作。但是我不能这样做 这是我的密码 $(document).ready(function(){ $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $.get('/api/progress

我想将tinker更新后的值绑定到html元素。我正在使用PUSHER在laravel中执行此操作。但是我不能这样做

这是我的密码

$(document).ready(function(){
 $.ajaxSetup({
     headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

   $.get('/api/progress', function(response, status){
       console.log(response);
       var data = response.data;
       var progress = [];
       //knob code
        $(function($) {

            $(".knob").knob({
                 draw : function () {

                    // "tron" 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("appContent");
            data.forEach((element) => {
              var container = document.createElement('div');
                  container.setAttribute("class", "row");
              var column = document.createElement('div');
                  column.setAttribute("class", "col-md-4");
              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("class", "knob");
                    myValue.setAttribute("data-readOnly", "true");
                    myValue.setAttribute("data-max", element.goal);
                    myValue.setAttribute("data-angleoffset", "-125");
                    myValue.setAttribute("data-anglearc", "250");
                    myValue.setAttribute("data-fgcolor", "#0099ff");
                    myValue.setAttribute("value", 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(() =>{
       var someUpdate = document.getElementById(data.id);
       someUpdate.innerHTML ='Progress_Value:'+ data.value ; '/' + someUpdate.dataset.goal;  // get goal from div
}, 5000);
 });
});
html

<div id ="appContent"></div>
该值应附加到ID为4的输入中。但是我做不到有人能帮我解决这个问题吗。。 非常感谢

$record = Progress::find(4);
$record->value = $record->value + 20
$record->save();