Javascript 如何通过laravel中的pusher使用jquery旋钮绑定输入元素的更新值?
我想将tinker更新后的值绑定到html元素。我正在使用PUSHER在laravel中执行此操作。但是我不能这样做 这是我的密码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
$(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();