Submit data from loop Ajax

Question

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';  
		 }

  ?>

You're using the same IDs in each row. $("#client") will always select the first one. Use classes instead, and $(this).closest("tr").find(".client") to select the input in the same row as the button. — Barmar
– Barmar, Commented Nov 27, 2016 at 15:42
$(document).on('click', '.btn_add', function(){ var client = $(this).closest("tr").find(".client_add").text(); var contact = $('.contact_add').text(); var note = $('.note_add').text(); var status = $('.status_add').val(); var id_table = $('.id_table_add').text(); — Stéphane Donchery
– Stéphane Donchery, Commented Nov 27, 2016 at 16:04
You are calling ajax, since ajax is async and multiple async calls can not be executed. you have to set async = false on on second ajax call. You can check this link stackoverflow.com/questions/1639555/… — Amir Hossain
– Amir Hossain, Commented Nov 27, 2016 at 16:14

Stéphane Donchery · Accepted Answer · 2016-11-27 17:00:58Z

0

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();

edited Nov 27, 2016 at 17:00

answered Nov 27, 2016 at 16:08

Stéphane Donchery

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Submit data from loop Ajax

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related