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>
Related
I got some problem using jquery for displaying existing data when crud edit button is click. The bootstrap popup windows is shown if I remove $('#catid).val(data[0]); and $('#catname).val(data[1]); from the code.If add back the code, the bootstrap popup windows not showing without error. Not sure it is the script problem or the form problem. Anyone can help! Thanks.
enter code here
<!-- Edit Model -->
<div class="modal fade" id="editcatmodel" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="hidden" name="catid" id="catid">
<div class="form-group">
<label>Category Name</label>
<input type="text" name="catname" id="catname" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">save</button>
</div>
</div>
</div>
</div>
<!-- /.modal -->
<!-- Main screen display the crud data with edit button -->
<div class="container">
<table class="table">
<thead>
<th>ID</th>
<th>Category</th>
<th>Action</th>
</thead>
<tbody>
<?php
require_once 'source/db_connect.php';
$sql = "SELECT * FROM category";
$result = mysqli_query($link, $sql);
if ($result->num_rows > 0) {
//output data of each row
while ($row = $result->fetch_assoc()) {
?>
<tr>
<td><?php echo $row['catid']; ?></td>
<td><?php echo $row['catname']; ?> </td>
<td> <button type="button" class="btn btn-primary editcatbtn">edit</button> </td>
</tr>
<?php }
}
?>
<!-- script display the modal -->
<script>
$(document).ready(function () {
$(' .editcatbtn').on('click', function() {
$('#editcatmodel').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $(this).text();
}).get();
console.log(data);
$('#catid).val(data[0]);
$('#catname).val(data[1]);
});
});
</script>
So I was developing some crud application with CodeIgniter Framework. But I am facing issues while retrieving data from the database. I am getting a 404 Not Found error for the AJAX function. The function is where it should be but I can't seem to find why it's giving me an error.
Please find the following code for the files and let me know if I am doing anything wrong here.
package_view.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Package List</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap4.css">
</head>
<body>
<div class="container">
<!-- Page Heading -->
<div class="row">
<div class="col-12">
<div class="col-md-12">
<h1>Package
<small>List</small>
<div class="float-right"><span class="fa fa-plus"></span> Add New</div>
</h1>
</div>
<table class="table table-striped" id="mydata">
<thead>
<tr>
<th>Package ID</th>
<th>Test Quantity</th>
<th>Price</th>
<th style="text-align: right;">Actions</th>
</tr>
</thead>
<tbody id="show_data">
</tbody>
</table>
</div>
</div>
</div>
<!-- MODAL ADD -->
<form>
<div class="modal fade" id="Modal_Add" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add New Package</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-md-2 col-form-label">Test Quantity</label>
<div class="col-md-10">
<input type="text" name="test_quantity" id="test_quantity" class="form-control" placeholder="Test Quantity">
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label">Price</label>
<div class="col-md-10">
<input type="text" name="price" id="price" class="form-control" placeholder="Price">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" type="submit" id="btn_save" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</form>
<!--END MODAL ADD-->
<!-- MODAL EDIT -->
<form>
<div class="modal fade" id="Modal_Edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Package</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-md-2 col-form-label">Package ID</label>
<div class="col-md-10">
<input type="text" name="pkg_id_edit" id="pkg_id_edit" class="form-control" placeholder="Package ID" readonly>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label">Test Quantity</label>
<div class="col-md-10">
<input type="text" name="test_quantity_edit" id="test_quantity_edit" class="form-control" placeholder="Test Quantity">
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label">Price</label>
<div class="col-md-10">
<input type="text" name="price_edit" id="price_edit" class="form-control" placeholder="Price">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" type="submit" id="btn_update" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</form>
<!--END MODAL EDIT-->
<!--MODAL DELETE-->
<form>
<div class="modal fade" id="Modal_Delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Package</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<strong>Are you sure to delete this record?</strong>
</div>
<div class="modal-footer">
<input type="hidden" name="pkg_id_delete" id="pkg_id_delete" class="form-control">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" type="submit" id="btn_delete" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
</form>
<!--END MODAL DELETE-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/dataTables.bootstrap4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
show_package(); //call function show all package
$('#mydata').dataTable();
//function show all package
function show_package(){
$.ajax({
type : 'ajax',
url : '<?php echo site_url('Package/package_data')?>',
async : true,
dataType : 'json',
success : function(data){
var html = '';
var i;
for(i=0; i<data.length; i++){
html += '<tr>'+
'<td>'+data[i].pkg_id+'</td>'+
'<td>'+data[i].test_quantity+'</td>'+
'<td>'+data[i].price+'</td>'+
'<td style="text-align:right;">'+
'Edit'+' '+
'Delete'+
'</td>'+
'</tr>';
}
$('#show_data').html(html);
}
});
}
//Save package
$('#btn_save').on('click',function(){
var pkg_id = $('#pkg_id').val();
var test_quantity = $('#test_quantity').val();
var price = $('#price').val();
$.ajax({
type : "POST",
url : "<?php echo site_url('Package/save')?>",
dataType : "JSON",
data : {pkg_id:pkg_id , test_quantity:test_quantity, price:price},
success: function(data){
$('[name="pkg_id"]').val("");
$('[name="test_quantity"]').val("");
$('[name="price"]').val("");
$('#Modal_Add').modal('hide');
show_package();
}
});
return false;
});
//get data for update record
$('#show_data').on('click','.item_edit',function(){
var pkg_id = $(this).data('pkg_id');
var test_quantity = $(this).data('test_quantity');
var price = $(this).data('price');
$('#Modal_Edit').modal('show');
$('[name="pkg_id_edit"]').val(pkg_id);
$('[name="test_quantity_edit"]').val(test_quantity);
$('[name="price_edit"]').val(price);
});
//update record to database
$('#btn_update').on('click',function(){
var pkg_id = $('#pkg_id_edit').val();
var test_quantity = $('#test_quantity_edit').val();
var price = $('#price_edit').val();
$.ajax({
type : "POST",
url : "<?php echo site_url('Package/update')?>",
dataType : "JSON",
data : {pkg_id:pkg_id , test_quantity:test_quantity, price:price},
success: function(data){
$('[name="pkg_id_edit"]').val("");
$('[name="test_quantity_edit"]').val("");
$('[name="price_edit"]').val("");
$('#Modal_Edit').modal('hide');
show_package();
}
});
return false;
});
//get data for delete record
$('#show_data').on('click','.item_delete',function(){
var pkg_id = $(this).data('pkg_id');
$('#Modal_Delete').modal('show');
$('[name="pkg_id_delete"]').val(pkg_id);
});
//delete record to database
$('#btn_delete').on('click',function(){
var pkg_id = $('#pkg_id_delete').val();
$.ajax({
type : "POST",
url : "<?php echo site_url('Package/delete')?>",
dataType : "JSON",
data : {pkg_id:pkg_id},
success: function(data){
$('[name="pkg_id_delete"]').val("");
$('#Modal_Delete').modal('hide');
show_package();
}
});
return false;
});
});
</script>
</body>
</html>
Packages.php
<?php
class Packages extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->model('package_model');
}
function index(){
$this->load->view('package_view');
}
function package_data(){
$data=$this->package_model->package_list();
echo json_encode($data);
}
function save(){
$data=$this->package_model->save_package();
echo json_encode($data);
}
function update(){
$data=$this->package_model->update_package();
echo json_encode($data);
}
function delete(){
$data=$this->package_model->delete_package();
echo json_encode($data);
}
}
and
package_model.php
<?php
class package_model extends CI_Model{
function package_list(){
$hasil=$this->db->get('tblexampackages');
return $hasil->result();
}
function save_package(){
$data = array(
'pkg_id' => $this->input->post('pkg_id'),
'test_quantity' => $this->input->post('test_quantity'),
'price' => $this->input->post('price'),
);
$result=$this->db->insert('tblexampackages',$data);
return $result;
}
function update_package(){
$pkg_id=$this->input->post('pkg_id');
$test_quantity=$this->input->post('test_quantity');
$price=$this->input->post('price');
$this->db->set('price', $price);
$this->db->set('test_quantity', $test_quantity);
$this->db->where('pkg_id', $pkg_id);
$result=$this->db->update('tblexampackages');
return $result;
}
function delete_package(){
$pkg_id=$this->input->post('pkg_id');
$this->db->where('pkg_id', $pkg_id);
$result=$this->db->delete('tblexampackages');
return $result;
}
}
Other files are autoload.php, config.php and database.php which are configured properly. Please tell me where I am going wrong here.
As for database, MySQL connectivity is good and the table named tblexampackages only has 3 Columns named pkg_id, test_quantity and price.
Thanks.
Your controller is Packages, you're trying to access Package... Edit this line from
url : '<?php echo site_url('Package/package_data')?>', //old
url : "<?php echo site_url('Packages/package_data')?>" //new
After which, edit your package_list to something like this
$query = $this->db->get('tbl_name');
return $query->result_array();
in your Ajax function show_package() you have:
url : '<?php echo site_url('Package/package_data')?>',
it should be
url : '<?php echo site_url('Packages/package_data')?>',
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
As you can see below, I have a php-generated table with a td that contains both edit and delete anchors. I put the $data['id'] inside the data-id attribute of the anchor and I pass it to the modal via jquery. However, the ID of the article is not being displayed on the modal. Can someone tell what is wrong with my codes? Is it the php, the html, or the jquery? Thanks!
<?php
require "../connection.php";
$query = mysqli_query($conn, "SELECT * FROM `articles`");
while($data = mysqli_fetch_array($query)) {
echo '<tr>';
echo '<th scope="row">'.$data['id'].'</th>';
echo '<td><div align="center">EditDelete</div></td>';
echo '</tr>';
}
?>
PHP-GENERATED TABLE
<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Please save your changes after editing the article.</p>
<form id="myForm">
<div class="form-group">
<label>ID</label>
<input type="text" value="" name="articleId" id="articleId" class="form-control">
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
HTML MODAL
$('#myModal').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=e.relatedTarget;//this holds the element who called the modal
//we get details from attributes
var myArticleId=$(opener).attr('data-id');
//set what we got to our form
$('#myForm').find('[name="articleId"]').val(myArticleId);
});
JQUERY
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Summary</th>
<th>Content</th>
<th><div align="center">Date Published</div></th>
<th><div align="center">Date Last Edited</div></th>
<th><div align="center">Action</div></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><div align="center">EditDelete</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td><div align="center">EditDelete</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td><div align="center">EditDelete</div>
</td>
</tr>
</tbody>
</table>
INSPECTED PAGE - TABLE
$('#articleEditModal').on('show.bs.modal', function (e) {
An error shows on this line above:
Uncaught ReferenceError: $ is not defined
at cms.php:162
var opener = $(e.relatedTarget); instead of var opener=e.relatedTarget;
Reference Bootstrap Modal
Hope this helps!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
<table>
<tr>
<th scope="row">2</th>
<td>
Edit
Delete
</td>
</tr>
</table>
<!-- Modal-->
<div id="articleEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Please save your changes after editing the article.</p>
<form id="myForm">
<div class="form-group">
<label>ID</label>
<input type="text" value="" name="articleId" id="articleId" class="form-control">
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$('#articleEditModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var article_id = button.attr('data-article-id')
// take advantage of data attribute
// var article_id = button.data('article-id');
var modal = $(this)
modal.find('.modal-title').text('Article ' + article_id)
modal.find('.modal-body input').val(article_id)
})
</script>
// Sample php data
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
<?php
require "../connection.php";
$query = mysqli_query($conn, "SELECT * FROM `articles`");
while($data = mysqli_fetch_array($query)) {
echo '<tr>';
echo '<th scope="row">'.$data['id'].'</th>';
echo '<td><div align="center">EditDelete</div></td>';
echo '</tr>';
}
?>
<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Please save your changes after editing the article.</p>
<form id="myForm">
<div class="form-group">
<label>ID</label>
<input type="text" value="" name="articleId" id="articleId" class="form-control">
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<script>
$('#myModal').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=$(e.relatedTarget);//this holds the element who called the modal
//we get details from attributes
var myArticleId=$(opener).attr('data-id');
//set what we got to our form
$('#myForm').find('[name="articleId"]').val(myArticleId);
});
</script>
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.