How to make that when I click on a record of a table I update the data of a form with the corresponding registration data with ajax?

Question

How to make that when I click on a record of a table I update the data of a form with the corresponding registration data with ajax?

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have a table in which all the records of a table of the bd are displayed and in which when clicking, the information of the selected record must be shown in the form, since in this form the first record is always shown, besides everything on the page keeps working perfectly

This is my page and what I mean to keep working the rest of the page is the main menu are dropdowns which allows you to select a file, the button of the 3 bars is to compact the main menu, and where it says the name martin damian and a green dot is to close session, in addition to the NEW, EDIT and DELETE buttons continue to work correctly

---- CODE SELLERS TABLE -----

<div class="box-body" style="height:380px; overflow:auto">
    <table id="example1" class="table table-bordered table-striped" >
        <thead>
            <tr>
                <th>No. Vendedor</th>
                <th>Nombre</th>  
                <th>RFC</th>
            </tr>
        </thead>
        <tbody>
            <?php
            while($fila=sqlsrv_fetch_array($consultaVendedores)){
                $numVende=$fila['no_vende'];
                $nom=$fila['nombre'];
                $rfc=$fila['rfc'];
            ?>
            <tr id="fila" onclick="alerta(<?php echo $numVende;?>);"  >
                <th id="no_vende" ><?php echo $numVende; ?></th>
                <th id="nombre"><?php echo $nom; ?></th>
                <th id="rfc"><?php echo $rfc; ?></th>
            </tr>       
            <?php 
                }
            ?>      
        </tbody>
    </table>
</div>

---- CODE FUNCTION ALERT ----

function alerta(id){
   $("#info").load('datosVende.php?id='+id);
}

the div info is everything in the center

javascript html php ajax

asked by Damian 13.10.2016 в 01:03

source

3 answers

Problem with DataAnnotation Why does not the file_field of my form build me? Rails

score 0 · Answer 1

To each element of the table, you should assign it a ID or a class , that will make it easier to know the field by which to filter in the database.

Then by JQUERY , you could do the reading of the identifier, to open the window you want

score 0 · Answer 2

I see that you have php in embedded in your html code but you have a function that seems to be using jQuery. I can not help you doing it with php but I know how to do it in jQuery. It would be better if you do not id="row" the rows that you create dynamically through php because an id is unique. you'd better put it as a class.

First, you should do a function that when clicking the seller makes a call to the server with ajax or through a promise and filter the results to only have the one that corresponds to the id that you have selected. I'm going to use the vendor's rfc as an example to identify one of your entire database.

It could be something like this:

$('tr.list').click(function(e){ 
    var vendedorSeleccionado = $(e.target).find('th.rfc').text(); //esto será un string
    //aquí llamas al servidor, bajas la info de los vendedores, filtras y el vendedor correcto lo envías a otra función encargada de desplegar la info        
    $.Promise($.post({url: 'endpoint/data/base'})).then(function(data){
                //data debería ser un array de objetos
                data.map(function(item, index){
                    if( item[rfc] === vendedorSeleccionado)
                    { desplegarInfo(item); }
                });
      });
 });

    function desplegarInfo(vendedor){
     //aquí podrías tener seleccionados los elementos donde vas a desplegar 
    //la info en un array, que creo que son inputs (parece que en 
    //realidad es la interfaz de registro de vendedores, donde se puede editar
    // su info, así que recomiendo que afectes su placeholder para que te 
    //aparezca esa info por default. si el orden de los elementos del array es 
    //el mismo que la info que viene en el objeto 'vendedor' que será pasado a 
    //la función puedes hacerlo a través de un loop (incluso si las claves 
    //tienen el mismo nombre que el id de los elementos en el array, pero 
    //tendrás que relacionarlos primero en ese caso
       var elementosDondeDesplegar = [$('input#nombreVendedor'), $('input#noVendedor'), $('input#rfcVendedor'), .... todos los elementos que necesites];
       Object.keys(vendedor).forEach(function(item, index){
            var currentElement = elementosDondeDesplegar[index];
            //currentElement siempre será un elemento distinto del array, cambiando progresivamente. vendedor[item] te va a dar el valor de la correspondiente key del objeto. que si está en el mismo orden que el array de elementos lo pondrá como el valor del placeholder.
            currentElement.attr('placeholder', vendedor[item]);
       });
    }

Something like that should be the functions that help you. I hope I serve you.

score 0 · Answer 3

Well what you can do is the class=box-body change it by id=box-body and with AJAX send a PHP call to build the table again with the query of the selected record. You enter the table made in PHP with the following code in AJAX :

peticion.onreadystatechange = function( ) {
  if( this.readyState == 4 && this.status == 200 )
    document.getElementById( "box-body" ).innerHTML = this.responseText;
};

peticion.open( "GET", url_php, true);
peticion.send( );