How can I get the document variable out of clcik?
obtenerDocu: function() {
$('#documentos-table tr').click(function(e) {
e.preventDefault();
documento = $(this).closest("tr").find('td:eq(0)').text();
});
return documento; //null
}
I do not understand why you have the initialization code of the Event click inside the same function getDocu with which you want to obtain the value of the last click of the first element of the row.
You should declare the event click, once the table or document is loaded.
I'll give you an example of what I think you want to do.
$(document).ready(function(){
$('#documentos-table tr').click...
});
Unless the click event does not want to have it activated from the beginning.
var obj = {
docu: null,
setDocu: function(value) {
this.docu = value;
},
getDocu: function() {
return this.docu;
}
};
$('#documentos-table tr').click(function(e) {
obj.setDocu($(this).find(':first-child').text());
console.log(obj.getDocu());
});table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="documentos-table">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>You can declare the variable outside of the "eventhandler", but your function will have to take into account that as long as no click has been made, that variable will not have a valid value:
$(() => {
let lastClicked;
$('button').click(function () {
lastClicked=this.id;
});
function getLastClickedId() {
if (lastClicked) {
console.log('El último botón pulsado fue ${lastClicked}');
if (lastClicked=='ko') {
clearInterval(interv);
}
}
};
let interv=setInterval(getLastClickedId,1000);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="ok"> OK </button>
<button id="ko"> KO </button> You can not do it that way because you have to wait for at least the first time to click on the $('#documentos-table tr') element to assign the value.
The solution I can visualize is to ask if the document has been selected, otherwise the user will be asked to select a document:
var doc = obtenerDocu();
if(doc == null || doc == undefined){
alert("Seleccione un documento");
}
else{
//..
}
I think it's a bad idea to declare a listener inside a function that you'll call several times, because you'll have many listeners.
Also, if your table has headers, you should restrict the listener to td that are within tbody .
Now, suppose that anyway you want documento to have a value before the click. One way would be to initialize your value as if someone had punctured the first row:
(copying the response from Pablo Lozano ) click on the button before clicking on the table:
var documento = $('#documentos-table tbody').find('td').first().text();
function getDocumento() {
console.log('documento actual es ', documento);
return documento;
}
$('#documentos-table tbody tr').click(function(e) {
documento = $(this).find('td').first().text();
getDocumento();
});
$('#verdocumento').on('click', getDocumento);table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="verdocumento">Ver documento actual</button>
<table id="documentos-table">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</tbody>
</table>