Only the first button sends the data to my db. I have not figured out how to fix this problem... It need not be complicated, but I can't figure it out. Please help me, I have been searching for several days.
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX</title>
<link rel="stylesheet" href="css/bootstrap.mini.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.nice-select.js"></script>
<link href="css/nice-select.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container"><br/>
<div class="table-responsive">
<div id="live_data"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('select').niceSelect();
function fetch_data()
{
$.ajax({
url:"selecto.php",
method:"POST",
success:function(data){
$('#live_data').html(data);
}
});
}
fetch_data();
$(document).on('click', '.btn_add', function(){
var client = $('#client').text();
var contact = $('#contact').text();
var note = $('#note').text();
var status = $('#status').val();
var id_table = $('#id_table').text();
$.ajax({
url:"insert.php",
method:"POST",
data:{client:client, contact:contact, note:note, status:status, id_table:id_table},
dataType:"text",
success:function(data)
{
alert(data);
fetch_data();
}
})
});
function edit_data(id, text, column_name)
{
$.ajax({
url:"edit.php",
method:"POST",
data:{id:id, text:text, column_name:column_name},
dataType:"text",
success:function(data){
//alert(data);
}
});
}
$(document).on('keyup', '.client', function(){
var id = $(this).data("id1");
var client = $(this).text();
edit_data(id, client, "client");
});
$(document).on('keyup', '.contact', function(){
var id = $(this).data("id2");
var contact = $(this).text();
edit_data(id,contact, "contact");
});
$(document).on('keyup', '.note', function(){
var id = $(this).data("id3");
var note = $(this).text();
edit_data(id,note, "note");
});
$(document).on('change', '.status', function(){
var id = $(this).data("id4");
var status = $(this).val();
edit_data(id,status, "status");
console.log(status);
});
$(document).on('click', '.btn_delete', function(){
var id=$(this).data("id5");
if(confirm("Etes-vous sur de vouloir supprimer cette ligne ?"))
{
$.ajax({
url:"delete.php",
method:"POST",
data:{id:id},
dataType:"text",
success:function(data){
//alert(data);
fetch_data();
}
});
}
});
});
</script>selecto.php
<?php
// Connexion à la base de donnée
try{
$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
$db = new PDO('mysql:host=db413029631.db.1and1.com;dbname=db413029631', 'dbo413029631', 'N5frH7yg', $pdo_options);
$db->exec("SET NAMES utf8");
}
catch(Exception $e) {
die($e->getMessage());
}
?>
<?php
$reqTables = $db->query("SELECT id, name FROM PulseTables"); // Récupération de la liste des tables
$tableResult = $reqTables->fetchAll(PDO::FETCH_ASSOC); // On stock la liste des tables dans $tables
$reqTables->closeCursor();
$reqTasks = $db->query("SELECT id, id_table, client, contact, note, status FROM PulseTasks ORDER BY id DESC"); // Récupération de la liste des tâches
$result = $reqTasks->fetchAll(PDO::FETCH_ASSOC); // On stock la liste des tâches dans $tasks
$reqTasks->closeCursor();
?>
<?php foreach( $tableResult as $table){ ?>
<h2><?= $table["name"] ?></h2>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th style="display:none;"></th>
<th width="5%" contenteditable>id</th>
<th width="30%" contenteditable>client</th>
<th width="30%" contenteditable>contact</th>
<th width="15%" contenteditable>devis</th>
<th width="15%" contenteditable>statut</th>
<th width="5%"></th>
</tr>
<tr>
<td></td>
<td style="display:none;" id="id_table"><?= $table["id"] ?></td>
<td id="client" class="clientadd" contenteditable="true">+ Nouveau Projet</td>
<td id="contact" contenteditable></td>
<td id="note" contenteditable></td>
<td id="status">
<select name="devis" id="status" class="devis">
<option value="OK">VALIDER</option>
<option value="EN ATTENTE">EN ATTENTE</option>
<option value="VALIDER">VALIDER</option>
<option value="ANNULE">ANNULE</option>
<option value="PARTIEL">PARTIEL</option>
</select>
</td>
<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success btn_add" value="btn_add">+</button></td>
</tr>
<?php
foreach( $result as $row ){
if( $table['id'] !== $row['id_table'] ){
continue;
}
?>
<tr>
<td style="display:none;"></td>
<td width="5%"><?= $row["id"] ?></td>
<td width="30" class="client" data-id1="<?= $row["id"] ?>" contenteditable><span class="tabGreen"></span><?= $row["client"] ?></td>
<td width="30%" class="contact" data-id2="<?= $row["id"] ?>" contenteditable><?= $row["contact"] ?></td>
<td class="note" data-id3="<?= $row["id"] ?>" contenteditable ><?= $row["note"] ?></td>
<td width="15%" class="status">
<select data-id4="<?= $row["id"] ?>" name="status" id="status" class="status">
<option><?= $row["status"] ?></option>
<option class="status" value="EN ATTENTE">EN ATTENTE</option>
<option class="status" value="VALIDER">VALIDER</option>
<option class="status" value="ANNULE">ANNULE</option>
<option class="status" value="PARTIEL">PARTIEL</option>
</select>
</td>
<td width="5%"><button type="button" name="delete_btn" data-id5="<?= $row["id"] ?>" class="btn btn-xs btn-danger btn_delete">x</button></td>
</tr>
<?php } ?>
</table>
</div>
<br/>
<?php } ?>insert.php
<?php
header ('Content-type: text/html; charset=UTF-8');
?>
<?php
$connect = mysqli_connect("db413029631.db.1and1.com", "dbo413029631", "N5frH7yg", "db413029631");
$connect->set_charset('utf8');
$sql = "INSERT INTO PulseTasks (client, contact, note, status, id_table) VALUES('".$_POST["client"]."', '".$_POST["contact"]."', '".$_POST["note"]."', '".$_POST["status"]."', '".$_POST["id_table"]."')";
if(mysqli_query($connect, $sql))
{
echo 'Data Inserted';
}else{
echo 'Probleme';
}
?> </div>
Thank You !
$(document).on('click', '.btn_add', function(){
var client = $(this).closest(".formulaire").find('.client_add').text();
var contact = $(this).closest(".formulaire").find('.contact_add').text();
var note = $(this).closest(".formulaire").find('.note_add').text();
var status = $(this).closest(".formulaire").find('.status_add').val();
var id_table = $(this).closest(".formulaire").find('.id_table_add').text();</div>