Page 1 of 1

Mixing Php and Javascript to add data in div

Posted: 11 Apr 2017, 20:31
by 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();
?>

Mixing Php and Javascript to add data in div

Posted: 12 Apr 2017, 08:25
by Admin
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;

Mixing Php and Javascript to add data in div

Posted: 12 Apr 2017, 12:16
by mlucicom
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>

Mixing Php and Javascript to add data in div

Posted: 12 Apr 2017, 14:28
by Admin
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.

Mixing Php and Javascript to add data in div

Posted: 12 Apr 2017, 19:22
by mlucicom
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 ?

Mixing Php and Javascript to add data in div

Posted: 13 Apr 2017, 06:31
by Admin
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.

Re: Mixing Php and Javascript to add data in div

Posted: 16 Apr 2017, 08:23
by mlucicom
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>';

Mixing Php and Javascript to add data in div

Posted: 16 Apr 2017, 15:03
by Admin
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.