7

Tengo una tabla donde coloco varios datos resultado de una consulta SQL, para cada registro que regrese una consulta coloco un botón para que muestre los datos en un form del registro que seleccioné hasta el momento sólo puedo recuperar un solo valor con este código, ¿cómo puedo recuperar los demás valores del registro que seleccioné?

$('#modalSi').on('show.bs.modal', function (e) {
    var id = $(e.relatedTarget).data().id;
    $(e.currentTarget).find('#txtNombre').val(id);
});

Éste es el enlace con que abro la ventana modal, a través del atributo data-id le paso el valor id que ha seleccionado, se pueden pasar más valores

<a href="#" id="link1" data-id="row.id" data-toggle="modal" data-target="#modalSi"><button type="button" class="btn btn-success">Si&nbsp;&nbsp;</button></a>

Y éste es el HTML:

<!--modal-->
<div class="modal fade bs-example-modal-lg" id="modalSi" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">                            
      <div class="modal-body">
        <!-- body panel -->
        <div id="panelNo" class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">Reporte de renovación </h3>
          </div>
          <div class="panel-body">
            <form class="form-horizontal">
              <div class="form-group">
                <label for="lblNombre" class="control-label col-sm-2">Nombre</label>
                <div class="input-group date col-sm-10">
                  <span class="input-group-addon">
                    <span class="glyphicon glyphicon-user"></span>
                  </span>
                  <input type="text" class="form-control" id="txtNombre" disabled>
                </div>
              </div>
              <div class="form-group">
                <label for="lblTelefono" class="control-label col-sm-2">Telefono</label>
                <div class="input-group date col-sm-10">
                  <span class="input-group-addon">
                    <span class="glyphicon glyphicon-phone"></span>
                  </span>
                  <input type="text" class="form-control" id="txtTelefono" disabled>
                </div>
              </div>
              <div class="form-group">
                <label for="lblFechaa" class="control-label col-sm-2">Fecha Activación</label>
                <div class="input-group date col-sm-10">
                  <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                  </span>
                  <input type="text" class="form-control" id="txtFechaa" disabled>
                </div>
              </div>
              <div class="form-group">
                <label for="lbltipoTramite" class="control-label col-sm-2">Opciones</label>
                <div class="input-group date col-sm-10">
                  <span class="input-group-addon">
                    <span class="glyphicon glyphicon-th-list"></span>
                  </span>
                  <select name="tipo" size="1" id="tipo" class="form-control">
                    <option value="">--Seleccionar--</option>
                    <option value="1">Buzón</option>
                    <option value="2">Fuera de servicio / número ha cambiado</option>
                    <option value="3">No contesta</option>
                  </select>
                </div>

              </div>

              <div class="form-group">
                <label class="control-label col-sm-2"></label>
                <div class="col-sm-10">
                  <input type="button" name="Submit" value="Guardar" id="btn-enviar" class="btn btn-success" />
                </div>

              </div>

            </form>
          </div>                                   
        </div>                            
      </div>
    </div>
    <!--modal-->
3

3 respuestas 3

3

Considerando que el link está dentro de una etiqueta td y esta dentro de una etiqueta tr que contiene el resto de celdas con sus valores: Te doy un ejemplo detallado de como obtendría todos los valores de una fila

<table>
  <tr>
    <td>Columna 1 1</td> 
    <td>Columna 1 2</td>  
    <td><a href="#"><button>Get Fila</button></a></td>
  </tr>
  <tr>
    <td>Columna 2 1</td>
    <td>Columna 2 2</td>
    <td><a href="#"><button>Get Fila</button></a></td>
  </tr>
</table>

En tu aplicación como estás utilizando JQuery, en el evento show.bs.modal que usás, podrías aplicar la función parent() dos veces.

var row= $(e.relatedTarget).parent().parent()

Eso te devolvería la fila en la que se encuentra el link que presionó el usuario. Con JQuery podés obtener todos los elementos que contiene esa fila, es decir, todas sus celdas(nivel 1) y el contenido de estas(nivel 2).

Para obtener todos los elementos hijos(en este ejemplo celdas) de la fila se puede utilizar la función children() de JQuery. Esta devolverá, en este caso, un array de elementos td

El recorrido de los elementos podés hacerlo con un each

row.children().each(function () {
  var celda= this;
  //Con $(celda).text() obtendrías el contenido de la celda que es lo que buscás 

});

El problema de esto es que en tu problema necesitás relacionar cada celda con un elemento del formulario. Seguramente hay alternativas mas elegantes pero voy a optar por la versión simple: recorrés cada posición del array manualmente

