0

For my smarthome-visualisation I will use a knob for changing the heating temperature.

Further I am using the following function to refresh the DIV, where the knob is in. After the refresh there is no knob, only the input field

What do I have to change, that knob will be also displayed after refresh?

I don't know how to fix it. Maybe the refresh(setInterval) needs to be included in the knob function, but I find no working way yet.

Knob before div was refreshed

Knob after div was refreshed

Function for refresh every second:

$(document).ready(
  function() {
    setInterval(function() {
      $("#schalter").load(" #schalter > *");
    }, 1000); //Delay here =  seconds
  });

$(".knobID").knob({
  'release': function(sendpostresp) {
    $.ajax({
      url: "publish.php",
      type: "POST",
      data: {
        foo: sendpostresp,
        test: '123'

      },
      success: function(result) {
        alert(result);
      }
    });
  }
});

<div class="schalter" id="schalter">
  <input type="text" data-angleoffset=-125 data-anglearc=250 data-fgcolor="#66EE66" value="22" class="knobID" data-step=".5" data-min="0" data-max="30">
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
sebahier
  • 1
  • 1
  • I tried to format your code. It is not a PHP question. What is `.knob()`? – mplungjan Feb 14 '23 at 22:07
  • knob is a jquery-plugin -> https://github.com/aterrien/jQuery-Knob ... The PHP-Code only sets Ids etc from a mysql-query. You can ignore or set anything else instead – sebahier Feb 14 '23 at 22:14
  • `$("#schalter").load(" #schalter > *");` completely replaces your existing HTML, which (at a guess) includes the initialised `knob` - ie your knob is removed and replaced by the new HTML; the input. You need to re-initialise after adding new html. – freedomn-m Feb 15 '23 at 09:18

1 Answers1

0

The issue is most likely related to how the Knob plugin is initialized and rendered. When using setInterval() to refresh the div, the plugin's initialization code may not be executed correctly, which could cause the Knob to not be shown.

To solve this issue, one possible solution is to reinitialize the Knob plugin every time the div is refreshed.

function refreshDiv() {
  $.ajax({
    url: '/some/url',
    success: function(data) {
      $('#myDiv').html(data);
      $('#myKnob').knob(); // reinitialize the Knob plugin
    }
  });
}

setInterval(refreshDiv, 1000);
Optimus
  • 2,200
  • 8
  • 37
  • 71