Mixing Php and Javascript to add data in div

[mlucicom]

After a mysql select i want to add data to a div content, but script don't work..can you look above this and give me a suggestion?

Code: Select all

<?php

 require('layout.php');
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT  `location`.`id` , `location`.`location` , `location`.`customer` , `area`.`id` ,  GROUP_CONCAT(area.id ORDER BY area.id SEPARATOR ', ')
 FROM `location` , `area`
where `location`.`id`= `area`.`id_principal`
GROUP BY `location`.`location` ";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
      $var = $row["GROUP_CONCAT(area.id ORDER BY area.id SEPARATOR ', ')"];
      $location = $row['location'];
      $each=explode(', ',$var);
       echo '<div class="col-md-3">
          <div class="box box-warning">
            <div class="box-header with-border">
              <h3 class="box-title">'.$location.'</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body" id="content">
              The body of the box
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>';

foreach($each as $v){
$q=$conn->query("SELECT  `area`.`id` AS `area_id22`  , `area`.`area` , `area`.`id_principal` ,  `area_description`.`id`  , `area_description`.`description` , `area_description`.`id_area`,GROUP_CONCAT(area_images.patch ORDER BY area_images.patch SEPARATOR ', ') FROM  `area` , `area_description`, `area_images` WHERE  `area`.`id` ='" . $v. "' AND `area_description`.`id_area` = `area`.`id` AND `area_images`.`id_area` =  `area`.`id` GROUP BY `area`.`area`   " );

           foreach($q as $cat){
            $area_id = $cat['area_id22'];
            $area = $cat['area'];
$descriere = $cat['description'];
 echo '
      <script> var theDiv = document.getElementById("content");
theDiv.innerHTML += "  <ul>area: '.$area.'</ul>
      <ul>description '.$descriere.'</ul>"; </script>
      ';
    }
}
}
}
 else {
    echo "0 results";
}
$conn->close();
?>

The javascript code is not executed in php. The JS code is executed in browser, when the page is loaded.
Sugestion:
- Don't mix javascript with php to run JS instructions in php code; it not works.

For what you want to get in that code, try to store the content into a variabile, then, at the end add it in the Div. Something like this:

Code: Select all

$content ='';
foreach(...){
  $content .='<ul>area: '.$area.'</ul>
<ul>description '.$descriere.'</ul>';
}
$content ='<div class="box-body" id="content">'. $content .'</div>';

//after all data are stored in variabiles, apply echo
echo $content;

i can't to use this because i need to display this results in different div.For example for "area1" i need to dispay this in div with id="area1".

have you any ideea why don't work this?

Code: Select all

         <script type="text/javascript"> var theDiv = document.getElementById("content4");
theDiv.innerHTML += "  <ul>area: Cluj Napoca</ul>
      <ul>description Aici este situat datacentrul MXHOST</ul>"; </script>

Maybe the html element with id="content4" is not in the html code before the javascript that uses it, or other JS errors.
Look in browser console (F12) to see if there are javascript errors.

i found the problem..is a error with commas in javascript interpretation
for example this code work good

Code: Select all

     foreach($q as $cat){
            $area_id = $cat['area_id22'];
            $area = $cat['area'];
$descriere = $cat['description'];


 echo '
     
         <script type="text/javascript"> var theDiv = document.getElementById("content'.$id22.'");
theDiv.innerHTML += "<h3>continut adaugat dinamic</h3>"; </script>
      ';

but this code don't work

Code: Select all

 echo '
     
         <script type="text/javascript"> var theDiv = document.getElementById("content'.$id22.'");
theDiv.innerHTML += "  <ul>area: "' . $area . '"</ul>
      <ul>description "' . $descriere . '"</ul>"; </script>

you know how can i fix this ?

Try this code:

Code: Select all

echo '<script type="text/javascript">
var theDiv = document.getElementById("content'.$id22.'");
theDiv.innerHTML +="<ul>area: '. str_replace('"', '\"', $area) .'</ul>\
<ul>description '. str_replace('"', '\"', $descriere) .'</ul>";
</script>';

- In javascript string, the new line must be escaped with "\", or put all the string content in a single line.

thanks..work good
i tried to modify the code with this but i think that i make mistakes..have you any ideea why don't work

Code: Select all

   echo '     <script type="text/javascript">
var theDiv = document.getElementById("content'.$id22.'");
      theDiv.innerHTML +="<button data-toggle="collapse" data-target="#'. str_replace('"', '\"', $id_p) .'/">Collapsible</button>

<div id="'. str_replace('"', '\"', $id_p) .'\" class="collapse">
'. str_replace('"', '\"', $descriere) .'\
</div>"; </script>';

That code not works because there are many double quotes inside string delimited with double-quotes in JS, and new lines in javascript string.
Pay more attention to string with quotes inside quotes.
Try this code:

Code: Select all

echo '<script type="text/javascript">
var theDiv = document.getElementById("content'.$id22.'");

//Here we escape single quotes in php string, to have double-quotes inside string with single-quotes in JS
theDiv.innerHTML +=\'<button data-toggle="collapse" data-target="#'. str_replace('"', '\"', $id_p) .'/">Collapsible</button><div id="'. str_replace('"', '\"', $id_p) .'" class="collapse">'. str_replace('"', '\"', $descriere) .'</div>\';
</script>';

- If you have similar problems, check de browser console for js errors, also see the resulted javascript code in html source page (Ctrl+U); then you'll understand where the problem is and how to fix it.