First, sorry for the bad english but is not my native language.
The problem is that when i fill the fields for update a data, this can update on table or interface, but in mysql doesn't.
Furthermore, i have trouble with the color data type because this type can't pass like color, only pass like text type.
So, can you help me? Thanks.
I try to explain this for understand better the problem:
This is the list of elements originals
Next, when i try to update:
This is the camps that i want to update
Finally, update but only on table not mysql:
Last step
Note: I know that the color give a text and not a color, but i can't found on the documentation how get a value like color type. help again?.
Now the code:
The first is a html archive that i need call always because have all the dependencies.
The name of the archive is : estandar.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
This is the code interface of update data:
The name of the archive is: editar_linea.php
Note: coneccion.php is a archive that have the connection to database for select the data and display on a table.
<?php
include('estandar.html');
include('coneccion.php');
session_start();
if ($_SESSION['correcto']==1){
$contador = 0;
?>
<!doctype html>
<html lang="en">
<head>
<title>Editar linea TransValparaiso</title>
</head>
<body class="bg-light">
<nav class="navbar navbar-light sticky-top flex-md-nowrap p-0" style="background-color: #F38E0E">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="transvalparaiso_ingreso_administrador_general2.php">Transporte<br>Metropolitano<br>Valparaiso</a>
</nav>
<div class="container-fluid">
<div class="row">
<?php
//------------------------------------------------------------------BARRA DE OPCIONES--------------------------------------------------------------------------
include('barra_opciones_transvalparaiso.php');
//---------------------------------------------------------Editar LINEA-------------------------------------------------------------------------------
?>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<h2>Seleccione la línea que desea editar</h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th><nav class="navbar sticky top navbar-expand-sm navbar-light">Nombre Linea</nav></th>
<th><nav class="navbar sticky top navbar-expand-sm navbar-light">Rut Linea</nav></th>
<th><nav class="navbar sticky top navbar-expand-sm navbar-light">Color Principal</nav></th>
<th><nav class="navbar sticky top navbar-expand-sm navbar-light">Color Secundario</nav></th>
<th><nav class="navbar sticky top navbar-expand-sm navbar-light">Acción</nav></th>
</tr>
</thead>
<tbody>
<?php
$sql="SELECT * FROM `linea` WHERE 1";
$resultado=mysqli_query($conn, $sql);
while($row=mysqli_fetch_array($resultado)){
$contador=$contador+1;
?>
<tr id ="<?php echo $row['id_linea']; ?>">
<td data-target = "nombre_linea"><?php echo $row['nombre_linea']; ?></td>
<td data-target = "rut_linea"><?php echo $row['rut_linea']; ?></td>
<td data-target = "color_principal_linea"><nav class="navbar sticky top navbar-expand-sm navbar-light" style="background-color:<?php echo $row['color_principal_linea']; ?>;"</nav></td>
<td data-target = "color_secundario_linea"><nav class="navbar sticky top navbar-expand-sm navbar-light" style="background-color:<?php echo $row['color_secundario_linea']; ?>;"</nav></td>
<td>Update</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Actualizar</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Nombre Linea</label>
<input type="text" id="nombre_linea" name ="nombre_linea" class="form-control">
</div>
<div class="form-group">
<label>Rut linea</label>
<input type="number" id="rut_linea" name = "rut_linea" class="form-control">
</div>
<div class="form-group">
<label>Color Principal</label>
<input type="color" id="color_principal1_linea" name = "color_principal1_linea" class="form-control">
</div>
<div class="form-group">
<label>Color Secundario</label>
<input type="color" id="color_secundario2_linea" name = color_secundario2_linea class="form-control">
</div>
<input type="hidden" id="userId" class="form-control">
</div>
<div class="modal-footer">
Update
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(document).on('click','a[data-role=update]', function(){
var id = $(this).data('id');
var nombre_linea = $('#'+id).children('td[data-target=nombre_linea]').text();
var rut_linea = parseInt($('#'+id).children('td[data-target=rut_linea]').text());
var color_principal_linea = $('#'+id).children('td[data-target=color_principal_linea]').html();
var color_secundario_linea = $('#'+id).children('td[data-target=color_secundario_linea]').html();
$('#nombre_linea').val(nombre_linea);
$('#rut_linea').val(rut_linea);
$('#color_principal1_linea').val(color_principal_linea);
$('#color_secundario2_linea').val(color_secundario_linea);
$('#userId').val(id);
$('#myModal').modal('toggle');
});
$('#save').click(function(){
var id = $('#userId').val();
var nombre_linea = $('#nombre_linea').val();
var rut_linea = $('#rut_linea').val();
var color_principal_linea = $('#color_principal1_linea').val();
var color_secundario_linea = $('#color_secundario2_linea').val();
$.ajax({
url : 'connection.php',
type : 'POST',
data : {nombre_linea : nombre_linea , rut_linea: rut_linea , color_principal_linea : color_principal_linea , color_secundario_linea : color_secundario_linea , id: id},
success : function(response){
$('#'+id).children('td[data-target=nombre_linea]').text(nombre_linea);
parseInt($('#'+id).children('td[data-target=rut_linea]').text(rut_linea));
$('#'+id).children('td[data-target=color_principal_linea]').text(color_principal_linea);
$('#'+id).children('td[data-target=color_secundario_linea]').text(color_secundario_linea);
$('#myModal').modal('toggle');
}
});
});
});
</script>
</html>
<?php
}
?>
This is coneccion.php:
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$db = "transvalparaiso";
$conn = mysqli_connect($dbhost, $dbuser, $dbpass,$db);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}else {
//echo "conecto correctamente";
}
?>
And the last code is for update on mysqli:
The name is: connection.php
<?php
$connection = mysqli_connect('localhost' , 'root' ,'' ,'transvalparaiso');
if(isset($_POST['id'])){
$nombre_linea = $_POST['nombre_linea'];
$rut_linea = $_POST['rut_linea'];
$color_principal_linea = $_POST['color_principal_linea'];
$color_secundario_linea = $_POST['color_secundario_linea'];
$id_linea = $_POST['id'];
$result = mysqli_query($connection , "UPDATE linea SET nombre_linea='$nombre_linea' , color_principal_linea = '$color_principal_linea' , color_secundario_linea = '$color_secundario_linea' , rut_linea='$rut_linea' WHERE id='$id_linea'");
if($result){
echo 'data updated';
}
}
?>
I follow this example for the code:
Example for implement modal
The problems you are facing when updating the colors are because of two things:
You are targeting the wrong selector when retrieving the colors. There's a nav element that holds the color property.
The color you get from the nav is in rgb, while input[type=color] seems to expect a hex value.
$(document).ready(function() {
var hexDigits = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
//Function to convert rgb color to hex format
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
function hex(x) {
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
$(document).on('click', 'a[data-role=update]', function() {
var id = $(this).data('id');
var color_principal_linea = $('#' + id).children('td[data-target="color_principal_linea"]').children('nav').css('background-color');
var color_secundario_linea = $('#' + id).children('td[data-target="color_secundario_linea"]').children('nav').css('background-color')
$('#color_principal1_linea').val(rgb2hex(color_principal_linea));
$('#color_secundario2_linea').val(rgb2hex(color_secundario_linea));
$('#userId').val(id);
$('#myModal').modal('toggle');
});
$('#save').click(function() {
var id = $('#userId').val();
var color_principal_linea = $('#color_principal1_linea').val();
var color_secundario_linea = $('#color_secundario2_linea').val();
$('#' + id).find('td[data-target="color_principal_linea"] nav').css('background-color', color_principal_linea);
$('#' + id).find('td[data-target="color_secundario_linea"] nav').css('background-color', color_secundario_linea);
$('#myModal').modal('toggle');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<h2>Seleccione la línea que desea editar</h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>
<nav class="navbar sticky top navbar-expand-sm navbar-light">Color Principal</nav>
</th>
<th>
<nav class="navbar sticky top navbar-expand-sm navbar-light">Color Secundario</nav>
</th>
<th>
<nav class="navbar sticky top navbar-expand-sm navbar-light">Acción</nav>
</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td data-target="color_principal_linea">
<nav class="navbar sticky top navbar-expand-sm navbar-light" style="background-color:#000fff" </nav>
</td>
<td data-target="color_secundario_linea">
<nav class="navbar sticky top navbar-expand-sm navbar-light" style="background-color:#aaaa00" </nav>
</td>
<td>Update</td>
</tr>
<tr id="2">
<td data-target="color_principal_linea">
<nav class="navbar sticky top navbar-expand-sm navbar-light" style="background-color: #a00fff;" </nav>
</td>
<td data-target="color_secundario_linea">
<nav class="navbar sticky top navbar-expand-sm navbar-light" style="background-color: #aafa00" </nav>
</td>
<td>Update</td>
</tr>
</tbody>
</table>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Actualizar</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Color Principal</label>
<input type="color" id="color_principal1_linea" name="color_principal1_linea" class="form-control">
</div>
<div class="form-group">
<label>Color Secundario</label>
<input type="color" id="color_secundario2_linea" name="color_secundario2_linea" class="form-control">
</div>
<input type="hidden" id="userId" class="form-control">
</div>
<div class="modal-footer">
Update
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
The php updating function isn't returning anything, so your success callback is just setting the same values that you sent to the server and you don't really need to do it (unless you want to revert it, but to do that you have to capture the original state first). You can use a error callback instead to alert the user that the update failed.
Reference: How to convert rgb to hex
now edit on bbdd.
The error was on this line:
$result = mysqli_query($connection , "UPDATE linea SET nombre_linea='$nombre_linea' , color_principal_linea = '$color_principal_linea' , color_secundario_linea = '$color_secundario_linea' , rut_linea='$rut_linea' WHERE id='$id_linea'");
this is the correct:
$result = mysqli_query($connection , "UPDATE linea SET nombre_linea='$nombre_linea' , color_principal_linea = '$color_principal_linea' , color_secundario_linea = '$color_secundario_linea' , rut_linea='$rut_linea' WHERE id_linea='$id_linea'");
Note: I have one solution, but I still can not place the color variable after the update, that is, if I refresh the page the changes are seen, but when I clicked on the update, I did not
Related
Good afternoon colleagues, I am in a web design course, this work was presented to me, which is a search page, which should show the user's information in a MODAL, obtaining it from the database.
I managed to make the Modal work, but, it throws all the information of the table, when I try to do the query, it does not show me anything.
I hope you can guide me with this detail
<?php
//Conexion para el Modal
$con =mysqli_connect("localhost", "root","");
$db = mysqli_select_db($con, 'requi');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="./">Search panel</a>
</nav>
<meta charset="UTF=8">
<hr weight= "100%">
<title>Buscar requisicion</titLe>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-5">
<h2>Buscar requisición</h2>
<div class="form-group">
<form class="form-outline">
<input class="form-control mr-sm-2" type="search" placeholder="Ingresa el ID" name ="id" aria-label="Search">
<!--<button class="btn btn-success my-2 my-sm-0" type="submit" name="search">Buscar</button>-->
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" name="smodal">Busqueda</button>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Mail Search</h4>
</div>
<div class="modal-body">
<p>Your data: </p>
</div>
<div>
<table style='border-collapse: collapse;'>
<tr>
<th>Email</th>
<th>Name</th>
<th> </th>
</tr>
<?php
if(isset($_POST['search'])) {
$id = $_POST['id'];
$query = "select * from info WHERE id = '$id'";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result)){
$id = $row['id'];
$correo = $row['correo'];
$nombre = $row['nombre'];
echo "<tr>";
echo "<td>".$correo."</td>";
echo "<td>".$nombre."</td>";
echo "</tr>";
}
}
?>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I am trying to display values from SQL Database onto a textbox using PHP and JQuery. The values are getting retrieved but does not display onto the textbox. What am I doing wrong?
<?php
require 'UpdateTimerSQL.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LiveData</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h2>Ajax</h2>
<p>Update Timer</p>
<table class="table">
<?php
$table = mysqli_query($connection, 'SELECT * FROM Timers');
while($row = mysqli_fetch_array($table)){
?>
<tr id="<?php echo $row['ID']; ?>">
<th>Timer_1</th>
<td data-target="Timer_1"><?php echo $row['Timer_1']; ?></td>
<th>
Update
</th>
</tr>
<?php
}
?>
</table>
<div class="container">
<div class="text-center"></div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Neutral Timer 1</label>
<input type="hidden" id="ids" class="form-control">
<input type="text" id="Timer_1" class="form-control">
</div>
<div class="modal-footer">
Update
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(document).on('click', 'a[data-role=update]', function() {
var id = $(this).data('id');
//this(a tag)->tr(id)->td(data attr)->text
var Timer_1= $(this).closest('tr[id=' + id + ']').find("td[data-target='Timer_1']").text();
//putting value in input box
$('#Timer_1').val(Timer_1);
$('#myModal').modal('toggle');
});
EDIT:
I am able to show the values on the text field, thanks to the user who answered it here. But I am not able to update mySQL table when I change the textbox values after clicking on "#save". What am I doing wrong here?
//onclick of update button
$(document).on('click', '#save', function() {
//getting value of input box
var ids = $(this).closest(".modal-body").find("#ids").val();
var Timer_1= $(this).closest(".modal-body").find("#Timer_1").val();
$.ajax({
url : 'UpdateTimerSQL.php',
method : 'POST' ,
data : {Timer_1: Timer_1, ids: ids},
success : function(response){
$("table").find("tr[id='" + ids + "']").find("td[data-target='Timer_1']").text(Timer_1);
}
});
});
UpdateTimerSQL.php
<?php
$connection = mysqli_connect(...........);
if(isset($_POST['ID'])){
$Timer_1= $_POST['Timer_1'];
$ids = $_POST['ID'];
$result = mysqli_query($connection,"UPDATE Timers SET
Timer_1='$Timer_1' WHERE ID ='$ids'");
if($result){
echo 'data updated';
}
}
?>
Your table structure is invalid .Also, your Timer_1 was not able to find the text needed thats the reason it was not working .
Your php code should look like below :
<table class="table">
<?php
$table = mysqli_query($connection, 'SELECT * FROM Timers');
while($row = mysqli_fetch_array($table)){
?>
<tr id="<?php echo $row['ID']; ?>">
<th>Timer 1</th>
<td data-target="Timer_1">
<?php echo $row['Timer_1']; ?>
</td>
<th>
Update
</th>
</tr>
<?php
}
?>
</table>
Here is demo code :
$(document).ready(function() {
$(document).on('click', 'a[data-role=update]', function() {
var id = $(this).data('id');
//this(a tag)->tr(id)->td(data attr)->text
var Timer_1 = $(this).closest('tr[id=' + id + ']').find("td[data-target='Timer_1']").text();
//putting value in input box
$("#ids").val(id)
$('#Timer_1').val(Timer_1);
$('#myModal').modal('toggle');
});
//onclick of update button
$(document).on('click', '#save', function() {
//getting value of input box
var input_val = $(this).closest(".modal-body").find("#Timer_1").val();
//getting hidden id
var ids = $(this).closest(".modal-body").find("#ids").val();
//finding tr with same id and then update the td
$("table").find("tr[id='" + ids + "']").find("td[data-target='Timer_1']").text(input_val);
$('#myModal').modal('toggle');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2>Ajax</h2>
<p>Update Timer</p>
<table class="table">
<tr id="1">
<th>Timer 1</th>
<td data-target="Timer_1"> Something</td>
<th>
Update
</th>
</tr>
<tr id="2">
<th>Timer 1</th>
<td data-target="Timer_1"> Something123</td>
<th>
Update
</th>
</tr>
</table>
<div class="text-center"></div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Timer 1</label>
<input type="hidden" id="ids" class="form-control">
<input type="text" id="Timer_1" class="form-control">
</div>
<div class="modal-footer">
Update
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I am working on a project where the HTML table rows have been created with information of Name, Details, Phone, Email etc. All this information is stored in a database.
Now, I want obtain a modal box, when I click on the table row and obtain information which is there on the row in a neat and tidy form. As you can see from the code, I have already put it an alert box. However, instead of this, I would like to get the same information in a modal box using Jquery and bootstrap.
For this please find the existing codes that are in place. I have not put any codes for the modal part. This is because, I am not sure how to get the table row as a modal button.
<?php
session_start();
if(isset($_SESSION['u_uid']))
$uid = $_SESSION['u_id'];
require_once('connect.php');
$ReadSql = "SELECT * FROM `contact` WHERE users_id=$uid AND ACTIVE_INACTIVE=1 ORDER BY Name";
$res = mysqli_query($connection, $ReadSql);
?>
<!DOCTYPE html>
<form action="http://motoko.sorainsurance.com.au/includes/logout.inc.php" method="POST">
<button type="submit" name="submit">Logout</button>
</form>
<form>
<input type="button" value="Add Contact" onclick="window.location.href='http://motoko.sorainsurance.com.au/crud/comp_contact_index.php'" />
</form>
<html>
<head>
<title>Motoko</title>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.table-hover tbody tr:hover td
{
background-color: #A9A9A9;
color: white;
}
body
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('table tbody tr').click(function (){
alert($(this).text());
});
});
</script>
<body>
<div class="container">
<div class="row">
<table class="table">
<table class="table table-hover">
<tr>
<th><strong>Contact Category</strong></th>
<th><strong>Name</strong></th>
<th><strong>Details</strong></th>
<th><strong>Phone</strong></th>
<th><strong>Email</strong></th>
<th><strong>Address</strong></th>
<th><strong>Extras</strong></th>
</tr>
<?php
while($r = mysqli_fetch_assoc($res)){
?>
<tr>
<td class= "r-Type"><?php echo $r['Contact_type']; ?></td>
<td class= "r-Name"><?php echo $r['Name']; ?></td>
<td class="r-Details"><?php
if ($r['Contact_type'] == 'Individual')
{
echo $r['Title']. ', '.$r['Company'];
}
elseif ($r['Contact_type'] == 'Team')
{
echo $r['Company'];
}
elseif ($r['Contact_type'] == 'Company')
{
echo '';
}
?> </td>
<td class="r-Phone"><?php echo $r['Phone']; ?></td>
<td class="r-Email"><?php echo $r['Email']; ?></td>
<td class="r-Address"><?php echo $r['Address']; ?></td>
<td class="r-Update">Edit</td>
<td class="r-Delete"><a href='delete.php?id=<?php echo $r['id']?>'>Delete</a></td>
</tr>
<?php } ?>
</table>
</div>
</body>
</html>
Jquery used
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('table tbody tr').click(function (){
alert($(this).text());
});
});
</script>
What you can do is on your '.click()' event, you can open a bootdtrap modal. Here's a demo modal that might help you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Click the button to get row information</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#infoModal">Get Information</button>
<!-- Modal -->
<div class="modal fade" id="infoModal" role="dialog" style="margin-top: 14%">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Row Information</h4>
</div>
<div class="modal-body">
<label>Values: </label>
<input id="val1" type="text">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Now this modal has an input box which has id. So first you set its value with what you get in your alert by doing: $('#val1').val($(this).text());.
Once the value is set, you need to open the modal.
For opening the modal, inside your .click() function, after the value setting, do $('#infoModal').modal('show');. This will open the modal with your row values in the input box.
Hope this helps. If it doesn't it'll definitely help you along achieving what you want.
I have taken a look at other related questions but unable to understand or change this to get it working. Basically i am trying to save a pdf of presented flot data contained in tab0 . for some reason the pdf output cuts half the page off, even though I am using the largest size a0 and it is also missing the legend of charts, here is the code.
(function ($) {
$(function() {
// $.plot($("#placeholder0"), [ { label: 'Test', data: [[0, 0], [1, 1]] } ], { yaxis: { max: 1 } });
$("#generate0").on("click", function(e) {
var pdf = new jsPDF('p', 'pt', 'a0');
// var pdf = new jsPDF();
var canvas = pdf.canvas;
canvas.height = 6000;
html2canvas($('#content').get(0), {
canvas:canvas,
allowTaint: true,
onrendered: function(canvas) {
// document.body.appendChild(canvas);
console.log("rendered");
/* var iframe = document.createElement('iframe');
iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:10000px; width:500px');
document.body.appendChild(iframe);
iframe.src = pdf.output('datauristring'); */
pdf.save("Current Data2.pdf")
//var div = document.createElement('pre');
//div.innerText=pdf.output();
//document.body.appendChild(div);
}
});
});
});
}(jQuery))
all i want to do is allow the saved pdf to capture all of the data even if it means spanning over 3 or 10 pdf pages. Any help greatly recieved... oh here is the html/php ...
<!DOCTYPE html>
<html lang="en">
<head>
<!-- start: Meta -->
<meta charset="utf-8">
<title>Vibe Music Therapy Dashboard</title>
<meta name="description" content="Vibe Music Therapy Daashboard - OpenFace Service user 1 Data">
<meta name="author" content="Greg Hanford">
<meta name="keyword" content="Vibe, MusicTherapy, Dashboard, Metrics, disability, support, research, kpi">
<!-- end: Meta -->
<!-- start: Mobile Specific -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- end: Mobile Specific -->
<!-- start: CSS -->
<!-- <link id="bootstrap-style" href="css/bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link id="base-style" href="css/style.css" rel="stylesheet">
<link id="base-style-responsive" href="css/style-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/graphing.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/91366f1215.js"></script>
<!-- end: CSS -->
<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link id="ie-style" href="css/ie.css" rel="stylesheet">
<![endif]-->
<!--[if IE 9]>
<link id="ie9style" href="css/ie9.css" rel="stylesheet">
<![endif]-->
<!-- start: Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<!-- end: Favicon -->
<!-- Piwik -->
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ?
"https://sweb5.secure-secure.co.uk/musictherapy.co.uk/piwik/" :
"http://musictherapy.co.uk/piwik/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch (err) {}
</script><noscript><p><img src="http://musictherapy.co.uk/piwik/piwik.php?idsite=1" style="border:0" alt="" /></p></noscript>
<!-- End Piwik Tracking Code -->
</head>
<body>
<!-- start: Header -->
<div class="navbar">
<div class="navbar-inner"><img class="main-logo" style="width: 150px; height: 74px;" alt="vibe dashboard logo" src="img/Vibe-dashboard-logo.png">
<a class="brand" href="index.html"><span>Music Therapy Dashboard</span></a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
</a>
</div>
</div>
<!-- start: Header -->
<div class="container-fluid-full">
<div class="row-fluid">
<!-- start: Main Menu -->
<div id="sidebar-left" class="span2">
<div class="nav-collapse sidebar-nav">
<ul class="nav nav-tabs nav-stacked main-menu">
<li>
<a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> Davenham Metrics</span></a>
<ul>
<li><a class="submenu" href="overview-main1.html"><i class="icon-dashboard"></i><span class="hidden-tablet"> Overview</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser1.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Joyce</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser2.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Margaret</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser3.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Jenny</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser4.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Gillian</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser5.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Alf</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser6.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Jean</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser7.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Maureen</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser8.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Judith</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser9.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Wendy</span></a></li>
</ul>
</li><li>
<a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> OpenFace Data</span></a>
<ul>
<?php
$data = "./data";
$dir = scandir($data);
$users = [];
// $i starts at 2 to skip the dir entries '.' and '..'
for ($i = 2, $size = count($dir); $i < $size; ++$i) {
$users[] = explode("-", $dir[$i])[0];
}
foreach (array_unique($users) as $user){
echo '<li> <a class="submenu2" href="graph.php?user=' . $user . '">',
'<i class="icon-bar-chart"></i><span class="hidden-tablet">' . $user . '</span></a></li>';
}
?>
</ul>
</li>
</ul>
</div>
</div>
<!-- end: Main Menu -->
<noscript>
<div class="alert alert-block span10">
<h4 class="alert-heading">Warning!</h4>
<p>You need to have JavaScript enabled to use this site.</p>
</div>
</noscript>
<!-- start: Content -->
<div id="content" class="span10">
<?php
$user = $_GET['user'];
$data_dir = "./data";
$dir_listing = scandir($data_dir);
$users = [];
// $i starts at 2 to skip the dir entries '.' and '..'
for ($i = 2, $size = count($dir_listing); $i < $size; ++$i) {
$split = explode("-", $dir_listing[$i]);
$users[$split[0]][] = $split[1];
}
$dates = array_unique($users[$user]);
$overview = array_search('Overview', $dates);
if($overview) {
unset($dates[$overview]);
array_unshift($dates,'Overview');
}
$dates = array_values($dates);
// print_r("DATES");
// print_r($dates);
?>
<div class="box-content">
<ul class="nav nav-pills" id="myTab">
<?php
echo '<li class="active">' . $dates[0] . '</li>';
for($i = 1, $size = count($dates); $i < $size; ++$i) {
echo '<li>' . $dates[$i] . ' </li>';
}
?>
</ul>
</div>
<div id="myTabContent" class="tab-content">
<?php
foreach ($dates as $id => $date) {
if ($id == 0) {
echo '<div class="tab-pane active" id="tab0">';
} else {
echo '<div class="tab-pane" id="tab' . $id . '">';
}
echo <<<END
<div class="row-fluid">
<button type="button" disabled class="select-chart btn btn-primary btn-lg" data-toggle="modal" data-target="#main-variable$id">
Loading chart data</button>
<button type="button" disabled class="select-features btn btn-primary btn-lg">
Loading features data</button>
<button type="button" id="generate$id">Generate pdf</button>
<div id="triple-chart-holder$id" class="container charts"></div>
<div id="single-chart-holder$id" class="container charts"></div>
<div id="features-chart-holder$id" class="container charts"></div>
<div id="features$id" class="f-chart", style="height:382px"></div>
<div id="features-translation$id" class="f-chart", style="height:282px"></div>
<div id="features-rotation$id" class="f-chart", style="height:282px"></div>
<div class="container charts">
<div id="radar$id" style="width:1000px; height:1000px"></div>
</div>
<div id="dial-chart-holder$id" class="container charts"></div>
<div id="placeholder$id" style="width:600px;height:300px"></div>
</div>
<!-- Modal -->
<div class="modal fade" id="comparison$id" tabindex="-1" role="dialog" aria-labelledby="choose comparisions modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Select datasets for comparison</h4>
</div>
<div class="modal-body">
<div class="row">
<div id="IMT$id" class="col-md-6 col-sm-6 col-xs-12">
IMT
</div>
<div id="OOT$id" class="col-md-6 col-sm-6 col-xs-12">
OOT
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="plot-chart btn btn-primary">Plot</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="main-variable$id" tabindex="-1" role="dialog" aria-labelledby="main variable modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Select independent dataset</h4>
</div>
<div class="modal-body">
<div class="row">
<div id="IMT-main$id" class="col-md-6 col-sm-6 col-xs-12">
IMT
</div>
<div id="OOT-main$id" class="col-md-6 col-sm-6 col-xs-12">
OOT
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="select-all-imt btn btn-secondary">Select all, IMT</button>
<button type="button" class="select-all-oot btn btn-secondary">Select all, OOT</button>
<button type="button" class="main-variable btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
</div>
END;
}
?>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>
<span style="text-align:left;float:left">© 2016 Vibe Music Therapy Dashboard</span>
</p>
</footer>
<!-- start: JavaScript-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-migrate-1.0.0.min.js"></script>
<script src="js/jquery-ui-1.10.0.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="js/modernizr.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src="js/bootstrap.min.js"></script> -->
<script src="js/jquery.cookie.js"></script>
<script src="js/excanvas.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>
<script src="js/jquery.cleditor.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script src="js/jquery.sparkline.min.js"></script>
<script src="js/counter.js"></script>
<script src="js/retina.js"></script>
<script src="js/papaparse.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery.viewport.js"></script>
<script src="js/jquery.flot.downsample.js"></script>
<script src="js/jquery.flot.animator.min.js"></script>
<script src="js/jquery.flot.selection.js"></script>
<script src="js/jquery.flot.JUMlib.js"></script>
<script src="js/jquery.flot.spider.js"></script>
<script src="js/jquery.flot.grow.js"></script>
<script type="text/javascript" src="js/async.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/prepareplots.js"></script>
<script type="text/javascript" src="js/jspdf.min.js"></script>
<script type="text/javascript" src="js/image.js"></script>
<script type="text/javascript">
(function () {
// defensively json_encode(ing) to make sure nothing odd gets passed to the
// javascript.
var dirRoot = <?php echo json_encode($data_dir . "/" . $user . "-") ?>;
var dates = <?php echo json_encode($dates) ?>;
$(function () {
preparePlots(0, dirRoot + dates[0]);
});
$('.nav-pills a').on('click', function() {
var id = $(this).parent('li').index();
preparePlots(id, dirRoot + dates[id]);
});
})();
</script>
<!-- end: JavaScript-->
</body>
</html>
I'm facing the same issue, I found that it's not the problem of jsPDF page size, but the html2canvas.
If you indicate canvas option to html2canvas, then html2canvas won't probably capture the element $('#content').get(0) by its width, it will capture this element by the width of whole window, if the width of the canvas is less than the window's, the captured picture cutting off.
have a try :
canvas.width = document.body.clientWidth
It's not a final solution, but works for me.
I need to build progress bar next to the names of people showing how many costumers each people have working for him. When you see the code you will understand my problem. I dont know how to build this.
Just before end of body, before script tags i have progress bar and var that show's names from db. I need to show that names and beside them progress bar with percentage of costumers.
this are my tables
<?php
if (isset($_GET['poslovni_korisnici'])) {
$active1 = 'class="active"';
}
else {
$active1 = '';
}
if(isset($_GET['korisnici'])) {
$active2 = 'class="active"';
}
else {
$active2 = '';
}
/*** mysql hostname ***/
$hostname = 'localhost';
/*** mysql username ***/
$username = 'root';
/*** mysql password ***/
$password = '';
try {
$dbh = new PDO("mysql:host=$hostname;dbname=zadatak1", $username, $password);
/*** echo a message saying we have connected ***/
/**echo 'Connected to database';**/
}
catch(PDOException $e)
{
echo $e->getMessage();
}
echo'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Statistika</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesnt work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">POSLOVNA STATISTIKA</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ' . $active1 . '>Poslovni korisnici <span class="sr-only">(current)</span></li>
<li ' . $active2 . '>Korisnici</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>';
switch (isset($_GET)) {
case isset($_GET['poslovni_korisnici']):
echo'
<h1>Poslovni korisnici</h1>
<button type="button" class="btn btn-default btn-sm">Unos</button>
</br>
</br>';
echo'
<table id="table_id" class="display">
<thead>
<tr>
<th>Partner id</th>
<th>Partner name</th>
<th>Partner street</th>
<th>Partner zip</th>
<th>Partner city</th>
<th>Partner country</th>
</tr>
</thead>
<tbody>';
$sql = "SELECT * FROM poslovni_partneri";
foreach ($dbh->query($sql) as $row)
{
echo'
<tr>
<td>'.$row['Partner_id'].'</td>
<td>'.$row['Partner_name'].'</td>
<td>'.$row['Partner_street'].'</td>
<td>'.$row['Partner_zip'].'</td>
<td>'.$row['Partner_city'].'</td>
<td>'.$row['Partner_country'].'</td>
</tr>';
}
echo'
</tbody>
</table>';
break;
case (isset($_GET['korisnici'])):
echo'
<h1>Korisnici</h1>
<button type="button" class="btn btn-default btn-sm">Unos</button>
</br>
</br>
<table id="table_id" class="display">
<thead>
<tr>
<th>User id</th>
<th>Partner ID</th>
<th>User name</th>
<th>User department</th>
<th>User email</th>
<th>User phone</th>
<th>User mobile</th>
</tr>
</thead>
<tbody>';
$sql = "SELECT * FROM korisnici
INNER JOIN poslovni_partneri
ON korisnici.Partner_id=poslovni_partneri.Partner_id";
foreach ($dbh->query($sql) as $row)
{
echo'
<tr>
<td>'.$row['User_id'].'</td>
<td>'.$row['Partner_id'].'</td>
<td>'.$row['User_name'].'</td>
<td>'.$row['User_department'].'</td>
<td>'.$row['User_email'].'</td>
<td>'.$row['User_phone'].'</td>
<td>'.$row['User_mobile'].'</td>
</tr>';
}
echo'
</tbody>
</table>';
break;
default:
$sql = "SELECT Partner_name FROM poslovni_partneri";
$del = $dbh->prepare('SELECT * FROM poslovni_partneri');
$del->execute();
$count = $del->rowCount();
$del = $dbh->prepare('SELECT * FROM korisnici');
$del->execute();
$count2 = $del->rowCount();
echo '<div class="panel panel-primary">
<div class="panel-heading">Popis poslovnih partnera</div>
<div class="panel-body">
<button class="btn btn-primary" type="button">
Broj poslovnih korisnika <span class="badge">'.$count.'</span>
</button>
</br>
</br>
<button class="btn btn-primary" type="button">
Broj korisnika <span class="badge">'.$count2.'</span>
</button>
</br>
</br>
<div class="panel panel-primary">
<div class="panel-heading">Popis poslovnih partnera <p class="text-center">Ukupni udio</p></div>
<ul class="list-group">';
foreach ($dbh->query($sql) as $row)
{
echo'
<li class="list-group-item list-group-item-info">
<span class="badge">144</span>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<h4 class="names">'.$row['Partner_name'].'</h4>
</li>';
}
echo'
</ul>
</div>
</div>';
break;
}
echo'
<script>
$(document).ready( function () {
$("#table_id").DataTable();
} );
</script>
<!-- jQuery (necessary for Bootstraps JavaScript plugins) -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>';
?>
You should first get count of customers of each people. Now on basis of number of customers build your progress bar.
Step 1.
Get count of customers.
//add your logic here
$customer_count=<for_exampe_its_20>
Step 2.
Now on basis of count display your progress bar
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="<? php echo ($customer_count) ?>" aria-valuemin="0" aria-valuemax="100" style="width: <? php echo ($customer_count) ?>%">
<span class="sr-only"><? php echo ($customer_count) ?>customers(success)</span>
</div>
</div>