Mixing Php and Javascript to add data in div

mlucicom
Posts: 32

Mixing Php and Javascript to add data in div

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(); ?>

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;

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>

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.

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 ?

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.

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>';

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.

Similar Topics