Question

I’m trying to put a value stored in a database as the height of the div “levelbarotherteam”. The Id “levelotherteam” is just here to look if the data are received. That’s good for levelotherteam, it’s displayed a value every second but it’s not working for levelbarotherteam. In my database, I store a new data every second and I want to display it on the div “levelbarotherteam”.

The database looks like that :

Table : level

Id (as second): 1 2 3 4 5

height (as height): 203 235 124 245 245

Html :

<div> other: <span id="levelotherteam"></span> </div>
<div id="levelbarotherteam" style=" width:100%;margin:auto;" ></div>

Script:

window.setInterval(function() {
        $.ajax({
        url: 'recept.php',
        type: 'GET',
        dataType: 'html',
        cache: false,
        success: function(result) {

        $('#levelotherteam').html(result);      
        $('#levelbarotherteam').css("height", (result)+ "px");      

        }
    });
    }, 1000);

PHP :

<?php 
mysql_connect("localhost", "root", "root") or die(mysql_error()); 
mysql_select_db("cheer") or die(mysql_error());

 $data = mysql_query("SELECT height FROM level") 
 or die(mysql_error()); 
  $direct = mysql_fetch_array( $data ); 

 while($direct = mysql_fetch_array( $data )) 
 { 
 $direct['height'];
 $cheer = $direct['height'];
    echo "$cheer";
    echo "<br />";
 } 

 ?> 

CSS :

#levelbarteam{
    width:100%; 
    background-color:#faa040;
    opacity:0.5; 
    margin:auto;
    height:2px;
}

#levelbarotherteam{
    width:100%; 
    background-color:#49495d; 
    opacity:82%;
    margin:auto;
    height:2px;
    -moz-transition: height 0.2s ease-out;
    -webkit-transition: height 0.2s ease-out;
    -o-transition: height 0.2s ease-out;
    transition: height 0.2s ease-out;

}

Answer 1

Don’t echo out that <br> from PHP. Instead, add it in JavaScript:

    $('#levelotherteam').html(result + '<br>');      
    $('#levelbarotherteam').css("height", (result)+ "px");