title: Update data using jquery, ajax, php, mysqli and bootstrap modal
body: <p>First, sorry for the bad english but is not my native language.</p>
  
  <p>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.</p>
  
  <p>Furthermore, i have trouble with the color data type because this type can't pass like color, only pass like text type. </p>
  
  <p>So, can you help me? Thanks.</p>
  
  <p>I try to explain this for understand better the problem:
  <a href="https://i.stack.imgur.com/W4g0y.png" rel="nofollow noreferrer">This is the list of elements originals</a></p>
  
  <p>Next, when i try to update:
  <a href="https://i.stack.imgur.com/UQPDM.png" rel="nofollow noreferrer">This is the camps that i want to update</a></p>
  
  <p>Finally, update but only on table not mysql:
  <a href="https://i.stack.imgur.com/R5xlR.png" rel="nofollow noreferrer">Last step</a></p>
  
  <p>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?.</p>
  
  <p>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</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
    &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;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"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the code interface of update data:</p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  include('estandar.html');
  include('coneccion.php');
  session_start();
  if ($_SESSION['correcto']==1){
   $contador = 0;
  ?&gt;
  
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;Editar linea TransValparaiso&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body class="bg-light"&gt;
   &lt;nav class="navbar navbar-light sticky-top flex-md-nowrap p-0" style="background-color: #F38E0E"&gt;
        &lt;a class="navbar-brand col-sm-3 col-md-2 mr-0" href="transvalparaiso_ingreso_administrador_general2.php"&gt;Transporte&lt;br&gt;Metropolitano&lt;br&gt;Valparaiso&lt;/a&gt;
      &lt;/nav&gt;
        &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
  
  &lt;?php
  //------------------------------------------------------------------BARRA DE OPCIONES--------------------------------------------------------------------------
  include('barra_opciones_transvalparaiso.php');
  //---------------------------------------------------------Editar LINEA-------------------------------------------------------------------------------
  ?&gt;
  
          &lt;main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"&gt;
            &lt;h2&gt;Seleccione la línea que desea editar&lt;/h2&gt;
            &lt;div class="table-responsive"&gt;
              &lt;table class="table table-striped table-sm"&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    
                    &lt;th&gt;&lt;nav class="navbar sticky top navbar-expand-sm navbar-light"&gt;Nombre Linea&lt;/nav&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;nav class="navbar sticky top navbar-expand-sm navbar-light"&gt;Rut Linea&lt;/nav&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;nav class="navbar sticky top navbar-expand-sm navbar-light"&gt;Color Principal&lt;/nav&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;nav class="navbar sticky top navbar-expand-sm navbar-light"&gt;Color Secundario&lt;/nav&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;nav class="navbar sticky top navbar-expand-sm navbar-light"&gt;Acción&lt;/nav&gt;&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
  
                &lt;?php
                $sql="SELECT * FROM `linea` WHERE 1";
                $resultado=mysqli_query($conn, $sql);
                while($row=mysqli_fetch_array($resultado)){
                 $contador=$contador+1;
                ?&gt;
  
                  &lt;tr id ="&lt;?php echo $row['id_linea']; ?&gt;"&gt;
                    &lt;td data-target = "nombre_linea"&gt;&lt;?php echo $row['nombre_linea']; ?&gt;&lt;/td&gt;
                    &lt;td data-target = "rut_linea"&gt;&lt;?php echo $row['rut_linea']; ?&gt;&lt;/td&gt;
                    &lt;td data-target = "color_principal_linea"&gt;&lt;nav class="navbar sticky top navbar-expand-sm navbar-light" style="background-color:&lt;?php echo $row['color_principal_linea']; ?&gt;;"&lt;/nav&gt;&lt;/td&gt;
                    &lt;td data-target = "color_secundario_linea"&gt;&lt;nav class="navbar sticky top navbar-expand-sm navbar-light" style="background-color:&lt;?php echo $row['color_secundario_linea']; ?&gt;;"&lt;/nav&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;a href = "#" data-role = "update" data-id ="&lt;?php echo $row['id_linea']; ?&gt;"&gt;Update&lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
                &lt;?php
                }
                ?&gt;
  
                &lt;/tbody&gt;
              &lt;/table&gt;
            &lt;/div&gt;
                  &lt;!-- Modal --&gt;
              &lt;div id="myModal" class="modal fade" role="dialog"&gt;
                &lt;div class="modal-dialog"&gt;
  
          &lt;!-- Modal content--&gt;
                  &lt;div class="modal-content"&gt;
                    &lt;div class="modal-header"&gt;
                        &lt;h4 class="modal-title"&gt;Actualizar&lt;/h4&gt;
                          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                          
                        &lt;/div&gt;
                        &lt;div class="modal-body"&gt;
                          &lt;div class="form-group"&gt;
                            &lt;label&gt;Nombre Linea&lt;/label&gt;
                            &lt;input type="text" id="nombre_linea" name ="nombre_linea" class="form-control"&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                            &lt;label&gt;Rut linea&lt;/label&gt;
                            &lt;input type="number" id="rut_linea" name = "rut_linea" class="form-control"&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                            &lt;label&gt;Color Principal&lt;/label&gt;
                            &lt;input type="color" id="color_principal1_linea" name = "color_principal1_linea" class="form-control"&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                            &lt;label&gt;Color Secundario&lt;/label&gt;
                            &lt;input type="color" id="color_secundario2_linea" name = color_secundario2_linea class="form-control"&gt;
                          &lt;/div&gt;
                             &lt;input type="hidden" id="userId" class="form-control"&gt;
  
                        &lt;/div&gt;
                         &lt;div class="modal-footer"&gt;
                          &lt;a href="#" id="save" class="btn btn-primary pull-right"&gt;Update&lt;/a&gt;
                          &lt;button type="button" class="btn btn-default pull-left" data-dismiss="modal"&gt;Close&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
  
                    &lt;/div&gt;
                  &lt;/div&gt;
  
          &lt;/main&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;script&gt;
  
    $(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'); 
                           }
            });
         });
    });
    &lt;/script&gt;
  &lt;/html&gt;
  &lt;?php
  }
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is coneccion.php:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?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";
  }
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And the last code is for update on mysqli:</p>
  
  <p>The name is: connection.php</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?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';
   }
  
  }
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I follow this example for the code:
  <a href="https://youtu.be/aujNp92p0Uc" rel="nofollow noreferrer">Example for implement modal</a></p>