I have a table where I place various data resulting from a SQL query, for each record that a query returns I place a button to show the data in a form of the record that I selected so far I can only retrieve a single value with this code, how can I retrieve the other registry values that I selected?
$('#modalSi').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data().id;
$(e.currentTarget).find('#txtNombre').val(id);
});
This is the link with which I open the modal window, through the attribute data-id
I pass the id value that you have selected, you can pass more values
<a href="#" id="link1" data-id="row.id" data-toggle="modal" data-target="#modalSi"><button type="button" class="btn btn-success">Si </button></a>
And this is the 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-->
Considering that the link is inside a td tag and it is inside a tr tag that contains the rest of the cells with their values: I give you a detailed example of how you would obtain all the values of a row
In your application as you are using JQuery, in the show.bs.modal event that you use, you could apply the parent() function twice.
That would return the row in which the link that the user clicked is located. With JQuery you can get all the elements contained in that row, that is, all its cells (level 1) and their content (level 2).
To get all the child elements (cells in this example) of the row, you can use JQuery's children() function. It will return, in this case, an array of td elements
You can do the path of the elements with an each
});
The problem with this is that in your problem you need to associate each cell with an element of the form. Surely there are more elegant alternatives but I'm going to opt for the simple version: you go through each position of the array manually
I put together a small example, it does not include bootstrap or the modal or the form. But it is useful to see how to get the row and go through its cells. I hope it helps you.
Link to see the example
Something important to mention is that I have seen other answers and would advise you to consider them. I limited myself to solving it based on what you had, without going too far from what you were doing, without accessing the server side (.net) and without resorting to other libraries. This would work and solve your problem quickly, but I advise you to consider other ways to solve situations like these in the future.
I would choose to take the id and with it fetch the data from the server.
Luck!
The option proposed by Leandro Tutini seems more appropriate to me than going through the HTML elements of the row you are editing with jQuery.
As a supplement to your answer:
To fill in the form data you could use a jQuery plugin like jQuery-form-autofill that will make your job easier and end up with something like this:
To save the changes made to the form you would need another WebMethod
And on the save button you could use jQuery.serializeArray() to get the form data and send it to the server. The code would be similar to this:
With only the one
id
you get from the table is enough to load the popup. You should use withjquery
and aajax
server call to retrieve the data and load the window controls. That is, you do not take the data from the html, but you must go to the server to look for it.Calling ASP.Net WebMethod using jQuery AJAX
A
webmethod
server-side is definedOf course you must define the class with the properties of the entity that edits the popup
jquery
You will use with$.ajax
to invoke the webmethodyou would use the answer to assign the controls using jquery