Ajax reloading a PHP-Page that shows HTML-Canvas altered by Javascript not working

Question

so I have a Ajax-Scripts thats permanently reloads a PHP-Page:

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            loadstatus();
        });
        function loadstatus(){
            $.ajax("innopbx.monitor.php").done(function(data){
                document.getElementById("status").innerHTML = data;
                setTimeout('loadstatus()', 1000);
            });
        }
    </script>

And the PHP-Page being reloaded shows HTML-Canvas like this:

echo '<canvas id="' . $ui->guid . '" width="100" height="100" class="clear" style="border:1px dotted"></canvas> ';
echo '<script type="text/javascript">
  var a_canvas = document.getElementById("' . $ui->guid . '");
  var a_context = a_canvas.getContext("2d");
  var gradient = a_context.createLinearGradient(0, 0, 0, 100);
  gradient.addColorStop(0, "#bbffbb");
  gradient.addColorStop(1, "#55ff55");
  a_context.fillStyle = gradient;
  a_context.fillRect(2, 2, 96, 96);
  a_context.font = "10px sans-serif";
  a_context.fillStyle = "black";
  a_context.fillText("' . $ui->cn . '", 5, 20);
</script>';

When I navigate to the PHP-Page directly the Canvas is drawn exactly as expected. But when I navigate to the Page with the AJAX-Function that reloads the PHP-Page permanently I only see the dotted border. Its not filled and no Text is there.

Do you have any idea? Thanks in advance!

Answer 1

You can try to add document.getElementById("status") as target parameter of $.ajax .

var t = document.getElementById("status");
function loadStatus(){
   $.ajax({url: "innopbx.monitor.php", target: t, success: function(){
        setTimeout(loadstatus, 1000);
   });
}

It should deal with the js execution, rather than innerHTML = ... .