I was given support on a previous question regarding selecting a TR directly after the previous - problem I'm facing now is when I added this SECOND TR to the table structure I'm loosing all the functions of the Jquery DataTables from https://datatables.net/ like the search and the page counter ext... if I remove that second TR it works fine - what am I missing? what's conflicting?
The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--IMPORT GREYBOX -->
<script type="text/javascript">
var GB_ROOT_DIR = "/greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="js/main.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#table_idh').DataTable();});
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand fa fa-car" href="#"><span style="color:orange;font-family: impact; margin-left: 5px;">MTC AUTO</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" id="addClient" href="addRecord.php" title="Add Client" rel="gb_page_center[500,500]">Add Client</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form action="inc/server.php?logout=true" method="POST">
<input type="button" disabled class="btn btn-primary m15" value="Hello <? echo $username; ?>">
<input type="submit" class="btn btn-warning m15" name="logout" value="Logout">
</form>
</div>
</nav>
<div class="container" style="margin-top: 95px;">
<table id="table_idh" class="display m95">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Number</th>
<th>Email</th>
<th>Date/Birth</th>
<th>Income</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<!-- Get Records From Db-->
<?php include 'inc/getRecords.php'; ?>
</tbody>
</table>
</div>
The Jquery
$(document).ready(()=> {
const $addClient = $('#addClient');
$addClient.hover(()=>{
$addClient.css({"color":"red","text-decoration":"underline"});
},()=> {
$addClient.css({"color":"black","text-decoration":"none"});
});
$('.trigger').on('click',(e) => {
$(e.target).closest('tr').next('tr').toggleClass('hide');
})
})
The Table Insert from database loop - that second TR is causing issue when I remove it I get all the functions back -
echo "
<tr>
<td class='trigger'>".$firstName."</td>
<td>".$lastName."</td>
<td>".$phone."</td>
<td><a href='mailto:".$email."'>".$email."</a></td>
<td>".$dob."</td>
<td>".$emp_income."</td>
<td>".$dateIn."</td>
</tr>
<tr class='hide'>
<td colspan=7>Address: ".$address." <br> Province: ".$prov." <br> Postal Code:
".$post." <br>RentOrOwn: ".$rent_or_own." <br>House Payment: ".$house_payment."<br>Shopping: ".$shopping."<br> Employer:".$emp_name."<br>Job Title: ".$emp_title."<br>Employment Time: ".$emp_time."<br>Downpayment: ".$downpayment." </td>
</tr>
";
Please use/load table activate code on the last.
$(document).ready(function() {
$('#table_idh').DataTable();
});
You can use it on the bottom of your page body.
And also load cdn.datatables.net files after load bootstrap files.
Footer/Bottom of the body will be best.
#### Solution ####
Solved the problem of colspan support by adding an "invisible" cell for every cell.
echo "
<tr>
<td class='trigger'>".$firstName."</td>
<td>".$lastName."</td>
<td>".$phone."</td>
<td><a href='mailto:".$email."'>".$email."</a></td>
<td>".$dob."</td>
<td>".$emp_income."</td>
<td>".$dateIn."</td>
</tr>
<tr class='hide' >
<td width='100%'>
Address: ".$address."
<br> Province: ".$prov."
<br> Postal Code: ".$post."
<br>RentOrOwn: ".$rent_or_own."
<br>House Payment: ".$house_payment."
<br>Shopping: ".$shopping."
<br> Employer:".$emp_name."
<br>Job Title: ".$emp_title."
<br>Employment Time: ".$emp_time."
<br>Downpayment: xxx".$downpayment."
</td>
<!-- hidden column 6 for proper DataTable applying -->
<td style='display: none'></td>
<td style='display: none'></td>
<td style='display: none'></td>
<td style='display: none'></td>
<td style='display: none'></td>
<td style='display: none'></td>
<td style='display: none'></td>
</tr>
";
Related
I have a page that has a table with 3 columns, two of which are data and the third has an edit button. When I click this button, the name is sent to a modal where it can be changed.
I need to do two things:
Update the name in the table and close the modal when click the Save Changes button on the modal.
Is it possible to do that?
Index.php
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<table id="tabela">
<thead>
<th>#</th>
<th>Name</th>
<th></th>
</thead>
<tr>
<td>1</td>
<td class="name">Fred</td>
<td><button class="btnEdit">Edit</button></td>
</tr>
<tr>
<td>2</td>
<td class="name">Charles</td>
<td><button class="btnEdit">Edit</button></td>
</tr>
<tr>
<td>3</td>
<td class="name">John</td>
<td><button class="btnEdit">Edit</button></td>
</tr>
</table>
<div class="modal" id="modalTest" tabindex="-1" role="dialog">
<?php
include "modalTabela.php";
?>
</div>
<script>
//send name to php page
$(".btnEdit").click(function() {
var nome = $(this).closest('tr').find(".name").text();
$.ajax({
type: 'POST',
url: '//localhost/tabela/modalTabela.php',
data: {msg: nome },
}).done(function(data) {
//update html
$("#modalTest").html(data);
//show modal
$("#modalTest").modal("show");
});
});
</script>
</body>
</html>
modalTabela.php
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php
$nome=$_POST['msg'];
echo "<label>Name</label><input type='text' id='edNome' value='$nome'></input>";
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnSalvar">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I am trying to implement the bootstrap datetimepicker and am running into an issue where clicking on the input box doesn't trigger any action. I have double checked my imports along with the code itself following several tutorials, but I am not able to find the issue with my code. The imports I am using are as followed:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="js/bootstrap-datetimepicker.min.js"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I have downloaded the datetimepicker repo and have selected the css and js folder and moved them to the main directory.
The code I am calling for the label is as follows:
<div class="row">
<div class='col-sm-6'>
<input size="16" type="text" class="form-control" id="datetime" readonly>
<script type="text/javascript">
$("#datetime").datetimepicker({
format: 'yyyy-mm-dd hh:ii'
});
</script>
</div>
</div>
As I have stated the label doesn't have any action when clicked on. I am not sure if you need the whole webpage to understand my issue but I will post it below:
<?php
require('./includes/connection.php');
require('./includes/crypt.php');
require('functions.php');
session_start();
ob_start();
/**
* Created by PhpStorm.
* User: peri
* Date: 2019-04-07
* Time: 16:48
*/
if(isset($_GET['cancel'])) {
header('Location: messaging.php');
exit();
}
if(isset($_GET['confirm'])) {
if(isset($_GET['reason'])) {
//Encrypted text
$encrypted_text = encrypt_text($_GET['reason'], $key, $iv);
}
}
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="js/bootstrap-datetimepicker.min.js"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>New Appointment</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark align-center">
<a class="navbar-brand" href="#">EMR System</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse align-center" id="navbarNav">
<ul class="navbar-nav align-center">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Appointment <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prescription</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lab Tests</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Billing</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<img src="https://png.pngtree.com/element_our/sm/20180620/sm_5b29c1b6c8772.png" width="45px" height="45px">
</li>
</ul>
</div>
</nav>
<br>
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-5 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
<?php
//Running query to fetch physician details
$row = get_physician_information_messaging($_SESSION['phy_ssn']);
//echo var_dump($row);
//$message = "test";
//insert_message($_SESSION['ssn'], $message, 0);
?>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col" colspan="6">Physician Information</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">First Name:</th>
<td class="col-md-6"> <?php echo $row[0]?></td>
<th scope="row">Last Name:</th>
<td class="col-md-6"> <?php echo 'Dr. ' . $row[2]?></td>
</tr>
<tr>
<th scope="row">Phone Number:</th>
<td class="col-md-6"><?php echo $row[3] ?></td>
<th scope="row">Speciality:</th>
<td class="col-md-6"><?php echo $row[4] ?></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-12 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
<form method="get" action="new_appointment.php">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col" colspan="2">Reason for visit</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-group">
<label for="visit_reason">Enter your reason for the visit. Be as descriptive as possible.</label>
<textarea class="form-control" id="visit_reason" rows="3" name="reason"></textarea>
</div>
</td>
</tr>
<tr>
<td>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<input size="16" type="text" class="form-control" id="datetime" readonly>
<script type="text/javascript">
$("#datetime").datetimepicker({
format: 'yyyy-mm-dd hh:ii'
});
</script>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<button type="submit" class="btn btn-success" name="confirm">Confirm</button>
<button type="submit" class="btn btn-danger" name="cancel">Cancel</button>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Could someone point out my issue? (Note: All of the code I have used for the datetimepicker were copied pasted from tutorials which is another reason as to why I am puzzled.)
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 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>
I develop a jQuery mobile site and want to display pie chart, the data fetch form database to show in pie chart. Since the jQuery mobile link to another page using div, I make one div in index.php to display data from database, then when the data is showing up, I can view the data by click on the view link. At this part, I make jQuery load to load page piechart.php when click on the view link. The piechart.php page success called by jQuery load, but pie chart not appear, BUT if I right click on page and click view inspect element, it starts showing up normally the pie chart.
Why do I need to right click to display it??
This is index.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SSPIC</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<meta name="description" content="This site was created from a template originally designed and developed by Codify Design Studio. Find more free templates at http://www.adobe.com/devnet/author_bios/chris_converse.html" />
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/formcalculations.js"></script>
<link href="styles/cakeform.css" rel="stylesheet" type="text/css" />
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="themes/my_company.min.css" />
<link rel="stylesheet" href="includes/overrides.css" />
<script type="text/javascript" src="includes/custom.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<link href="stylesheets/app.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<link href="stylesheets/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<script src="javascripts/vendor/snap.svg.js"></script>
<script src="javascripts/pizza.js"></script>
<script type="text/javascript">
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
</script>
</head>
<body onload='hideTotal()'>
<div data-role="page" id="home" data-theme="a">
<div data-role="header">
<h1>Homepage</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li class="btn_a">About Us</li>
<li class="btn_s">Services</li>
<li class="btn_l">Search</li>
<li class="btn_c">Upload</li>
<li class="btn_c">Chart</li>
</ul>
</div>
<div data-role="">
</div>
</div>
<div data-role="page" id="locations" data-title="Find a Locations">
<div data-role="header">
<h1>Search Data</h1>
back
</div>
<div data-role="content">
<p></p>
<h2>Search Data</h2>
</div>
<div data-role="footer">
<div data-role="controlgroup" data-type="horizontal">
Home
</div>
<h4>©2013 SSPIC</h4>
</div>
</div>
<div data-role="page" id="contact_us" data-title="Contact Us">
<div data-role="header">
<h1>Upload</h1>
back
</div>
<div data-role="content" class="content_container">
<p><form action="insertimage.php" method="post" enctype="multipart/form-data" name="form1">
<h2 align="center"> </h2>
<h2 align="center">Information</h2>
<table width="63%" border="1" align="center">
<tr>
<td width="40%">Upload File</td>
<td width="60%"><input name="pic" type="file" id="pic" /></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input type="submit" name="Submit" value="Submit" />
</div></td>
</tr>
</table>
<p align="center"> </p>
<p align="center"> </p>
<p align="center">
</form></p>
</div>
<div data-role="footer">
<div data-role="controlgroup" data-type="horizontal">
Home
</div>
<h4>©2013 SSPIC</h4>
</div>
</div>
<div data-role="page" id="chart" data-title="chart Us" class="chart">
<div data-role="header">
<h1>Pie Chart</h1>
back
</div>
<div id="output" data-role="content" class="content_container"></div>
<div data-role="content" class="content_container" id="k_chart">
<p>
<form action="insertimage.php" method="post" enctype="multipart/form-data" name="form1">
<h2 align="center"> </h2>
<h2 align="center">Display File</h2>
<table width="63%" border="1" align="center" class="table_chart">
<tr>
<td width="40%">Bil</td>
<td width="60%">Pusat rawatan</td>
<td width="60%">Pengasas</td>
<td width="60%">Bil pengamal</td>
<td width="60%">Total</td>
<td width="60%">Phone number</td>
<td width="60%">Peratus</td>
<td width="60%">view chart</td>
</tr>
<?php
include("connection.php");
$sel = mysql_query("select * from info");
$a = 1;
while($get_sel = mysql_fetch_array($sel))
{
?>
<tr>
<td width="40%"><?php echo $a++;?></td>
<td width="60%"><?php echo $get_sel['nama_PusatRawatan'];?></td>
<td width="40%"><?php echo $get_sel['nama_Pengasas'];?></td>
<td width="60%"><?php echo $get_sel['bilangan_Pengamal'];?></td>
<td width="40%"><?php echo $get_sel['totalPrice'];?></td>
<td width="60%"><?php echo $get_sel['phonenumber'];?></td>
<td width="60%"><?php echo $get_sel['peratus'];?></td>
<td width="60%"><div class="id"><?php echo $get_sel['id'];?></div><span class="viewBtn">View</span></td>
</tr>
<?php
}
?>
</table>
<p align="center"> </p>
<p align="center"> </p>
<p align="center">
</form></p>
</div>
<div data-role="footer">
<div data-role="controlgroup" data-type="horizontal">
Home
</div>
<h4>©2013 SSPIC</h4>
</div>
</div>
<script>
$(document).ready(function(e) {
// Pizza.init();
$('.viewBtn').on('click',function()
{
var id = $(this).closest('td').find('.id').text();
$('#k_chart').hide();
$('#output').load("piechart.php?id="+id);//load page to display pie chart
});
$(window).load(function() {
Pizza.init({
donut: false, // enable donut chart
donut_inner_ratio: 0.4, // between 0 and 1
percent_offset: 35, // relative to radius
stroke_color: '#333',
stroke_width: 0,
show_percent: true, // show or hide the percentage on the chart.
animation_speed: 500,
animation_type: 'elastic' // options: backin, backout, bounce, easein, easeinout, easeout, linear
});
});
});
</script>
</body>
</html>
This one is piechart.php
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="themes/my_company.min.css" />
<link rel="stylesheet" href="includes/overrides.css" />
<link href="stylesheets/app.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<link href="stylesheets/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><script src="javascripts/vendor/snap.svg.js"></script>
<script src="javascripts/pizza.js"></script>
<div data-role="content" class="content_container">
<p>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<div class="jquery-script-clear"></div>
</div>
</div>
<h1 style="margin-top:150px;" align="center">Papar peratus lulus pie chart </h1>
<div class="row">
<div class="large-12 columns">
<h3>Graphs</h3>
</div>
</div>
<?php
include("connection.php");
$id_info = $_GET['id'];
$papar = mysql_query("select *from info where id = '$id_info'");
$get_papar = mysql_fetch_array($papar);
if($get_papar['peratus']>0 and $get_papar['peratus']<=50)
{
$xlulus = $get_papar['peratus'];
$lulus = 100 - $xlulus;
}
else
{
$lulus = $get_papar['peratus'];
$xlulus = 100 - $lulus;
}
?>
<div class="row">
<div class="large-4 small-4 columns">
<ul data-pie-id="svg">
<li data-value="<?php echo $xlulus;?>">Tidak memenuhi syarat</li><li data-value="<?php echo $lulus;?>">Memenuhi syarat</li>
</ul>
</div>
<div class="large-8 small-8 columns">
<div id="svg"></div>
</div>
</div>
</p>
</div>
The jQuery code is at the bottom of page index.php..
You need to correctly time your plugin initialization.
First forget about document ready and window load, they will not work correctly with jQuery Mobile application (usually they trigger before jQuery Mobile content is successfully enhanced).
Instead you should learn how to use jQuery Mobile page events, for example pageinit event exists to replace document ready.
Read more about it here.
Now regarding your main problem, your plugin must be initialized during the pageshow event. A lot of visual plugins (carousels, charts ..) require correct page height. When working with jQuery Mobile page height is correctly calculated only during pageshow event, it will be 0 in any other case.
Page event initialization order can be found here.