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><a href = "#" data-role = "update" data-id ="<?php echo $row['id_linea']; ?>">Update</a></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">
<a href="#" id="save" class="btn btn-primary pull-right">Update</a>
<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