var celdas= row.children();
//$(celdas[0]).text() te daría el contenido de la primer celda de la fila 
//$(celdas[1]).text() te daría el contenido de la segunda celda de la fila
//etc

Armé un pequeño ejemplo, no incluye bootstrap ni el modal ni el formulario. Pero sirve para ver como obtener la fila y recorrer sus celdas. Espero te sirva.

Link para ver el ejemplo

Algo importante a mencionar es que he visto otras respuestas y te aconsejaría que las consideres. Yo me limité a resolverlo en base a lo que tenías, sin alejarme demasiado de lo que estabas haciendo, sin acceder al lado del servidor(.net) y sin recurrir a otras librerías. Esto funcionaría y te resolvería tu problema rápidamente, pero te aconsejo que consideres a futuro otras formas de solucionar situaciones como estas.

Yo optaría por tomar el id y con él traer los datos desde el servidor.

Suerte!

6
  • si es lo que requiero pero entoces la funcion children como la usaria para recuperar mis otros valores de la fila
    – Drago25
    Commented el 19 feb. 2016 a las 22:09
  • La función te va a retornar un array que en cada posición contiene una de las celdas de la fila. Al recorrer el array, a cada objeto(celda) le pedís su contenido.
    – ibooio
    Commented el 19 feb. 2016 a las 22:19
  • seria algo asi? var hola = $(e.relatedTarget.hash).parent().parent(); for (var x in hola){ alert(hola[x].children()); }
    – Drago25
    Commented el 19 feb. 2016 a las 22:40
  • Ahora edito la respuesta con un ejemplo mas claro
    – ibooio
    Commented el 19 feb. 2016 a las 22:55
  • si por favor, te agradezco
    – Drago25
    Commented el 19 feb. 2016 a las 23:06
1

La opción que propone Leandro Tutini me parece más adecuada que la de ir recorriendo con jQuery los elementos HTML de la fila que estás editando.

Como complemento a su respuesta:

Para rellenar los datos del formulario podrías usar un plugin de jQuery como jQuery-form-autofill que te facilitara el trabajo y llegar a tener algo como esto:

var params = new {
    id: $(e.relatedTarget).data().id
};

$.ajax({
   type: "POST",
   url: "Pagina1.aspx/GetDatosReporte",
   data: params,
   contentType: "application/json; charset=utf-8",
   dataType: "json"
}).done(function( data ) {
    // Rellenar los campos del formulario
    $("#formId").autofill(data);
});

Para guardar los cambios realizados en el formulario necesitarías otro WebMethod

<System.Web.Services.WebMethod()> _
Public Shared Function GuardaDatosReporte(ByVal data As ClassCustom)
    'aqui te conectas a la db filtrando por el id
    ' guardas los datos de la entidad
End Function

Y en el botón de guardar podrías usar jQuery.serializeArray() para obtener los datos del formulario y enviarlos a servidor. El código sería parecido a este:

var params = $('#formId').serializeArray();

$.ajax({
   type: "POST",
   url: "Pagina1.aspx/GuardaDatosReporte",
   data: params,
   contentType: "application/json; charset=utf-8",
   dataType: "json"
}).done(function( data ) {
    //TODO: Cerrar el formulario
})
.fail(function( jqXHR, textStatus ) {
    //TODO: Mostrar error
});
0

Con solo el id que consigues de la tabla alcanza y sobra para poder cargar el popup. Deberias utilizar con jquery y una llamada ajax al servidor para recuperar los datos y cargar los controles de la ventana. O sea no tomas los datos desde el html, sino que debes ir al servidor a buscarlos.

Calling ASP.Net WebMethod using jQuery AJAX

Se define un webmethod del lado del servidor

<System.Web.Services.WebMethod()> _
Public Shared Function GetDatosReporte(ByVal id As Integer) As ClassCustom
    'aqui te conectas a la db filtrando por el id
    ' devuelves la lista con los datos de la entidad
End Function

Por supuesto debes definir la clase con las propiedades de la entidad que edita el popup

Usaras jquery con $.ajax para invocar el webmethod

 var params = new {
        id: $(e.relatedTarget).data().id
  };

 $.ajax({
    type: "POST",
    url: "Pagina1.aspx/GetDatosReporte",
    data: params,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: OnSuccess,
    failure: function(response) {
        alert(response.d);
    }
});

la respuesta la usarias para asignar los controles usando jquery

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.