I found an example online that shows how to build a auto-suggest text field by using javascript and PHP. Originally I started out by building my on version of the example, but after many failed attempts in getting it to work, I decided to see if the example itself even worked. I copied and pasted the example, changing only the database connection and the information regarding the database table. To my surprise the example still doesn't work! In my database I have a a table called Device and in that table there are three columns, ID,Device_type, and Price. Right now I have one value in the table and it's Apple iPhone 6 in the Device_type column, so when the program is working correctly, it should start to auto suggest Apple iPhone 6 as soon as I type "A" into the text box. Unfortunately, that doesn't happen, a dropdown box appears, as it should, but the box is blank and doesn't show any suggestions.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>List Suggestion Example</title>
<style type="text/css">
<!--
div.suggestions {
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid black;
text-align: left;
}
-->
</style>
<script type="text/javascript">
var nameArray = null;
</script>
</head>
<body onclick="document.getElementById('divSuggestions').style.visibility='hidden'">
<?php
mysql_connect("hostname", "username", "password") OR DIE ('Unable to connect to database! Please try again later.');
mysql_select_db('DeviceRecycling');
$query = 'SELECT Device_type FROM Device';
$result = mysql_query($query);
$counter = 0;
echo("<script type='text/javascript'>");
echo("this.nameArray = new Array();");
if($result) {
while($row = mysql_fetch_array($result)) {
echo("this.nameArray[" . $counter . "] = '" . $row['Device_type'] . "';");
$counter += 1;
}
}
echo("</script>");
?>
<!-- --------------------- Input Box --------------------- -->
<table border="0" cellpadding="0" width="50%" align="center">
<tbody align="center">
<tr align="center">
<td align="left">
<input type="text" id="txtSearch" name="txtSearch" value="" style="width: 50%; margin-top: 150px; background-color: purple; color: white; height: 50px; padding-left: 10px; padding-right: 5px; font-size: larger;" onkeyup="doSuggestionBox(this.value);" />
<input type="button" value="Google It!" name="btnGoogleIt" style="margin-top: 150px; background-color: purple; color: white; height: 50px; font-size: larger;" onclick="window.location='http://www.google.com/#hl=en&source=hp&q=' + document.getElementById('txtSearch').value" />
</td>
</tr>
<tr align="center">
<td align="left">
<div class="suggestions" id="divSuggestions" style="visibility: hidden; width: 50%; margin-top: -1px; background-color: purple; color: white; height: 250px; padding-left: 10px; padding-right: 5px; font-size: larger;" >
</div>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function doSuggestionBox(text) { // function that takes the text box's inputted text as an argument
var input = text; // store inputed text as variable for later manipulation
// determine whether to display suggestion box or not
if (input == "") {
document.getElementById('divSuggestions').style.visibility = 'hidden'; // hides the suggestion box
} else {
document.getElementById('divSuggestions').style.visibility = 'visible'; // shows the suggestion box
doSuggestions(text);
}
}
function outClick() {
document.getElementById('divSuggestions').style.visibility = 'hidden';
}
function doSelection(text) {
var selection = text;
document.getElementById('divSuggestions').style.visibility = 'hidden'; // hides the suggestion box
document.getElementById("txtSearch").value = selection;
}
function changeBG(obj) {
element = document.getElementById(obj);
oldColor = element.style.backgroundColor;
if (oldColor == "purple" || oldColor == "") {
element.style.background = "white";
element.style.color = "purple";
element.style.cursor = "pointer";
} else {
element.style.background = "purple";
element.style.color = "white";
element.style.cursor = "default";
}
}
function doSuggestions(text) {
var input = text;
var inputLength = input.toString().length;
var code = "";
var counter = 0;
while(counter < this.nameArray.length) {
var x = this.nameArray[counter]; // avoids retyping this code a bunch of times
if(x.substr(0, inputLength).toLowerCase() == input.toLowerCase()) {
code += "<div id='" + x + "'onmouseover='changeBG(this.id);' onMouseOut='changeBG(this.id);' onclick='doSelection(this.innerHTML)'>" + x + "</div>";
}
counter += 1;
}
if(code == "") {
outClick();
}
document.getElementById('divSuggestions').innerHTML = code;
document.getElementById('divSuggestions').style.overflow='auto';
}
</script>
</body>
</html>
In my attempt to trouble shoot, I have discovered a few things. First off the connection string to the database is good, and that is not the problem. In an attempt to further check whether it was the database query that was causing issues, I have discovered that if I remove the echo("<script type='text/javascript'>") from the PHP portion of the code, that it will actually print Apple iPhone 6 at the top of the page, which tells me the query itself is actually working. Obviously though, by removing the javascript tag the program still doesn't work because it should only be displaying the results as you type something that matches what is in the database.
hi maybe you have a error on your code
this is a little example
for get the result and show
autocomplete.php
<?php
$connection = mysqli_connect("localhost","username","password","employee") or die("Error " . mysqli_error($connection));
//fetch department names from the department table
$sql = "select department_name from department";
$result = mysqli_query($connection, $sql) or die("Error " . mysqli_error($connection));
$dname_list = array();
while($row = mysqli_fetch_array($result))
{
$dname_list[] = $row['department_name'];
}
echo json_encode($dname_list);
?>
for view and show the result
demo.php
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Textbox Demo | PHP | jQuery</title>
<!-- load jquery ui css-->
<link href="path/to/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<!-- load jquery library -->
<script src="path/to/jquery-1.10.2.js"></script>
<!-- load jquery ui js file -->
<script src="path/to/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
var availableTags = <?php include('autocomplete.php'); ?>;
$("#department_name").autocomplete({
source: availableTags,
autoFocus:true
});
});
</script>
</head>
<body>
<label>Department Name</label></br>
<input id="department_name" type="text" size="50" />
</body>
</html>
i preffer use jquery
donwload jquery
enter link description here
result
Related
So, I am using the AJAX Live Search PDO
I changed the backend-search to link the displayed words. The problem is if you click on the table that it doesn't take them to the link, but just inputs the text. I want to be able to link the entire row... so if they do not just click on the searched word.
I read over the document very thoroughly and did not find the answer.
I think it either is on the JavaScript on line 62 of search-form.php, or one the backend-search.php
I added
<a href=\"" . $row["link"] . "\"> to the backend-search file.
search-form.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<style type="text/css">
body{
font-family: Arail, sans-serif;
}
/* Formatting search box */
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid #CCCCCC;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("backend-search.php", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
</head>
<body>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search country..." />
<div class="result"></div>
</div>
</body>
</html>
backend-search.php
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
try{
$pdo = new PDO("mysql:host=localhost;dbname=demo", "root", "");
// Set the PDO error mode to exception
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
die("ERROR: Could not connect. " . $e->getMessage());
}
// Attempt search query execution
try{
if(isset($_REQUEST["term"])){
// create prepared statement
$sql = "SELECT * FROM countries WHERE name LIKE :term";
$stmt = $pdo->prepare($sql);
$term = $_REQUEST["term"] . '%';
// bind parameters to statement
$stmt->bindParam(":term", $term);
// execute the prepared statement
$stmt->execute();
if($stmt->rowCount() > 0){
while($row = $stmt->fetch()){
echo "<p>" . $row["name"] . "</p>";
}
} else{
echo "<p>No matches found</p>";
}
}
} catch(PDOException $e){
die("ERROR: Could not able to execute $sql. " . $e->getMessage());
}
// Close statement
unset($stmt);
// Close connection
unset($pdo);
?>
I would like when a person clicks anywhere on the row of the results that it goes to the link. Currently they have to click on the hyperlink
you can do that by making the 'a' tag fullwidth(display:block) or cover the 'p' tag with 'a', that will make the whole row clickable.
Here it's a rough example of what you should do. Run the snippet below to check the results (the second link google is not working, it's due to stackoverflow, but if you use on your side, it will work)
$(document).on("click", ".result p", (event) => {
var url =$(event.target).find("a").prop("href"); // getting the clicked element with event target.
window.location = url;
})
p {
width: 100%;
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="result">
<p> stack</p>
<p> google</p>
</div>
I bind the event on the document for various reason. Yours links will be create with a script after the html (DOM) was loaded. Using document permit to bind the event "click" on all ".result p" element even if you add it in the dom after the loading of the page.
$(".result p").click(() => {
var url =$(this).find("a").prop("href");
window.location = url;
});
It will target the same element. But it will bind only to ".result p" element that already exist on your html. Note : with this way the clicked element is "this" and not "event.target", because in the previous event, "this" refers to "document".
I am trying to get the result from "headline" and "content" to show up one at a time and then fade in and out to the next result in a loop. Currently, it shows all the results at once and the fades in and out and then show all the results again. Any idea on how to get them to show one at a time TIA
<html>
<head>
<style>
#table1{/*table aspects and design */
border:1px solid #FFFFFF;
background:#FFFFFF;
display:none;
width: 60%;
margin-left: auto;
margin-right: auto;
}
th{/*align table headers*/
text-align:center;
}
td,th{
border:1px solid #FFFFFF;
text-align:center;
}
</style>
</head>
<table id="table1" cellpadding="5" cellspacing="1" width="50%">
<? if ($query=$pdo->prepare("SELECT * FROM `Announcements_Current`"))
{
/* select all information from the table and take it into the page */
$query->execute();
while ($result = $query->fetch(PDO::FETCH_ASSOC)){
$head = $result['headline'];/*puts result of headline from table into variable*/
$content = $result['content'];
/*puts result of content from table into variable*/
echo /* echo the table to display announcements*/'
<tr>
<th>
<h1>
'.$head.'
</h1>
</th>
</tr>
<tr>
<td>
<font size="4">
'.$content.'
</font>
</td>
</tr>';
}
}
?>
</table> <!--end of table-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
/* define script for jquery*/
for (var i = 0; i < 500; i++) {/* for loop to fade in and out the announcements*/
$(document).ready(function() {/*function to fade table in and out*/
$('#table1').fadeIn(2000);
$('#table1').delay(5000);
$('#table1').fadeOut(2000);
}
)};
</script>
You're going about this the wrong way.
This won't be a complete solution. I'll try to hopefully make you understand the logic behind doing this yourself.
Loop through the results but instead of echoing them immediately, save them in arrays:
<?php
$head[] = $result['headline'];
$content[] = $result['content'];
?>
After the loop, only echo the first results. Add some IDs to your <h1> and <td> while you're at it. You'll need them later.
Then pass the arrays to JavaScript:
<script type="text/javascript">
var head = '<?= json_encode($head); ?>';
var content = '<?= json_encode($content); ?>';
</script>
Now that you have the arrays in JS, you have to iterate through them and for each value, change the content of your <h1> and <td>:
for (var i = 0, len = head.length; i < len; i++)
{
document.getElementById("H1_element_ID").innerHTML = head[i];
document.getElementById("TD_element_ID").innerHTML = content[i];
}
You can probably throw your fadeIn(), delay() and fadeOut() in this loop, to achieve your desired result!
Finally, delete your for and put this one inside $(document).ready().
I created a table using JavaScript, but it doesn't render using my css. so how can I make it work? actually i need more help, my idea is to create a screen that has one button and once you click on it a menu which is a table of one column starting at the top of the screen and end at the end of the screen should be showing. the table would be scrollable and each row has text (url text) with no url line under the text, so when you click on it the page open in all of the screen behind the table and the button. the button should be always showing (but it disappears when i click on it).
the main.js file is
function makeTableHTML() {
var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");
var myArray = [ [ "Name, http://www.google.com" ],
[ "Name, http://www.google.com" ] ];
var result = '<table width = "300">';
for (var i = 0; i < myArray.length; i++) {
result += "<tr><td>";
if (i < 10) {
result += "0" + i + " ";
} else {
result += i + " ";
}
result += '<a href="' + myArray[i][0] + '">';
result += myArray[i][1] + "</a>";
result += "<td></tr>";
}
result += "</table>";
document.write(result);
document.getElementById("channelsmenu").classList.toggle(result);
}
function hideTableHTML() {
var x = document.getElementById('channelsmenu');
x.style.display = 'none';
}
and my html is
<!DOCTYPE html>
<html>
<head>
<title>5Star-IPTV</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/main.js"></script>
</head>
<body>
<div>
<table>
<tr>
<td>
<div id="channelsmenu" class="dropdown-content"></div>
</td>
<td class="buttons-col"><input type="image"
src="channels-menu.png" class="buttons" alt="channels menue"
onMouseOver="this.src='channels-menu-1.png'"
onMouseOut="this.src='channels-menu.png'" onclick="makeTableHTML()" /></td>
<td class="buttons-col"><input type="image"
src="return-button.png" alt="return button" class="buttons"
onMouseOver="this.src='return-button-1.png'"
onMouseOut="this.src='return-button.png'" onclick="hideTableHTML()" /></td>
</tr>
</table>
</div>
</body>
</html>
and this is the css
table {
width: 100%;
border: 1px solid black;
background-color: #808080;
}
tr {
width: 100%;
align: right;
}
th, td {
text-align: right;
} background-color: #808080;
}
.buttons-col {
text-align: center;
width: 90px;
padding-top: 5px;
}
in HTML you open "th" and close it as "tr". Secondly, please learn to write/format your code properly - it'll be easier to read your code and to help you.
Besides, use the < script > tag at the end of the HTML or run your JS in the function on event DOMContentLoaded
Searched, but wasn't able to find any similar problems or solutions.
I have some templated HTML which builds a form based on data from a spreadsheet, as I have a variable number of dropdowns and options in those dropdowns.
On click of submit I want to display a spinning gif to the user, so they know it is processing.
If the backend code in code.gs passes the input through all the tests I want to update a div with a success message, if any of the checks fail with an error message.
I've got this to work, before with the create .createHtmlOutputFromFile method, but now with .createTemplateFromFile it just wipes the whole page.
HTML template
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#container{
padding-left:10px;
font-family: 'Open Sans', Arial, sans-serif;
}
#header{
width: 75%;
margin: 0 auto;
text-align: center;
margin-bottom:10px;
}
form{
text-align: center;
margin-top:10px;
}
#nameField{
width:400px;
margin-bottom:10px;
}
#reqIndic{
color:#FF0000;
}
select{
margin-top: 5px;
width:150px;
}
#submit{
margin-top:20px;
width:125px;
height:40px;
}
#confirmation{
width: 30%;
margin: 0 auto;
min-height:60px;
border-radius: 5px;
}
#padding{
width: 30%;
margin: 0 auto;
min-height:60px;
border-radius: 5px;
}
</style>
<div id="container">
<div id="header">
<h2>Cheltenham Classic</h2>
</div>
<br>
<form name="projectsForm">
<span id="reqIndic">*</span>
<span> Name</span>
<input id="nameField" type="text" name="name" required>
<br>
<? for (var race in races) { ?>
<span><?= race ?></span>
<select>
<? for (var i = 0; i < races[race].length; i++) { ?>
<option value="<?= races[race][i] ?>"><?= races[race][i] ?></option>
<? } ?>
</select>
<br>
<? } ?>
<br>
<input id="submit" type="submit" value="Submit Form" onclick="google.script.run
.withSuccessHandler(updateDiv)
.onEvent(this.parentNode);spinner()">
</form>
</div>
<div id="confirmation" style ="text-align:center"></div>
<div id="padding" style ="text-align:center"></div>
<script type="text/javascript">
function updateDiv(returnValue){
alert('debug');
var div = document.getElementById('confirmation');
if(returnValue == false){
var errStr = '<p>ERROR: Please check your rankings for blank fields or multiple entries of the same project and re-submit your rankings</p>';
div.innerHTML = errStr;
}
else{
div.innerHTML = '<p>Success! Your results were submitted successfully</p>';
}
}
function spinner(){
var div = document.getElementById('confirmation');
div.innerHTML = '<img src="http://loadinggif.com/images/image-selection/32.gif">'
}
</script>
Back end code
I've cut the onEvent function right down to just returning an object with a key value pair without making any checks.
The updateDiv function runs and the alert shows then the entire page is wiped.
function doGet(){
var raceForm = HtmlService.createTemplateFromFile('RaceForm');
raceForm.races = getRaces();
return raceForm.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function onEvent(e){
return {'valid': true};
}
function getRaces(){
var url = //spreadsheet url
var wb = SpreadsheetApp.openByUrl(url);
var ws = wb.getSheetByName('Races Log');
var racesObj = {};
var wsValues = ws.getDataRange().getValues();
for(var i = 0; i <wsValues.length;i++){
var race = wsValues[i][0];
racesObj[race] = [];
racesObj[race].push('0');
for(var j = 1; j<wsValues[i].length;j++){
racesObj[race].push(wsValues[i][j]);
}
}
return racesObj;
}
Any help much appreciated.
If I hard code the racesObj object:
var racesObj = {one:["one","two"], two:["one", "two"], "races":["belmont", "kentucky"]};
The page looks like this: (Using the template)
If I click the submit button, I get this:
I am using JS-Graph.IT to create a flowchart diagram and want to upon selection of a dropdown option, load a div with an altered version of the flowchart. Prior to loading AJAX content, the flow diagram works and shows boxes with arrows pointing from one box to another. After loading AJAX content, the connectors can't seem to be generated.
I found here that it is because of the need to clear the canvas before using the same canvas ids. SourceForge I tried following the instructions and copied the delCanvas function to the JS file, and calling the delCanvas function and reinitializing page objects in the header of the HTML page as such:
<script type="text/javascript">
jQuery(document).ready(function() {
JSGraphIt.initPageObjects();
$("body").delegate("#button1", "click", function() {
delCanvas('#mainCanvas');
var button2 = $('#combo').val();
$.ajax({ // ajax call starts
url: 'serverside17.php', // JQuery loads serverside.php
data: 'button2=' + $('#combo').val(), // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
JSGraphIt.initPageObjects();
$('#mainCanvas').html(''); // Clear #content div
$('#mainCanvas').append(data);
}
});
});
});
</script>
Thanks in advance for your help!
HTML page:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script> <!-- Jquery for Slide Toggle -->
<script type="text/javascript" src="../js-graph-it.js"></script>
<link rel="stylesheet" type="text/css" href="../sf-homepage.css" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
}
</style>
<script type="text/javascript">
function onLoad()
{
JSGraphIt.initPageObjects();
}
jQuery(document).ready(function() {
$(".block").bind('click', $.proxy(function(event) {
var input = $(event.target).attr('id');
var lines = input.split('_');
var button = lines[0];
$.ajax({ // ajax call starts
url: 'srvrside.php', // JQuery loads serverside.php
data: 'button=' + button, // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
$('#content').html(''); // Clear #content div
$('#content').append(data);
}
});
return false; // keeps the page from not refreshing
}, this));
$("#button1").bind('click', $.proxy(function(event) {
var button2 = $('#combo').val();
$.ajax({ // ajax call starts
url: 'serverside15.php', // JQuery loads serverside.php
data: 'button2=' + $('#combo').val(), // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
$('#mainCanvas').html(''); // Clear #content div
$('#mainCanvas').append(data);
JSGraphIt.initPageObjects();
}
});
return false; // keeps the page from not refreshing
}, this));
});
</script>
</head>
<body onload="onLoad();">
<select id="combo">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input id="button1" type="button" value="Click!" />
<div id="mainCanvas" class="canvas" style="float: left; background: #F8F8F8; width: 100%; height: 60%; border-top: #ccc 1px solid !important; border-bottom: #ccc 1px solid !important; margin: 0 !important; border-left: 0; border-right: 0; padding: 0 !important;">
<?php
***database connection details***
while($row = mysqli_fetch_array($result))
{
echo '<div id="'.$row['id'].'_block" class="block" style="background: red;';
echo ' !important; left:'.$row['lft'].'px; top:'.$row['top'].'px; width: 100px;">';
echo '<span style="font-weight: bold; font-size: 8px;">'.$row['level'].'</span> ';
echo $row['name'];
echo '</div>';
}
// Creating connectors
$result = mysqli_query($con,"SELECT * FROM dependencies");
while($row = mysqli_fetch_array($result))
{
echo '<div class="connector '.$row['app1id'].'_block '.$row['app2id'].'_block ';
if ($row['down_arrow'] == 1) {
echo 'down_start">';
}
else {
echo 'right_start">';
}
echo '<img class="connector-end" src="arrow.gif">';
echo '<label class="middle-label">'.$row['desc'].'</label>';
echo '</div>';
}
// Closing database connection
mysqli_close($con);
?>
</div>
</body>
</html>
Server side PHP:
<?php
// Get value of clicked button
$button = $_GET['button2'];
$all = '';
***Database connection***
while($row = mysqli_fetch_array($result))
{
$all .= '<div id="'.$row['id'].'_block" class="block" style="border: 3px solid #000; background: red;';
$all .= 'left:'.$row['lft'].'px; top:'.$row['top'].'px; width: 100px;">';
$all .= '<span style="font-weight: bold; font-size: 8px;">'.$row['level'].'</span> ';
$all .= $row['name'];
$all .= '</div>';
}
***database connection***
while($row = mysqli_fetch_array($result))
{
$all .= '<div class="connector '.$row['app1id'].'_block '.$row['app2id'].'_block ';
if ($row['down_arrow'] == 1) {
$all .= 'down_start">';
}
else {
$all .= 'right_start">';
}
$all .= '<img class="connector-end" src="arrow.gif">';
$all .= '<label class="middle-label">'.$row['desc'].'</label>';
$all .= '</div>';
}
// Closing database connection
mysqli_close($con);
print json_encode($all);
?>
JS-Graph.IT JS