How do I dynamically update the bootstrap execution line with data from my PHP script?

Question

There is a progress bar on my webpage

 <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
  </div>
</div>    

My php script is

<?php
function get_memory() {
    foreach(file('/proc/meminfo') as $ri)
        $m[strtok($ri, ':')] = strtok('');
    return 100 - round(($m['MemFree'] + $m['Buffers'] + $m['Cached']) / $m['MemTotal'] * 100);
}
echo "".get_memory()."";
?>

When the php function is called, a numeric value is called, which is updated.

Essentially, what I want to do is

<?php echo "".get_memory()."";?>

in style = "width: 70%" of the progress bar, so the progress bar will be dynamically updated using the value reported from the php function.

Hope this makes sense.

I tried

<script>
    setInterval(function(){
        jQuery.ajax({
            url: "ramUsage.php",
            success: function(result) {
                $('.progress-bar').css("width", data + '%');
            },
        });
    }, 1000);
</script>

It gives me

ReferenceError: data is not defined

Isn't it better to use websockets instead of AJAX? If so, how do I do this?

Answer 1

Instead of <

 $('.progress-bar').css("width", data + '%');

You should use

$('.progress-bar').css("width", result + '%');

or

$('.progress-bar').css("width", result.responseText + '%');