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>
Related
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.)
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
This question already has answers here:
PHP parse/syntax errors; and how to solve them
(20 answers)
Closed 5 years ago.
Hi i am very new to PHP and Bootstrap. I developed a E-commerce website using php and Bootstrap.This application just adds and removes products to and fro into cart and also calculate the total price of all products and if a user have a coupon he can able to apply it 'off30' so,he will get a 30% discount on total price.I am going through error as Parse error: syntax error, unexpected end of file pointing the last line of below code. please help me to solve this error.
<?php
session_start();
error_reporting("E_ALL");
require_once("dbcontroller.php");
$conn = connectDB();
if(!empty($_GET["action"])) {
//echo $_GET["action"];
switch($_GET["action"]) {
case "add":
if(!empty($_POST["quantity"])) {
$productByCode = mysqli_query($conn,"SELECT * FROM tblproduct WHERE code='" . $_GET["code"] . "'");
$products = mysqli_fetch_array($productByCode);
$itemArray = array($products["code"]=>array('name'=>$products["name"], 'code'=>$products["code"], 'quantity'=>$_POST["quantity"], 'price'=>$products["price"]));
if(!empty($_SESSION["cart_item"])) {
if(in_array($products["code"],array_keys($_SESSION["cart_item"]))) {
foreach($_SESSION["cart_item"] as $k => $v) {
if($products[0]["code"] == $k) {
if(empty($_SESSION["cart_item"][$k]["quantity"])) {
$_SESSION["cart_item"][$k]["quantity"] = 0;
}
$_SESSION["cart_item"][$k]["quantity"] += $_POST["quantity"];
}
}
} else {
$_SESSION["cart_item"] = array_merge($_SESSION["cart_item"],$itemArray);
}
} else {
$_SESSION["cart_item"] = $itemArray;
}
}
break;
case "remove":
if(!empty($_SESSION["cart_item"])) {
foreach($_SESSION["cart_item"] as $k => $v) {
if($_GET["code"] == $k)
unset($_SESSION["cart_item"][$k]);
if(empty($_SESSION["cart_item"]))
unset($_SESSION["cart_item"]);
}
}
break;
case "empty":
unset($_SESSION["cart_item"]);
break;
}
}
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$coupon = $_POST["coupon"];
$total = $_POST["total"];
if($coupon == "off30"){
$disc_item_total = $total*0.7;
}
else{
$disc_item_total = $total;
}
}
?>
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>All In One</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="brand">All In One</div>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="index.html">Business Casual</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>
Home
</li>
<li>
About
</li>
<li>
Blog
</li>
<li>
<a id="btnEmpty" href="about.php?action=empty">Empty Cart</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<?php
if(isset($_SESSION["cart_item"])){
$item_total = 0;
?>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">
<strong>Products</strong>in Cart
</h2>
<hr>
</div>
<div class="col-md-6">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Code</th>
<th>Quantity</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($_SESSION["cart_item"] as $item)
{
?>
<tr>
<td><strong><?php echo $item["name"]; ?></strong></td>
<td > <?php echo $item["code"]; ?></td>
<td > <?php echo $item["quantity"]; ?></td>
<td > <?php echo "Rs.".$item["price"]; ?></td>
<td > Remove Item</td>
</tr>
<?php
$item_total += ($item["price"]*$item["quantity"]);
}
?>
<tr>
<td colspan="3" align=right>Total:</td>
<td colspan="3"><b>Rs.=<?php $item_total;?></b></td>
</tr>
<tr>
<td colspan="3" align=right>Apply Coupon:</td>
<td>
<form action="" method="post">
<input type="text" id="coupon" name="coupon" value=""/>
<input type="hidden" name="total" value="<?php $item_total;?>">
</td>
<td>
<button type="submit" >Apply</button>
</form>
</td>
</tr>
<tr>
<td align=right colspan="3"> Discounted Amount:</td>
<td colspan="3"><b><?php "=Rs.".$disc_item_total; ?></b></td>
</tr>
</tbody>
<!--<?php echo $disc_item_total; ?>-->
</table>
<?php
}
?>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">
<strong>Products</strong>
</h2>
<hr>
</div>
<?php
$product_array = mysqli_query($conn,"SELECT * FROM tblproduct ORDER BY id ASC");
//echo mysqli_num_rows($product_array);
if (!empty($product_array)) {
while($products = mysqli_fetch_array($product_array)){
?>
<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<form method="post" action="about.php?action=add&code=<?php echo $products["code"]; ?>">
<div class="item active">
<img class="img-responsive img-full" src="img/a1.png" alt="">
</div>
<div class="caption">
<h4 class="pull-right"><?php echo "$".$products["price"]; ?></h4>
<h4><?php echo $products["name"]; ?></h4>
<div><input type="text" name="quantity" value="1" size="2" />
<p>
<input type="submit" value="Add to cart" class="btn btn-info" /></div>
</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- /.container -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The if(!empty($product_array)) and while($products = .....) loops are not closed. It might be a good idea to start indenting your code so that way you can see when something is off, it really help keep track of opening and closing tags.
I have made a website with bootstrap framework. In this website I load a table with records of the database, I using php for this.
My question is: php is the best way to load a data on the table or there are a better option?
Also when it's load the data in the website, first it show the text without format and after 1 second show with the css styles :(
This is the code:
<!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>AddCloud - Edicions</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap-table/dist/bootstrap-table.css">
</head>
<body>
<?php
session_start();
if(isset($_SESSION['username']) and $_SESSION['username'] <> ''){
?>
<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="#defaultNavbar1"><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="http://www.addvantage.es"><font color=#8abe44>AddCloud</font></a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="active">Edicions<span class="sr-only">(current)</span></li>
<li>Productes</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><span class="glyphicon glyphicon-user"></span> <?php echo $_SESSION['username'] ?>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon glyphicon-wrench"></span> preferències</li>
<li><span class="glyphicon glyphicon-lock"></span> canviar password</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-log-out"></span> log out</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">Miquel Alimentació</h1>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row text-center">
<div class="col-md-6 col-md-offset-3"><h3>Edició 12</h3></div>
</div>
<hr>
<div class="row">
<?php
// Conexió a la base de dades
include("connect.php");
$conn = Conectarse("localhost", "5432", "dbname", "dbuser", "dbpass");
//query
$query = "SELECT * FROM produccion.ma_origen ORDER BY id_articulo ASC";
$result = pg_query($conn, $query);
//se despliega el resultado
echo "<table id='table'
data-toggle='table'
data-toolbar='#toolbar'
data-show-refresh='true'
data-show-toggle='true'
data-sort-name='name'
data-sort-order='desc'
data-show-columns='true'
data-pagination='true'
data-search='true'
data-click-to-select='true'>";
echo "<thead class='thead-inverse'>";
echo "<tr>";
echo "<th data id='seleccion' data-switchable='false' data-checkbox='true'></th>";
echo "<th data id='pagina' data-sortable='true'>pagina</th>";
echo "<th data id='codigo' data-sortable='true' data-switchable='false'>codigo</th>";
echo "<th data id='descripcion' data-sortable='true' data-switchable='false'>descripcion</th>";
echo "<th data id='pvp-cat' data-sortable='true'>pvp-cat</th>";
echo "<th data id='pvp-lev' data-sortable='true'>pvp-lev</th>";
echo "<th data id='pvp-and' data-sortable='true'>pvp-and</th>";
echo "<th data id='pvp-cen' data-sortable='true'>pvp-cen</th>";
echo "<th data id='pvp-nor' data-sortable='true'>pvp-nor</th>";
echo "<th data id='pvp-vas' data-sortable='true'>pvp-vas</th>";
echo "<th data id='fecha-mod' data-sortable='true'>fecha-mod</th>";
echo "<th data id='user' data-sortable='true' data-visible='false'>user</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while ($row = pg_fetch_row($result)){
echo "<tr>";
echo "<td></td>";
echo "<td>$row[2]></td>";
echo "<td>$row[3]</td>";
echo "<td>$row[4]</td>";
echo "<td>$row[5]</td>";
echo "<td>$row[6]</td>";
echo "<td>$row[7]></td>";
echo "<td>$row[8]</td>";
echo "<td>$row[9]</td>";
echo "<td>$row[10]</td>";
echo "<td>$row[11]</td>";
echo "<td>$row[12]</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
?>
</div>
</div>
<hr>
<div class="row">
<div class="text-center col-md-6 col-md-offset-3">
<p>Copyright © 2016 · All Rights Reserved · <a href="http://www.addvantage.es/" >http://www.addvantage.es</a></p>
</div>
</div>
<hr>
</div>
<script>
$("td").dblclick(function(){
alert("The paragraph was double-clicked");
});
</script>
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap-table/dist/bootstrap-table.js"></script>
<?php
} else{
?><p>La sesión no está activa, por favor ingrese aquí</p>
<?php
}?>
</body>
</html>
Please Could you help me with this issues?
Thanks!
As for your question:
"My question is: php is the best way to load a data on the table or there are a better option?"
A: If you are loading dynamic data that is retrieved from a source (eg: database or a file), then the best way (or the only way) to do this is through a scripting language like PHP as you have mentioned.
Get your data with Ajax, and using .append()* function (jQuery), fill the table on $(document).ready() or any other triggered event.
*
jQuery.each(data, function(index, value) {
$("#table_div").append("<tr><td>" + value + "</td></tr>");
});
You can check the example below.
var mydata = [{"Nome":"",
"Cognome":"",
"DataN":"0000-00-00",
"Provincia":"",
"Comune":"",
"CAP":"",
"Indirizzo":"",
"Fisso":"",
"Mobile":"",
"Note":""},
{"Nome":"Federico",
"Cognome":"Lupieri",
"DataN":"2015-09-16",
"Provincia":"",
"Comune":"",
"CAP":"34170",
"Indirizzo":"Via Ascoli 1",
"Fisso":"00112233445566",
"Mobile":"00112233445566",
"Note":"Vediamo se funziona questo"}];
$(document).ready(function(){
$.ajax({
url: '/echo/json/',
dataType: 'json',
success: function(data) {
//alert('done');
$('#clienti').bootstrapTable({
data: mydata
});
},
error: function(e) {
console.log(e.responseText);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="display table table-bordered" id="clienti">
<thead>
<tr>
<th data-field="Nome">Nome</th>
<th data-field="Cognome">Cognome</th>
<th data-field="DataN">Data Nascita</th>
<th data-field="Provincia">Provincia</th>
<th data-field="Comune">Comune</th>
<th data-field="CAP">CAP</th>
<th data-field="Indirizzo">Indirizzo</th>
<th data-field="Fisso">Fisso</th>
<th data-field="Mobile">Cellulare</th>
<th data-field="Note">Note</th>
</tr>
</thead>
</table>
Get your data with Ajax and then fill your table directly, so any data that will be seen on website will be sorted in the table.
I fetched record from mysql database when i enter any keyword in search box.
up to this everything run properly and also shows result of that particular keyword. My query is the fetched result will shows just below the search box instead of that i should show results on popup and the popup should be responsive also.
plz suggest me,
Below is the code
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="pt" dir="ltr"><head><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="font-awesome-4.3.0/css/font-awesome.min.css">
<!-- JQUERY FROM GOOGLE API -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#lets_search").bind('submit',function() {
var value = $('#str').val();
$.post('db_query.php',{value:value}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script></head> <body>
<div style="text-align:center;">
<form id="lets_search" action="" >
Search:<input type="text" name="str" id="str">
<input type="submit" value="send" name="send" id="send">
</form>
<div id="search_results"></div>
</div></body></html>
db_query.php
<?php $con=mysqli_connect("localhost","root", "","u871197953_shope") or die("Error connecting to database: ".mysql_error()); mysqli_select_db($con,"u871197953_shope") or die(mysql_error()); $query = mysqli_query($con,"select feed_product_image,feed_product_name,price,deeplink,image from wp_pc_products_merchants e,wp_pc_products w where e.slug=w.id_merchant and feed_product_name LIKE '%".$_POST['value']."%' LIMIT 20"); if(mysqli_num_rows($query) > 0)
{
?>
<div class="input-group col-sm-10 modal-box" id="popup" title="Search Results" style="text-align:center;margin-top:10px;">
<table class="table table-hover" style="text-align:center;">
<thead>
<tr bgcolor="#1E90FF" >
<th>Products</th>
<th style="text-align:center;">Details</th>
<th>Retailers</th>
<th>Price</th>
<th>Buy</th>
</tr>
</thead>
<tbody>
<?php
while($results = mysqli_fetch_array($query))
{ ?>
<tr>
<td><img src = "<?php echo $results['feed_product_image']; ?>" style="object-fit:contain;height:60px;width:80px;" /></td>
<td><?php echo "<p style='font-size:12px;'>".$results['feed_product_name']. "</p>" ; ?></td>
<td><img src = "<?php echo $results['image']; ?>" style="background-size:contain;height:30px;width:100px;" /></td>
<td><?php echo '<i class="fa fa-inr"> '.$results['price']. '</i>'.".00" ; ?></td>
<td>Buy now</td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
}
else
{ // if there is no matching rows do following
echo "No results found...";
} ?>
By default bootstrap popup/modal window is responsive. Dont worry about that.
Add modal window html codes in yor page.
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
After loading the result as add the result in model body
$('#myModal .modal-body').html(data);
Then trigger model using:
$('#myModal').modal(options);
- Use standard bootstrap options in the modal function.