Ver la versión completa : Javascript Serializando con tag-helpers
Hola a todos:
A ver si alguien me puede echar una mano, porque parece que esté escribiendo MacBeth en alemán sin usar traductor automático.
Estoy creando una página con ASP.NET Core, en la que tengo que crear una tabla con datos que se pueden editar. La idea es que las celdas de la tabla, casi todas, son editables, y al final de la línea, hay un botón para enviar la información a mi Controller, que coge esos datos de la línea y los actualiza en la BBDD.
Mi modelo de datos es algo parecido a esto:
class Empresa {
List<Empleado> lista;
}
class Empleado {
string Id;
string nombre;
string apellidos;
int edad;
bool activo;
}
Bueno, pues en mi vista, he podido crear la tabla. Simplificando las cosas quedaría algo así:
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTable">
<thead>
<tr>
<th>
<label>Nombre</label>
</th>
(...)
</tr>
</thead>
<tbody>
@if ((Model != null) && (Model.lista != null))
{
for (int i = 0; i < Model.lista.Count(); i++)
{
<tr>
<td style="display:none"><input readonly="readonly" asp-for="@Model.lista[i].Id"> </td>
<td style="vertical-align: middle; text-align: center">@Model.lista[i].Id</td>
<td style="vertical-align: middle; text-align: center">
<input class="form-control" asp-for="@Model.lista[i].nombre">
</td>
<td style="vertical-align: middle; text-align: center">
<input class="form-control" asp-for="@Model.lista[i].apellidos">
</td>
<td style="vertical-align: middle; text-align: center">
<input class="form-control" readonly="readonly" asp-for="@Model.lista[i].edad">
</td>
<td style="vertical-align: middle; text-align: center">
<input type="checkbox" class="form-control" asp-for="@Model.lista[i].activo">
</td>
<td style="vertical-align: middle; text-align: center">
<a class="btn btn-primary form-control w-25 p-1 submit" href="#" data-action="Update">@ViewBag.localize["ButtonUpdate"]</a>
</td>
</tr>
}
}
</tbody>
</table>
</div>
Y más adelante, defino el siguiente script en JS para el botón:
<!-- Script para botón de líneas de tabla -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {
$(".submit").on("click", function (event) {
console.log("Prueba 1");
event.preventDefault();
var url = '@Url.Action("Update", "Employee")';
var row = $(this).parents("tr").first();
var data = row.find("input, select, textarea").serialize();
window.location.href = url + '?' + data;
});
});
</script>
No sé si me estoy complicando mucho, pero como no puedo meter un formulario dentro de una tabla, y los intentos por enviar los datos de la línea usando Model.lista[\i] en el botón me han devuelto los valores sin editar, pues he leído que lo suyo es usar JS, y obtener los datos de los inputs directamente.
Esto me funciona, y me genera la llamada con lo que necesito... pero tiene una pega. Cuando la llamada debería ser algo tipo:
http://miweb/Employee?Id='1'&nombre='Dolores'&apellidos='Fuertes DeBarriga'&edad=30&activo=true
lo que obtengo es:
http://miweb/Employee?lista[i].Id='1'&lista[i].nombre='Dolores'&lista[i].apellidos='Fuertes DeBarriga'&lista[i].edad=30&lista[i].activo=true
Esto se lo achaco a que asp-for me cambia el name del elemento por el mismo que el nombre de la variable. He leído que se puede forzar el nombre, y eso creo que lo arreglaría, pero es una mala práctica.
La otra opción es arreglar el "serialize" del javascript, pero para mi JS es como hablar en catalán (puedo entender lo que se dice, pero ni papa de hablarlo), y no sé qué opciones habría para evitar la primera parte del nombre, de coger sólo lo que haya después del punto del nombre, o borrar "lista[\i]." (con un extra de caracteres raros que no sé reproducir) de toda la cadena.
Como sé que aquí hay gente que pilota de diseño web mil veces más que yo, a ver si me podéis echar una manita, por favor. Gracias.
josepzin
13/04/2023, 20:53
JQuery, que ajco... este foro debería aplicar ciertos filtros a sus usuarios...
-----Actualizado-----
Asi comentando por arribita, yo creo que estas fallando en lo que le das al serialize. Yo iría haciendo paso por paso cada una de esas cosas que tienes encadenada, metiendolo cada paso en una variable para poder mostrarlo via console.log y asi entender donde esta la metida de pata.
sí, es lo que dice josepzin, serialize() hace exactmente lo que estás mostrando: meter todas las variables con su nombre en una larga línea.
Yo lo que haría si por alguna razón me metiese en una máquina que me hace retroceder 10 años a cuando se usaba jquery es algo así:
<input class="form-control" asp-for="@Model.lista[i].nombre" id="nombre">
<input class="form-control" asp-for="@Model.lista[i].apellidos" id="apellidos">
...
var data = {
nombre: $('#nombre').val(),
apellidos: $('#apellidos').val(),
}
window.location.href = url + '?' + data.serialize();
Fíjate:
- No sé si puedes meter un formulario en una tabla, me extraña, quizá no pero no recuerdo. Estoy bastante seguro de que sí que puedes meter una tabla en un formulario y en el onclick() simplemente hacer un submit(), que es lo más limpio de todo con diferencia.
- Si esas tablas las usas para maquetar... tío... 2023... flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) y grid (https://www.w3schools.com/css/css_grid.asp) llevan muchos años entre nosotros... Úsalos y deja que tu página sea accesible desde móviles sin hacer nada más.
- Con jquery, no hace falta que obtengas una referencia a la la tabla y luego al tr y luego la td y luego busques cosas ahí dentro. Ponle al control un identificador único y podrás referenciarlo directamente sin liarte: $("#nombre"). Que se encargue jQuery de buscar dónde está, que por algo se llama así: haz una query y ya encuentra qué quieres!
josepzin
13/04/2023, 23:21
En realidad se puede poner un formulario que ocupe toda la web, basta con poner un FORM al principio y /FORM al final. Cuando se haga el SUBMIT se enviará todo lo que haya al medio esté donde esté, ya sea dentro de una tabla como dentro de divs o parrafos.
Lo que quizas quiere decir nuestro amante de JQuery es que dentro de la estructura de una tabla no se puede intercalar un FORM, este tendría que estar "alrededor" de la tabla.
Sobre las tablas, si, son una cosa retro pero cuando hay tablas de datos un TABLE es lo que se debe usar :P
-----Actualizado-----
Hace unos años yo me propuse dejar de usar JQuery y al final con Javascritp vainilla se puede hacer casi todo mas o menos igual de simple pero en todo caso sin depender de una librería kilométrica, que teniendo en cuenta las webs actuales que cargan todo cristo de forma mastodónica como que da igual... :P pero queda bien decir que no se usa JQuery y humillar al que lo sigue usando muahahah
ah, vale, sí, eso sí, no se pueden intermezclar tablas y formularios porque ambos son contenedores que tienen que cerrarse y abrirse en orden. Como los paréntesis de una expresión matemática. O mete todo el formulario dentro de una celda, o toda la tabla dentro del formulario. Pero no se puede hacer html-fusión
-----Actualizado-----
Por cierto, sí, reconozco que me he hecho el interesante. jquery puede usarse perfectamente si la web es sencilla y sin complicaciones.
Pero enseguida querrás hacer algo más, y jquery incentiva a una programación muy "espagueti" y difícil de mantener.
josepzin
14/04/2023, 02:14
Yo dejé de usar JQuery cuando vi las comparativas de rendimiento con vanilla, que es HENORME, aunque como dije antes en el contexto actual de webs sobre-mega-ultra-hiper-re-cargadas que use JQuery es un grano mas de arena en un océano de tsunamis.
Luego aprendiendo a reemplazar de a poco los selectores y todo lo que podía con JS estándar. Al final de Jquery me quedaba poco y nada, además me terminé acostumbrando y dejé de usarlo.
A ver, no puedo poner el form a toda la página porque ya hay otro form. Esto que os muestro es de una vista parcial, ya hay otra en la que está el formulario para añadir un nuevo elemento.
Tampoco puedo meter la tabla en un form porque cada línea tiene un botón update, y sólo quiero los datos de esa línea, no tendría forma de saber qué botón es el que ha generado la llamada.
Y es que no habéis tenido en cuenta que las líneas se generan de forma dinámica, no hay una forma (que yo sepa) de poner un identificador único a cada input, que pueda usar directamente en JS.
No parece mala idea la de crear una estructura anónima, y ponerle los nombres que yo quiera. Incluso, si por mi fuera, quitaría el serialize del "data", y lo recorrería, asignando a cada nombre el valor del último split('.')... pero es que, encima, el debuger de VS no me funciona, y no puedo saber qué tipo es data, ni puedo hacer una ejecución paso a paso para ver lo que estoy haciendo... por no decir que estoy programando en JS sin haber dado jamás un curso de JS, o como se llame, y "eso" es el resultado de fusionar tres ideas que he encontrado por internet ^^U
Si hay otra forma más sencilla, por favor, soy todo oídos. No quería asustar a nadie, pero la vista es una Razor Page, no HTML... pero es que si digo eso, con el odio que hay a .NET, lo mismo ni respondéis :D :D :D
No tengo ni idea de .net o de qué es una razor page, así que no puedo odiarla :D
Una idea: si tus líneas son así:
<td id="i">...<input class="nombre" ....>
(es decir, que identifiques el tr simplemente con el contador y añades una clase "nombre" o similar en los input
Entonces podrás acceder a los controles así:
var nombre = $("#i > .nombre").val()
">" significa "descendiente de..." incluso si hay varios niveles de descendencia
https://api.jquery.com/category/selectors/
-----Actualizado-----
Así podría quedaría tu código, creo, pero tendrás que verificarlo:
<input class="form-control nombre" asp-for="@Model.lista[i].nombre">
<input class="form-control apellidos" asp-for="@Model.lista[i].nombre">
...
// lo de antes igual, incluso para obtener la referencia a la row si no quieres usar identificadores por alguna razón
var data = {
nombre: row.find(".nombre").val(),
apellidos: row.find(".apellidos").val(),
}
window.location.href = url + '?' + data.serialize();
Recuerda que en JavasScript un elemento puede tener cualquier número de clases. Aquí hemos asignado varias clases a los input
Creía que eso ya quedaba cubierto con las líneas:
var row = $(this).parents("tr").first();
var data = row.find("input, select, textarea").serialize();
Si quito el "serialize()", debería tener una lista con todos los elementos de la línea... si es que eso existe en JS.
El problema es, para cada elemento, cambiar su nombre, quedarme sólo con el final (lo que va detrás del último punto), y después serializarlo.
O bien, crear una clase anónima, con el nombre modificado y el valor de cada elemento.
Pero no sé hacer ni una cosa ni otra.
pero no separes tú con el split(), va a ser una pesadilla y además con enorme probabilidad una fuente de vulnerabilidades
Saca los datos uno a uno que ya sabes cómo son en vez de todos a la vez.
No entiendo.
¿Separar qué con split? Mi idea era un bucle for a data, y en todo caso, hace split al name y quedarme con el último elemento, o algo así.
Lo que no sé es cómo hacerlo :P
split() es una función para separar cadenas por tokens. En tu caso había imaginado que harías un split() con & y después otro split con = y así tendrías nombre y valor separados. Ahora veo que reinventar eso pero a un nivel aún más bajo, con un bucle for. Aprovecha la potencia de las librerías, especialmente si ya las tienes importadas como jquery!
Te puse un ejemplo en mi último comentario, pero creo que lo he editado después de que comentases y puede que se te haya pasado. Esto:
<input class="form-control nombre" asp-for="@Model.lista[i].nombre">
<input class="form-control apellidos" asp-for="@Model.lista[i].nombre">
...
// lo de antes igual, incluso para obtener la referencia a la row si no quieres usar identificadores por alguna razón
// aquí lo realmente nuevo: saca los datos uno a uno, no todos a la vez:
var data = {
nombre: row.find(".nombre").val(),
apellidos: row.find(".apellidos").val(),
apellidos: row.find(".otracosa").val(),
}
window.location.href = url + '?' + data.serialize();
No sé si puedo darle identificadores a los campos. Ten en cuenta que las líneas están dentro de un bucle, y si al primero le pongo id="nombre", cada línea va a tener un elemento con ese id, y por lo que tengo entendido, los identificadores deben ser únicos para toda la página.
Podría hacer algo del estilo
id = "nombre_" + @i
Pero luego en la parte de Java, a ver cómo busco el elemento, porque puede llamarse "nombre_1", "nombre_2, "nombre_7"... ¿Podría pasarle "i" como parámetro al JS? ¿Y cómo lo uso para el identificador?
Por eso, me parece más fácil buscarlo como dices, por un nombre de la class (ya me buscaré la forma de poner un identificador que no se confunda con otro existente).
Y, bueno, si hay que ir elemento por elemento, pues nada.
El handicap que tengo es que en html y JS estoy peor que Selecter en su primer mensaje del curso que hizo ^^U
Voy a probarlo y luego os cuento. Antes, debo atender otra tarea más urgente.
Puedes añadir información adicional a un campo data de html, que están precisamente para eso. Ahí irían los identificadores. También puedes modificar la función a la que llama ante el evento onclick y ahí pasar los identificadores de tus controles.
Aún así, fíjate que te planteo algo más sencillo y con cambios mínimos en tu código. La idea de usar clases no es para darle un identificador diferente a cada campo nombre, al revés: todos los input nombre tendrán la clase nombre. Tú lo que puedes hacer es buscar el input con clase nombre dentro de una row, que solo debería ser uno. La row la sacas exactamente como ya has hecho, con padre de padre
Vamos, que te planteo que uses ".nombre", ".apellidos" por separado como selector del css en vez de tu actual selector conjunto "input,textarea". Todo el resto, igual que ha hecho hasta ahora
Mira el ejemplo que te puse
Sé que es mucho pedir, pero me gustaría que, cuando hables de una cosa, pongas un ejemplo... más que nada porque... lo dicho, ando tan pez que no sé dónde buscar siquiera información ^^U
¿Cómo funciona lo del "campo data"? He visto un html tag llamado data-, no sé si es eso.
Pero sí, lo que voy a usar es lo del nombre en el class... es que habías dicho que era una forma arcaica de hacerlo, y claro ^^U Pero me dices de usar Flexbox y:
1- No tengo ni idea de lo que es ni cómo se usa.
2- Las vistas las hago en Razor, que si ya me cuesta pelearme entre C#, HTML, Bootstrap y lo poquito que uso de Java, tener que meterle eso que ni siquiera sé si es compatible con la ensalada que ya tengo montada, es rizar el rizo para los dos telediarios que llevo peleándome con esto.
Ni siquiera estoy seguro de estar usando las herramientas que nos han enseñado correctamente ^^U
coñe, que el ejemplo te lo he puesto arriba ya dos veces. Venga, la tercera:
<input class="form-control nombre" asp-for="@Model.lista[i].nombre">
<input class="form-control apellidos" asp-for="@Model.lista[i].nombre">
...
// lo de antes igual, incluso para obtener la referencia a la row si no quieres usar identificadores por alguna razón
// aquí lo realmente nuevo: saca los datos uno a uno, no todos a la vez:
var data = {
nombre: row.find(".nombre").val(),
apellidos: row.find(".apellidos").val(),
apellidos: row.find(".otracosa").val(),
}
window.location.href = url + '?' + data.serialize();
No he dicho que usar clases sea arcaico porque no lo es. Al revés, es totalmente normal en HTML
Todos los elementos html tienen un atributo data- donde puedes poner información extra para javascript, pero no lo uses, haz pocos cambios como los que te propongo y ya está
Porque mi propuesta fundamental es esta:
- Tú has usado la línea var data = row.find("input, select, textarea").serialize();, que mete todos los datos en una cadena. Luego propones parsear esa cadena
- Yo te digo que no te canses, que saques los datos uno a uno y no parsees.
var data = {
nombre: row.find(".nombre").val(),
apellidos: row.find(".apellidos").val(),
apellidos: row.find(".otracosa").val(),
}
y lo único que tienes que hacer para aplicar esto es añadir "nombre" o "apellidos" a las clases de los input correspondientes
josepzin
17/04/2023, 19:23
Cuando pones "data-" en realidad funciona como un atributo normal que se puede leer de cualquier manera, lo de "data-" es mas un convencionalismo.
Por ejemplo data-pache="LOL" se puede leer lo mismo si pones pache="LOL"
En JS puro sería algo asi como element.getAttribute("pache");
-----Actualizado-----
lo de "data-" es mas un convencionalismo.
Igual lo he dicho sin comprobarlo... en todo caso creo que funciona de las dos maneras sin problema.
Gracias.
Juanvvc, me refería que me hablabas de los data-, pero no me dabas ejemplo de eso. El resto sí que lo he pillado.
Fíjate si lo he pillado que ya lo he implementado y me funciona, pero...
<script>
$(document).ready(function () {
$(".submit").on("click", function (event) {
console.log("Prueba 1");
event.preventDefault();
var url = '@Url.Action("Update", "EmployeeWorkLogger")';
var row = $(this).parents("tr").first();
var data = {
Id: row.find(".modelDoc-id").val(),
nombre: row.find(".modelDoc-nombre").val(),
apellidos: row.find(".modelDoc-apellidos").val(),
edad: row.find(".modelDoc-edad").val(),
activo: row.find(".modelDoc-activo").val(),
}
window.location.href = url + '?' + jQuery.param(data);
});
});
</script>
Primero, serialize no me lo permite hacer con data, pero he encontrado lo de jQuery.param (lo ideal sería enviarlo como JSON por el body, pero ya me tiré una hora intentándolo en su momento). Eso resuelto.
Segundo, pues he podido enviar los datos y he conseguido actualizarlo todo... salvo el checkbox. Según he leido, no se puede serializar un checkbox no seleccionado porque, simplemente, no existe checkbox.
https://stackoverflow.com/questions/3029870/jquery-serialize-does-not-register-checkboxes
Pero eso lo tengo que dejar para mañana.
Me está costando encontrar una solución a esto. En la página que puse ayer, actúan directamente sobre la URI que se genera, pero tal como genero yo la serialización, provocaría un valor doble en la misma.
Estoy buscando alternativas.
Por otro lado, es curioso cómo el html tag que uso para el checkbox, genera el siguiente código HTML en el inspector:
<td style="vertical-align: middle; text-align: center">
<input type="checkbox" class="form-control modelDoc-active" checked="checked" data-val="true" data-val-required="Please, set if employee is active" id="DocumentsList_0__active" name="DocumentsList[0].active" value="true"><input name="DocumentsList[0].active" type="hidden" value="false">
</td>
Hay un comentario que habla sobre esto, de generar un campo escondido, para leerlo si el checkbox se desactiva.
Lo que no veo es que se modifique el HTML cuando desactivo el checkbox, cosa que sí he visto con otros elementos.
Me pasó algo parecido una vez, que se añadian los campos de la tabla a los parámetros de la URL, tuve que usar URLSearchParams para ir añadiendo los parámetros que necesitaba (dinámicamente) para luego pasárselos a la api...
Ojo, uso React y axios para las llamadas...
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
Entiendo que puedes hacer tu el if. Estoy con el móvil así que pseudocódigo
Data = {
...
valor: (row.find(".checkbox") && row.find(".checkbox").val())
}
Es decir, mira que el checkbox existe y que su valor es true
:confused:
No lo pillo.
Al final, lo he resuelto escribiendo lo siguiente después de la declaración de data:
if (row.find('input[type="checkbox"]').is(':checked')) {
data.active = true;
}
else {
data.active = false;
}
No sabía si había forma de poner "unchecked" o qué (aún estoy leyendo la doc de JS de w3schools), así que tiré de lo seguro... and it works! :P
Ahora tengo que rizar el rizo: para mañana debo conseguir que
- Un input de un artículo, al perder el foco, abra una ventana modal.
- En esa ventana modal debo mostrar una lista de lotes, que debo obtener del servidor.
- Cuando se le de al botón guardar del modal, debo almacenar "en algún sitio" los valores (a ser posible, >0). Y cerrar el modal.
- Al final de la página, hay un botón de guardar: debo enviar al servidor los datos de la página (datos de tres tablas, con campos editables, incluida la de artículos), e integrar los datos de los lotes en las correspondientes líneas de los artículos.
Y todo partiendo de la premisa de que, anteayer, de JS sabía cero.
Hace ya tiempo que no hago una GameJam, estoy desentrenado :P
josepzin
19/04/2023, 00:53
Para leer el estado de un check creo que está bien como lo hiciste!
Vaya movida tienes allí... no queda otra que ir cogiendo punto por punto e ir resolviendo y avanzando.
No quiero llenar el foro de dudas mías sobre JS y JQuery, asíq ue voy a seguir en este hilo.
A ver, resulta que tengo una tabla, con una serie de artículos. Antes, metiendo la tabla en un formulario y haciendo submit con un botón podía enviar la información de la misma al servidor.
Pero ahora resulta que, a algunos elementos de la tabla, les tengo que incrustar una lista, la de lotes seleccionados, por lo que según he entendido, tengo que crear un objeto JS que contenga la información de la tabla, al que le pueda incrustar dichas listas. Así que, mi primer paso es tener una función que inicialice ese objeto.
De momento he escrito esto (resumido y modificado, por si licencias de uso)
const toSendData = {};
function ReadLinesData() {
console.log("Read Lines Data");
var rows = $("#miTabla").children("tbody").children("tr");
var element;
for (var i = 0; i < rows.length; i++) {
element = {
Id: rows[i].find("tableField='Id'"),
whsCode: rows[i].find("tableField='whsCode'"),
uomEntry: rows[i].find("tableField='uomEntry'"),
};
toSendData.HeaderData.push(element);
};
Lo que intento hacer es guardar en rows la lista de las líneas de la tabla, y luego, por cada línea, coger los datos de algunas celdas.
Lo de HeaderData es que en realidad son tres tablas, pero vamos a por la primera, de momento.
El caso es que este código me dice que "find" no es una función cuando hago
Id: rows[i].find("tableField='Id'")
Seguro que es error de novato, pero ¿no se supone que rows[i] es una fila? ¿Me falta indicar de alguna forma que estoy usando jQuery ahí?
-----Actualizado-----
PD: los campos los he definido más o menos así:
<td style="display:none"><input readonly="readonly" asp-for="@Model.HeaderData.Id" table-field="Id"> </td>
Es decir, a todos le he creado un atributo, o como se llame, "table-field" y le he dado como valor el nombre del campo. Lo digo porque el find me acaba de dar error, y me he acordado que no lo he dicho ^^U My bad.
josepzin
19/04/2023, 20:23
Intuyo que .find es para buscar en el DOM, quizás ese sea el problema.
Si fuera JSvainilla yo haría algo asi:
var elements = document.querySelectorAll("#miTabla tbody tr");
for (var i = 0; i < elements.length; i++)
{
console.log( elements[i].querySelector("tableField='Id'").value );
console.log( elements[i].querySelector("tableField='whsCode'").value );
console.log( elements[i].querySelector("tableField='uomEntry'").value );
}
Pero bueno, un código asi yo nencesitaría meterlo al navegador y darle 20 veces al debuger hasta que me funcione bien :D :D asi que suerte con mi sugerencia :V
Que por cierto, hacer una busqueda usando querySelector es tremendamente mas rapido que usando JQuery, aunque no se note.
Puede ser. Mi idea era guardar la lista de rows y hacer la búsqueda desde ahí, pero parece que no sé cómo almacenarlos o cómo leer desde esa variable.
De momento lo he resuelto así:
const toSendData = {
HeaderData: [],
ItemLines: [],
};
function ReadLinesData() {
console.log("Read Lines Data");
var element;
$("#miTabla").children("tbody").children("tr").each(function () {
element = {
Id: $(this).find("[table-field='Id']").val(),
whsCode: $(this).find("[table-field='whsCode']").val(),
uomEntry: $(this).find("[table-field='uomEntry']").val(),
};
toSendData.ItemLines.push(element);
});
Aún así, me gustaría saber qué estoy haciendo mal para no poder usar "for" en la variable rows que tenía declarada en mi anterior mensaje. En teoría "find" es una función de jQuery, y en otra parte del código funcionaba (el otro código JS que puse en este hilo).
Ahora estoy aprendiendo a usar $.ajax para mandar la información al servidor, y cuando lo consiga, tengo que crear una función que coja los campos editables de las tablas, y modifique los datos del toSendData antes de enviarlos. Sigo leyendo JS, pero creo que voy a echar de menos Linq para buscar los campos ¿verdad?
No sé qué es JSVainilla, ni como funciona queryselectorall... me estoy metiendo un atracón entre JS, jQuery y AJAX que bastante raro es que no esté mezclando cosas ya (de código y no de código :P). De momento, necesito ir a lo más básico y sencillo, cuanta menos información necesite, mejor, porque si la curva de aprendizaje es larga, la tengo que condensar para entregar algo mañana.
Creo que con "JS vanilla", josepzin se refiere a JavaScript a secas sin ninguna librería adicional. Por eso te lo recomienda, para que no tengas que aprender nada más que JS.
JQuery surgió en su día para ofrecer cosas que JS no tenía en el estándar y se hacían de forma diferente en cada navegador, pero desde hace años JS se ha estandarizado mucho y por eso JQuery se ha quedado un poco obsoleto. Por ejemplo ese ajax() que dices, ya se puede hacer directamente en JS con la función estándar fetch() sin más. queryselectorall() funciona igual que el find() de JQuery, es la nueva función estándar para hacer lo que antes se hacía con find() ó children()
No sé por qué el find() del final no te funcionaba, pero no estabas haciendo find() sobre un elemento único sinó sobre el resultado de ejecutar $().children().children(), y a saber qué es lo que tenías ahí después de tres búsquedas encadenadas y totalmente innecesarias. Hace muchísimo que no uso JQuery!
$("#miTabla").children("tbody").children("tr") seguramente es equivalente a $("#miTabla tbody tr") con menos problemas porque no encadenas nada. Y eso a la vez es seguramente igual que document.queryselectorall("#miTabla tbody tr"), sin necesidad de jquery.
josepzin
20/04/2023, 20:23
Creo que con "JS vanilla", josepzin se refiere a JavaScript a secas sin ninguna librería adicional. Por eso te lo recomienda, para que no tengas que aprender nada más que JS.
Exacto! no se porque se le dice vanilla/vainilla al javascript puro, sin librerías, ¿quizás porque es uno de esos sabores básicos?? ni idea... de esas cosas que uno usa sin saber el porqué.
JQuery surgió en su día para ofrecer cosas que JS no tenía en el estándar y se hacían de forma diferente en cada navegador, pero desde hace años JS se ha estandarizado mucho y por eso JQuery se ha quedado un poco obsoleto.
Antaño usar JQuery facilitaba la vida de forma HENORME!! recuerdo haber intentando hacerme el valiente con Javascript en esa época y mi conclusión fue determinante: MEJOR USAR JQUERY.
Pero claro, los tiempos cambian y ahora con javascript basico (sabor vainilla) se pueden hacer facilmente esas cosas en las que era imprescindible JQuery, ademas sin cargar una librería extra y ademas mucho mas rapido.
Para mi fue como haberme quitado de encima el código de Google Analytics :D una mierd$ menos para cargar.
$("#miTabla").children("tbody").children("tr") seguramente es equivalente a $("#miTabla tbody tr") con menos problemas porque no encadenas nada. Y eso a la vez es seguramente igual que document.queryselectorall("#miTabla tbody tr"), sin necesidad de jquery.
Eso mismo, en vez de estar encadenando instrucciones se puede seleccionar encadenando los selectores dentro de un mismo query, lo que no puedes hacer es mezclar los resultados obtenidos con un query de JQuery con los del JSvanilla, porque no van a funcionar, o uno o el otro.
A mi me ayuda muchísimo separar las cosas en distintas lineas, usando variables para ir almacenando los resultados y metiendo consoles.log a cada valor asi hago un seguimiento de los valores que tengo en cada instrucción y detectar donde está el problema. Luego si hace falta optimizarlo en una sola linea.
-----Actualizado-----
Aquí este chaval sabihondo te lo explica, mi razonamiento parece que era correcto:
https://www.youtube.com/watch?v=JosQ7jn37_U
Tambien a la version original de un software se le llama version vanilla, despues esta la version chocolate que es la que cambia el codigo especifico para la plataforma original por una version igual pero en C (normalmente) para que el codigo sea portable a otras plataformas.
Creo que con "JS vanilla", josepzin se refiere a JavaScript a secas sin ninguna librería adicional. Por eso te lo recomienda, para que no tengas que aprender nada más que JS.
JQuery surgió en su día para ofrecer cosas que JS no tenía en el estándar y se hacían de forma diferente en cada navegador, pero desde hace años JS se ha estandarizado mucho y por eso JQuery se ha quedado un poco obsoleto. Por ejemplo ese ajax() que dices, ya se puede hacer directamente en JS con la función estándar fetch() sin más. queryselectorall() funciona igual que el find() de JQuery, es la nueva función estándar para hacer lo que antes se hacía con find() ó children()
No sé por qué el find() del final no te funcionaba, pero no estabas haciendo find() sobre un elemento único sinó sobre el resultado de ejecutar $().children().children(), y a saber qué es lo que tenías ahí después de tres búsquedas encadenadas y totalmente innecesarias. Hace muchísimo que no uso JQuery!
$("#miTabla").children("tbody").children("tr") seguramente es equivalente a $("#miTabla tbody tr") con menos problemas porque no encadenas nada. Y eso a la vez es seguramente igual que document.queryselectorall("#miTabla tbody tr"), sin necesidad de jquery.
Sí, bueno, ya sabes que la etiqueta table debe contener un theader y un tbody, y dentro de este último, es donde se meten las líneas (tr), que es lo que estaba buscando.
¿Por qué poner children().children()? No sé, es lo que he leído para obtener todas las rows. Si con "#miTabla tbody tr" obtengo lo mismo y es mejor, pues lo probaré.
Como digo, he empezado hace una semana y aún me estoy adaptando, no he tenido tiempo de hacer pruebas ni ejercicios.
Puede ser que el problema que me estaba dando era el contenido del find, que al ser un atributo inventado por mi, con un valor, debería haber ido metido en corchetes, pero ya lo he resuelto así, y tengo que pasar a lo siguiente ya. Ayer me estaba dando problemas el jQuery.ajax porque no sabía cómo cargar de nuevo la página, cosa que desde .NET core resolvía con un "redirectToAction". Ahora lo tengo que hacer manualmente desde JS.
Por usar JS, todas las ventajas de .NET core se van a la porra.
Exacto! no se porque se le dice vanilla/vainilla al javascript puro, sin librerías, ¿quizás porque es uno de esos sabores básicos?? ni idea... de esas cosas que uno usa sin saber el porqué.
Antaño usar JQuery facilitaba la vida de forma HENORME!! recuerdo haber intentando hacerme el valiente con Javascript en esa época y mi conclusión fue determinante: MEJOR USAR JQUERY.
Pero claro, los tiempos cambian y ahora con javascript basico (sabor vainilla) se pueden hacer facilmente esas cosas en las que era imprescindible JQuery, ademas sin cargar una librería extra y ademas mucho mas rapido.
Para mi fue como haberme quitado de encima el código de Google Analytics :D una mierd$ menos para cargar.
Ni idea. Como quien dice, me he metido en programación web ayer mismo, y a trompicones.
A mi me facilitaría mucho la vida no tener que depender de otras librerías, y sólo aprender un lenguaje, pero mi "instructor" me dijo que jQuery unificaba código para todos los navegadores, y no dejo de ver funciones en w3schools que no funcionan en iExplorer. Esto es una aplicación para clientes, por lo que debe ser lo más compatible posible, y deben poder usarlo gente que no sabe lo que es un navegador. Las posibilidades de que aún haya quien no ha instalado ninguno, y siga usando "el navegador por defecto" (que podría ser IE, que aún hay quien tira de Windows Server 2012) existen, y el ingeniero que llevo dentro me dice que, si hay la más mínima posibilidad, hay que tenerla en cuenta.
Eso mismo, en vez de estar encadenando instrucciones se puede seleccionar encadenando los selectores dentro de un mismo query, lo que no puedes hacer es mezclar los resultados obtenidos con un query de JQuery con los del JSvanilla, porque no van a funcionar, o uno o el otro.
A mi me ayuda muchísimo separar las cosas en distintas lineas, usando variables para ir almacenando los resultados y metiendo consoles.log a cada valor asi hago un seguimiento de los valores que tengo en cada instrucción y detectar donde está el problema. Luego si hace falta optimizarlo en una sola linea.
Esa es la cosa, aún confundo JS con jQuery, y no sé cuándo estoy guardando datos de uno u otro. Ayer empecé a entender el debugger, tanto el de chrome como el de VS (que creía que no estaba funcionando), y eso me está aclarando muchas cosas. Sigo sin entender por qué los errores de sintaxis y demás sólo se me informan cuando estoy en ejecución, y no en compilación, y encima, la mitad de las veces, no veo los detalles del mismo (¿que se esperaba ":"? ¿Dónde?).
Por eso, como no conseguía iterar sobre las rows guardadas en una variable, pues iteré directamente sobre la búsqueda, y como funcionaba, pues adelante.
No, yo tampoco estoy orgulloso de eso (va totalmente en contra de mis principios de programación), pero no sé lo que hago, y hay que hacerlo YA. De todas formas, voy arreglando cosillas conforme las voy entendiendo.
Aquí este chaval sabihondo te lo explica, mi razonamiento parece que era correcto:
https://www.youtube.com/watch?v=JosQ7jn37_U
¿En serio ha hecho un vídeo para explicar que JS Vanilla es JS base? ¿Y encima pide likes, suscripción, campanita, etc, etc, etc? Si lo sé, no hago vídeos de 30 minutos sólo por diversión :D
josepzin
21/04/2023, 13:53
Demasiado estas haciendo, que eso funcione y a otra cosa, si JQuery te da esa seguridad (que efectivamente, puede aparecer algun transtornado con un navegador antiguo) pues mejor usa JQuery.
¿Entonces ya te funciona?
Sí, esa parte sí. Tengo que ver si sustituyendo el children().children() sige funcionando, pero eso, ir, va.
De hecho he podido mandar la info al servidor correctamente. Ahora estoy con otra parte, en la que, al perder el foco en un input, se le pida datos a la BBDD y los muestre en una ventana modal.
josepzin
24/04/2023, 16:07
No debería ser especialmente complicado eso, es manejar el evento de pérdida de foco y etc... Igual es todo un curro :P
Bueno, en eso estoy. La parte más chunga ha sido crear la tabla dentro del tbody, que había que usar HTML, y no es que tenga unos conocimientos muy amplios de eso. Por suerte, sí de edición de ficheros, y eso me ha permitido hacer una construcción con datos y demás bastante apañada.
Claro que, luego está leer esos datos, meterlos en la variable global para enviarlos al servidor, hacer las comprobaciones de que los datos concuerdan con los que se les pasa, refrescar valores... cosas que en C son fáciles de hacer, pero con las que me siento en primero de carrera al estar en un entorno nuevo.
Ya parece que voy aclarando cosas, y puede que mañana lo deje ya "hecho"... habría que pulir cosas, corregir otras, darme con el periódico en la cabeza por cada fallo de novato (menos mal que cada vez se imprimen menos :D)...
Bueno, otra pregunta, voy a tardar más en escribirlo que en resolverlo, pero es lo último que me queda para hacer hoy la entrega al cliente, necesito resolverlo ya.
Tengo una tabla con diversos campos input. Necesito que, al hacer tabulador y perder el foco, se abra una ventana modal para seleccionar una serie de valores para esa línea (en concreto, los lotes del artículo de esa línea). Para ello he creado este script:
jQuery(document).ready(function () {
jQuery(".itemLineqty").blur(function (event) {
console.log("Perdido foco");
event.preventDefault();
//Buscamos la línea a la que pertenece el campo que dispara este evento
let row = $(this).parents("tr").first();
//Comprobamos si usa lotes
let useBatch = row.find("[table-field='useBatchs']").is(':checked')
console.log("Artículo usa lotes: " + useBatch);
if (useBatch == true) {
console.log("SÍ");
//Obtenemos los datos del artículo del que queremos obtener los lotes
const toGetBatchData = {
itemCode: row.find("[table-field='Id']").val(),
};
//Y hacemos la petición al servidor
$.ajax({
dataType: 'json',
type: 'GET',
url: '/ProductionOrders/ItemBatchs',
data: toGetBatchData,
success: function (result) {
let table = "";
for (let i = 0; i < result.length; i++) {
//Creamos línea de tabla en ventana modal
table += "<tr>" +
"<td>" +
result[i].id +
"</td><td>" +
new Date(result[i].expDate).toLocaleDateString() +
"</td><td>" +
'<input class="form-control" type="number" table-field="editQty" value="' + qty + '"> ' +
"</td></tr>";
}
document.getElementById("modalBatchSelectorTableBody").innerHTML = table;
$('#modalBatchSelector').modal('toggle');
$('#modalBatchSelector input').focus();
},
error: function (xhr) {
if (xhr.status >= 300) {
alert("An error occured: " + xhr.status + " " + xhr.statusText);
};
}
});
}
else {
console.log("NO");
};
});
});
El problema que tengo es que, si estoy en la tabla principal, y pierdo el foco usando tabulador, la tabla modal se abre y se cierra, no se queda abierta. He intentado mantenerla abierta mediante la línea
$('#modalBatchSelector input').focus();
Pero sólo funciona si pongo un punto de interrupción en esa línea.
¿Alguna sugerencia?
-----Actualizado-----
Vale, veo que el problema es una mezcla de dos factores:
- Por un lado, al pulsar el tabulador, se pierde el foco de la línea y se cargan los datos. La pega es que al pulsar el tabulador, antes de abrir la ventana modal, el foco pasa a la siguiente línea. Por tanto, al abrir la ventana modal, se pierde el foco de la segunda línea, lo que provoca una segunda llamada a la función.
- Por otro lado, el modal('toggle'). Al hacer la segunda llamada me cierra la ventana modal. Al cambiarla por "show", todo ha quedado al descubierto.
El problema ahora es resolverlo. Tengo que abrir la ventana modal al perder el foco, pero antes de que se reasigne a la siguiente línea ¿eso cómo leches se hace?
Buf, eso de depender de los focos tiene pinta de ser una mala idea porque va a depender del navegador y puede que del sistema operativo también
Quizás puedas responder al evento "han pulsado tabulador" en vez de al evento "ha cambiado el foco"?
-----Actualizado-----
Imagino que con focos y tabuladores, el soporte a móviles quedó descartado
Ah, no sé. A mi me han dicho "cuando el usuario escriba la cantidad en una línea y la deje, si se maneja por lotes, que aparezca la ventana de selección", así que uso la pérdida de foco, porque no es sólo que se pulse tabulador, sino que se haga clic fuera o cualquier otra cosa.
Y no, esto no es para móviles, es una APP de navegador para ordenadores de escritorio (hasta donde yo sé). Vamos a lo simple, porque aquí nadie sabe de programación web, así que...
De momento, lo que he hecho ha sido poner al principio del script:
if ($('#modalBatchSelector').is(":hidden")) {
Una solución muy cutre, pero funciona para que podamos desplegar hoy.
josepzin
28/04/2023, 14:20
A ver, por lo que entiendo tienes que desactivar el evento de perdida de foco apenas se pierde el foco, ¿no?
Más bien, cambiar el foco a la ventana modal, antes de que se vaya a la siguiente línea, si es que eso es posible.
Lo que quiero es poder pulsar el tabulador y que, lo ideal, sería que se pusiera el foco en el primer entry de la ventana modal.
Se me ha sumado otro problema. Resulta que si tengo el foco dentro de uno de estos campos editables, si pulso un botón, la pérdida de foco se ejecuta después de que empiece la ejecución del script del botón, y el truco de si la ventana modal ya estaba abierta no sirve.
¿Alguna recomendación en este caso?
Por otra parte, estoy montando otra funcionalidad, por la cual, al hacer clic en una línea (o en las celdas que no son editables, ahora ya sé hacer eso :D), se abre una ventana modal en la que se muestra una lista de operaciones anteriores realizadas sobre ese artículo. Mi jefe me pide que investigue si hay alguna forma de que, en lugar de usar una ventana modal, se pueda mostrar justo debajo de la línea de la tabla, como si la "desplegáramos". Dice que lo ha visto en otras webs. Claro, yo le he dicho que me de la URL para poder examinar el código y replicarlo, pero me ha dicho que no la tenía a mano (aparte de soltarme un rollo de que yo soy el desarrollador, que es mi trabajo averiguarlo, bla bla bla... Sólo le he pedido un ejemplo -.-U).
En fin, que como sé que dentro de una tabla no se pueden meter otros elementos que no sean líneas o celdas (los Links se sienten discriminados... ¿lo pilláis? porque hace tiempo quería enlazar toda una línea de tabla a... no importa), pues ya le dije que no creía que eso fuera posible, pero me ha insistido y aquí estoy.
Ahora entiendo a los bebés cuando tienen a cada padre hablando un idioma distinto.
Creo que en bootstrap lo que buscas es un collapse, justo debajo de la tabla
Ah, no espera, dentro de la tabla. Momentito, te lo miro, aunque no sé cómo se hace en bootstrap
-----Actualizado-----
Mira estos ejemplos. No es bootstrap, es vuetify que es una implementación de Material (las guías de estilo de Google). Se escribe en Vue muy, muy diferente a Jquery+Bootstrap así que no mires el javascript, solo los ejemplos:
https://v2.vuetifyjs.com/en/components/data-tables/#crud-actions
Los ejemplos de tablas editables están al final: CRUD actions, Edit dialog y Expandable rows.
En este caso el expandable rows solo incluye un texto, pero ya te digo que puedes meter cualquier componente ahí.
-----Actualizado-----
Como primera idea para crear algo parecido a esas expandable rows en bootstrap, prueba a poner la clase collapse a una tr de tu table: https://stackoverflow.com/questions/18495653/how-do-i-collapse-a-table-row-in-bootstrap
josepzin
05/05/2023, 17:25
Madremia vaya bautizo de javascript y css y html... :O
Creo que en bootstrap lo que buscas es un collapse, justo debajo de la tabla
Ah, no espera, dentro de la tabla. Momentito, te lo miro, aunque no sé cómo se hace en bootstrap
-----Actualizado-----
Mira estos ejemplos. No es bootstrap, es vuetify que es una implementación de Material (las guías de estilo de Google). Se escribe en Vue muy, muy diferente a Jquery+Bootstrap así que no mires el javascript, solo los ejemplos:
https://v2.vuetifyjs.com/en/components/data-tables/#crud-actions
Los ejemplos de tablas editables están al final: CRUD actions, Edit dialog y Expandable rows.
En este caso el expandable rows solo incluye un texto, pero ya te digo que puedes meter cualquier componente ahí.
-----Actualizado-----
Como primera idea para crear algo parecido a esas expandable rows en bootstrap, prueba a poner la clase collapse a una tr de tu table: https://stackoverflow.com/questions/18495653/how-do-i-collapse-a-table-row-in-bootstrap
O sea, que la opción más sencilla, si no he entendido mal, es crear una línea de tabla, a todo el ancho, justo después de la linea que clico, y meter ahí la subtabla que estoy creando en el modal actual ¿no?
Pero claro, tal como creo una línea de esas, tengo que eliminar las anteriores, para que se cierren (nada que no se pueda hacer metiendo algún class o atributo propio, buscándolo y borrándolo antes de hacer nada).
Le echaré un vistazo, a ver qué puedo inventar.
Creo que sí
De todas formas, ya te estás acercando al punto en que tu sistema es lo suficientemente complejo como para usar librerías de componentes y que no tengas que escribirlo todo. El vuetify que he enlazado antes es una librería de componentes, pero necesitas Vue y no vas a saltar tanto en tan poco tiempo
Seguro que ya hay librerías de componentes en jquery que hacen lo que quieres. Mira por ejemplo: https://editor.datatables.net//
Sí, esos datatables los he visto. De hecho, los uso, pero como al actualizar, los datos se los paso usando ASP.NET core, me da fallo y termino sobreescribiendo el datatable por una tabla hecha directamente en HTML y perdiendo toda la funcionalidad por el camino. Ya me ha dicho mi "tutor" que para hacer uso de ello, debo renunciar al C# en favor de JS y AJAX, y ahora mismo no me interesa.
De momento, las cosas sencillas: usar ASP.NET Core, acostumbrarme a HTML y JS (que el fichero este ya está teniendo un número de líneas bastante considerable), y ya iremos viendo. Si puedo implementar la subtabla, bien, si no, pues que se conforme con una ventana modal.
Puedes dividir el fichero JavaScript en cuántos ficheros creas necesarios para organizarte, y cargarlos todos uno a uno.
Aún así, en un producción, se prefiere tenerlo todo en un solo Java Script por eficiencia: que la web solo realice una descarga del servidor hace ganar unos milisegundos y juntando todos son muchos a finales de año.
¿Cómo se conjuga que los programadores prefieran dividir el Java Script en varios archivos para organizarse, pero la web prefiera un solo archivo por eficiencia? Con empaquetadores: son herramientas que juntan todos tus archivos .js de desarrollo en un solo .js de producción. Los empaquetadores también añaden gestión de namespaces y librerías, cosa que es tremendamente útil.
No te digo que uses empaquetadores, simplemente te los presento para que los conozcas por si quieres seguir aprendiendo.
Sí, durante el curso nos presentaron una herramienta que venía con VS... no sé si para juntar ficheros, pero sí para miminizarlos... o no sé cómo es la palabra correcta. Esto te coge el js y le borra los espacios, tabulaciones y saltos de línea y te los compacta, generando un fichero .min.js, supongo que para ahorrar espacio (y digo yo, para ahorrar espacio ¿por qué no se compila en un fichero binario, como BennuGD? :D).
Según recuerdo, esa herramienta era semi-automática, y los cambios al fichero .js se reflejaban en su .min.js... pero como vamos con prisas, de momento, vamos a ir haciendo que funcione y luego ya nos preocuparemos de eso.
Sí, los empaquetadores hacen eso: juntar todos los .js que tiene tu proyecto en uno solo y minimizarlo. Y sí, lo hacen de forma automática cada vez que detectan un cambio en tus .js. Y sí también, esto es muy parecido a una compilación. De hecho la moda moderna es escribir en TypeScript, que primero se compila a JavaScript y después se empaqueta.
No se te ocurra configurar esto manualmente, eh. Si necesitas usar estas cosas entonces mejor aprendes algún entorno donde lo tenga todo integrado. Normalmente van asociados a alguna librería grande: Vue, Angular ó React. Y no se hace "luego", si quieres usarlo lo mejor es hacerlo desde el principio. Con el proyecto ya empezado va a ser un follón usar empaquetadores. Por eso digo que te informaba, no recomendaba.
Bueno, compilación no sé, no me he puesto a leerme un .min.js (ni ganas), pero sigue en texto plano y se puede leer, por lo que necesita un proceso previo de interpretación de comandos de varios caracteres y tamaño indeterminado... Lo siento, soy un carca, anclado en la época en que la eficiencia lo es todo, y ver código interpretado me parece un consumo innecesario de recursos :D
Respecto a lo otro, creo que me he explicado mal: cuando dije que lo iba a hacer "luego" me refería a una versión posterior, no después de compilar :D La idea sería, más adelante, configurar VS para que minimice los ficheros, volver a compilar (para que se generen los ficheros minimizados) y volver a desplegar.
Ya digo que eso de Vue, Angular o React no lo usamos, todas las automatizaciones dependen de VS y ASP.Net Core, de momento.
Chrome (más bien, su ejecutor de JavaScript V8) hasta hace poco siempre compilaba el JS a código máquina antes de ejecutarlo. No tenía forma de interpretar JS sin compilarlo antes: https://stackoverflow.com/questions/59807938/the-confusion-with-jit-compilation-in-v8 Es normal en los lenguajes interpretados: se convierten a un bytecode que a su vez se convierte a código máquina. Suele ser transparente para el programador que ni se entera de que esto se hace en el background.
Y sí, te entendí. Te he dicho que meter un empaquetador en un proyecto ya empezado es un follón. O lo haces desde el principio o apechugas con lo que tienes. No digo que sea imposible, pero no le veo el beneficio comparado con el esfuerzo.
josepzin
09/05/2023, 13:05
Capas sobre capas sobre capas. Yo prefiero tenerlo todo mas simple y directo.
Enviado desde mi M2101K7AG mediante Tapatalk
Capas sobre capas sobre capas. Yo prefiero tenerlo todo mas simple y directo.
Enviado desde mi M2101K7AG mediante Tapatalk
:brindis: Te daría un abrazo pero no encuentro el emoticono :D
josepzin
09/05/2023, 14:20
:D :D
Somos dinosaurios en extinción :P
-----Actualizado-----
En su momento me resistí a usas SAS porque eso de tener un intérprete de CSS ya no me gustó nada.
Lo de minificar, a menos que sea una librería externa que ya viene así tampoco lo uso, total mis scripts no son kilométricos.
Ademas si el servidor ya se encarga de servir contenidos comprimidos, pues ya está. Y además con el cacheo que hacen los navegadores o servicios como CloudFlare, entonces menos que menos me voy a estar liando yo con cosas intermedias.
Pero bueno, ahora se usa Wordpress mastodónico con cienes de plugins que cargan cienes de archivos y cienes de librerías con cienes de efectos, asi que lo mio es porque estoy viejo!
masteries
09/05/2023, 14:41
Capas sobre capas sobre capas. Yo prefiero tenerlo todo mas simple y directo.
Hay ocasiones y escenarios donde no te queda otra,
Me he encontrado aquellos que para ejecutar un algoritmo de control en Tiempo-Real, que lee sensores a través de interfaces
físicas (como bus CAN o UART) y dar órdenes a actuadores en forma de motores sin escobilla; todo con un tiempo de respuesta
máximo de 10 ms o incluso de 5 ms ...
quieren utilizar un sistema operativo tipo Linux, y sobre ese Linux, una máquina virtual, y en esa máquina virtual
ejecutar el algoritmo, leer los sensores, dar la orden al actuador y hacer una comprobación al actuador para saber
si le llegó la última orden, y querer hacerlo dentro de ese plazo... y si es posible que el computador consuma menos de 2 Wattios...
Cuando les comentas que tienen que usar interrupciones, transacciones DMA para recibir / enviar los datos, pues ahorrarán mucho tiempo de cómputo...
se te quedan mirando y te dicen... es que soy informático... no sé de qué estás hablando, quieren hacer cualquier cosa con algo que se asemeje a
un PC... bueno, un PC no, un teléfono móvil... sólo me faltaría que quisieran ejecutar código interpretado xD
Hay ocasiones y escenarios donde no te queda otra,
Me he encontrado aquellos que para ejecutar un algoritmo de control en Tiempo-Real, que lee sensores a través de interfaces
físicas (como bus CAN o UART) y dar órdenes a actuadores en forma de motores sin escobilla; todo con un tiempo de respuesta
máximo de 10 ms o incluso de 5 ms ...
quieren utilizar un sistema operativo tipo Linux, y sobre ese Linux, una máquina virtual, y en esa máquina virtual
ejecutar el algoritmo, leer los sensores, dar la orden al actuador y hacer una comprobación al actuador para saber
si le llegó la última orden, y querer hacerlo dentro de ese plazo... y si es posible que el computador consuma menos de 2 Wattios...
Cuando les comentas que tienen que usar interrupciones, transacciones DMA para recibir / enviar los datos, pues ahorrarán mucho tiempo de cómputo...
se te quedan mirando y te dicen... es que soy informático... no sé de qué estás hablando, quieren hacer cualquier cosa con algo que se asemeje a
un PC... bueno, un PC no, un teléfono móvil... sólo me faltaría que quisieran ejecutar código interpretado xD
Primero: no.
En serio, yo no sé cómo puedes encontrar a gente, que incluso estando en tercero de la carrera de informática, que se las da de saber más que tú, un "simple teleco", y que no sepa ni cambiar una tarjeta gráfica... A ver, entiendo la típica madre que dice que su hijo es informático porque hizo un curso de Office ¿pero esta otra fauna? No.
Y lo dice un "simple telequito" que de informática sólo saber hacer intrusismo laboral :awesome:
Segundo: hoy día hay herramientas (HW y SW) para controlar HW externo con cualquier SO. Implementar un SO virtual sobre un Linux... Juer, si te vale una Raspberry Pi Zero, y tiene 20 veces la potencia de cálculo de los aviones comerciales de hace 35 años :D (Cifra obtenida con un ábaco inca del sigo XIV AC).
No sé, yo he controlado un motor con Matlab, he efectuado medidas en remoto con un osciloscopio mediante ¿protocolo I2C? , e incluso he creado programas que reaccionan de forma diferente según medidas obtenidas por otros aparatos del laboratorio usando LabView. Muy crítico tiene que ser el sistema si estás usando un PC con Linux, interrupciones y DMA, cuando usando un DSP por cuatro perras, conectado por USB a cualquier sistema, tienes de sobra (según mi profe de Circuitos Integrados hace 15 años).
Y volviendo al tema, entiendo el uso de HTML, aun siendo interpretado. Entiendo la necesidad de JS para interactuar y modificar el mismo desde el ordenador cliente. Puedo incluso llegar a comprender la necesidad de muchos de usar librerías sobre JS, porque no se atreven a aprender algo nuevo y quieren ir sobre seguro, en algo que está demostrado que funciona, y que no merece la pena el esfuerzo para cambiarlo.
Pero si encima de todo eso pones otra capa y luego otra capa más, es que hay un problema que debería arreglarse desde la misma base. Cuando empiezo a oír que si tal o cual para no escribir más JS, o para simplificar al otro, me suenan a las mismas excusas que ponía (y sigo poniendo, la verdad) para no tener que aprender una funcionalidad nueva de un lenguaje o pasarme a otro más potente. ¿No se suponía que HTML5 iba a cargarse todo esto? ¿Qué ha pasado?
PD: hoy he tenido reunión con mi "tutor" en el trabajo, y me ha dicho que tengo que replantear todo el sistema de navegación de mis apps de Xamarin ^^U Lo dicho, lo que tengo hecho funciona, y lo veo innecesario, y él me ha dicho que eso era hace ya muchos años, y que ahora hay sistemas que te ahorran ese trabajo, así que me toca pasar por reciclaje.
él me ha dicho que eso era hace ya muchos años, y que ahora hay sistemas que te ahorran ese trabajo, así que me toca pasar por reciclaje.
Pues eso. Llevas semanas para hacer una tabla editable, cuando es algo solucionado hace años y que las librerías actuales te lo dan de gratis.
¿Que pierdes un poco el control? Bueno, pero haces en horas lo que llevas semanas tratando de hacer y seguramente también mucho mejor y con menos errores. ¡Toca reciclarse!
masteries
10/05/2023, 18:32
En serio, yo no sé cómo puedes encontrar a gente :awesome:
Segundo: hoy día hay herramientas (HW y SW) para controlar HW externo con cualquier SO. Implementar un SO virtual sobre un Linux...
Editado: Pedazo de offtopic largo que me ha salido...
Están por todas partes Drumpi; incluso los contratan y cuando llegan al puesto de trabajo WTF? ¿Pero esto qué es? Sino cuadra con mi perfil...
Hace tiempo que he detectado un problema gordo de entendimiento por parte de RR.HH. , en empresas bastante grandecitas,
para hacer el matching entre lo que les han pedido desde dptos. de la empresa, y los candidat@s que van localizando
Lo segundo no les está funcionando, es para implementar el sistema de control vital de una nave espacial en la que
van tripulantes dentro (presión, mezcla de gases, control de humedad, captación del CO2, filtrado del mismo, temperatura...);
si funciona mal se mueren, así de simple.
El sistema de control no debiera ser complejo en lo que a capas software se refiere, y por supuesto,
montarlo por triplicado (para hacer un sistema votador) y a su vez duplicar ese sistema.
La opción a la que están recurriendo (como medida de emergencia), es la de reemplazar el sistema comercial, carete, endurecido frente a radiación y tal que ya tenían;
y todo lo relacionado con entrada/salida por diseños custom que están haciendo en la empresa, en VHDL para que los datos
vayan directamente a regiones de memoria, de las asignadas por linux a la máquina virtual; una amalgama que ya cuesta hasta entenderla...
La interrupciones y los DMA de, no es un PC, porque emplea un MIPS; no las están usando porque no saben.
En fin una mezcla de churras y meninas; tuvimos una reunión con ellos y nos explicaron el invento;
el concepto de un móvil para todo eso... yo y los asistentes del dpto. de electrónica estábamos flipando,
Expusimos que cada concepto de computador tiene su escenario de aplicación,
y que el hecho de que les resultase difícil hacer un acceso de entrada/salida
ya les estaba poniendo sobre la mesa que el camino no es muy acertado,
para el uso que necesitan,
Para otros usos, puede ser una maravilla, ahí ya no íbamos a entrar;
pero para añadir el control de estas cosas mejor que no,
Así que están ignorando las especificaciones del contrato con la ESA,
en las que les pedían que este viaje, hardware custom no querían;
y es justo a lo que están recurriendo, a meter más custom que antes... en fin
Desconozco como querrán justificarlo, pero los revisores se lo van a echar para atrás
y les van a pedir la devolución íntegra del presupuesto recibido; desde 2023 es así,
si no permaneces estricto en los límites que te han impuesto, tanto en especificaciones
como en plazo de tiempo para desarrollar, devolución en la revisión.
Y cómo bien indicabas Drumpi, todo esto con unos micros o DSP, sería mucho más sencillo
, que existen ya endurecidos contra radiación por 300€ la unidad; que no son nada caros
(y son ARM-Cortex M4 con coma flotante a 180 MHz, con su plétora de interfaces:
CAN, I2C, UART y SpaceWire, éste último puedes entenderlo como un CAN más rapido);
El sistema triplicado y a su vez todo duplicado, en DSPs te sale por 1800€, ahora pon
los transceivers también Rad-Hard... vamos todo por 3500€ o 4000€ si nos vamos lejos,
y empiezas a montar tu sistema de control vital con todo eso tan robusto (esos micros llevan
ECC en la RAM y en la ROM, por si cambia de forma súbita hasta 2 bits por cada 32, se corrigen solitos
y son micros de 300€, y aguantan una dosis de radiación que nos dejarían a todos tiesos unas cuántas veces...)
el MIPS que están usando, sólo el micro son 425.000€ , lo han desechado y la
FPGA custom que están usando ronda el millón;
Creo que me ha faltado comentar que los buenos que tenían haciendo
y dirigiendo (si, el director, que también participaba en lo técnico
diseñando las arquitecturas y por cierto, que es muy simpatico y accesible,
ya no está y ha entrado alguien que sólo desea dirigir y de lo técnico o arquitecturas ni idea)
todos estos se han marchado a la empresa del al lado, todos
sabemos por qué; y los han reemplazado con personal de batalla y sin
experiencia en el campo donde los han puesto a trabajar; excepto los
expertos en VHDL que ya tienen, éstos últimos están flipando también
Y no es un caso aislado,
Y hasta aquí el offtopic,
Pues eso. Llevas semanas para hacer una tabla editable, cuando es algo solucionado hace años y que las librerías actuales te lo dan de gratis.
¿Que pierdes un poco el control? Bueno, pero haces en horas lo que llevas semanas tratando de hacer y seguramente también mucho mejor y con menos errores. ¡Toca reciclarse!
A ver, creo que lo de la tabla editable hace ya bastante que está resuelto :D
Lo cierto es que el nivel de interactividad que he conseguido en esta página era impensable hace un mes :D Creo que ya voy entendiendo un poco el uso de JS y JQuery, sólo necesito más ejercicios guiados para terminar de aprender sintaxis y funciones básicas, para poder escribir mi propio código.
Pero una cosa es aprender algo que no se sabe, y para lo que hay que ir desde lo más básico (léase HTML+JS+whatever), y otra cosa es reciclarse con algo que ya más o menos dominas, que es ir un paso más allá.
Yo siempre he tenido tendencia a acomodarme en lo que sé: mantenerme en una versión del lenguaje, usar las mismas funciones, de vez en cuando voy inventando cosas o leo alguna cosilla nueva... pero no me pongo a leer y experimentar con las cosas del changelog de los desarrolladores, y bueno, con el tiempo, me pasa factura, pero en los proyectos del trabajo hay que trabajar así, sobre todo porque cambiar de versión las librerías de un proyecto causan (siempre) dolores muy gordos de cabeza :D
Están por todas partes Drumpi; incluso los contratan y cuando llegan al puesto de trabajo WTF? ¿Pero esto qué es? Sino cuadra con mi perfil...
Hace tiempo que he detectado un problema gordo de entendimiento por parte de RR.HH. , en empresas bastante grandecitas,
para hacer el matching entre lo que les han pedido desde dptos. de la empresa, y los candidat@s que van localizando
Aquí voy a romper también una lanza en favor de los curritos nuevos, porque es lo que dices: la mitad de las veces, los de RRHH no saben lo que les están pidiendo desde los departamentos técnicos. Pero es que claro, los de RRHH entienden de personas, no de ingeniería, y su labor es conseguir construir un grupo de gente competente, que trabaje junta (o que al menos, no terminen matándose entre ellos), o como mínimo, sea gente que trabaje.
Pero es que es eso, hay informáticos que no saben montar un PC, y luego hay quien miente descaradamente sobre lo que sabe hacer y lo que no.
...y a veces, es la propia empresa, que pone un trabalenguas de siglas y nombres en los requisitos mínimos, que ni su programador senior más experimentado tiene esos conocimientos :D
Lo segundo no les está funcionando, es para implementar el sistema de control vital de una nave espacial...
Ya está, ya lo has dicho todo.
Con eso hasta Linux sobra. A no ser que metan un kernel y generen un SO a medida para uso en tiempo real (o algún SO de tiempo real, que los hay). Pero no, para eso un DSP, y cuanto menos código mejor... aunque con los sistemas de hoy día, con una Wiz forrada de plomo ya tienen más potencia de cálculo que en todo el conjunto del Apolo 11 :D
Aún recuerdo el esquema que nos ponía nuestro profesor: primero un recuadro grande, representando el problema hace 30 años, y dentro, un montón de piezas de "tetris" que representaban distintos CI específicos. Al lado, el esquema actual, que consistía en un cuadrado grande, y otro más pequeño dentro, en una esquina: el cuadrado grande era un CI estándar (por ejemplo, un DSP), y el pequeño era el problema a resolver :D
De hecho, en mi carrera, a los dos años de irme, dejaron de enseñar ASM, porque en la única asignatura que se enseñaba, que usábamos el 68K, lo sustituyeron por otro micro que ya se programaba en C. ASM son para los nostálgicos y los masoquistas, decían, porque la potencia de cómputo actual hace innecesario tener que ir a tan bajo nivel.
No voy a discutirlo, porque no he tenido que comprobarlo, pero temo el día que llegue el IEM que nos mande a todos a la Edad Media, y no haya nadie capaz de desarrollar tecnologías primitivas para poder recuperar las más actuales :D
El desarrollo web moderno está tan alejado de html+js+css que creo que ya no es eficiente empezar así.. Sería (exegerando, pero tampoco mucho) como empezar a estudiar programación de PC enseñando ensamblador. No és una forma eficiente de llegar a algo productivo y moderno.
Los navegadores siguen interpretando solo html+js+css, pero las webs no se programa así. Todo el desarrollo actual se hace en otros lenguajes "de alto nivel" y sistemas que después se compilan/empaquetan a html+js+css "de bajo nivel". Por ejemplo, poca gente escribe ya nada de HTML puro (son todo componentes) y TypeScript se está haciendo dueño y señor del mundillo, creo yo. Incluso si usas JavaScript, lo harás a través de un framework. Vamos, que prácticamente solo escribes "addons" para alguna librería grande.
Ahora que ya tienes el ritmo, cualquier fin de semana pilla un tutorial de Vue/React para hacer algo simple y verás lo diferente que es.
Repito: estoy atado a ASP.NET Core y Visual Studio. Genero páginas HTML mediante Razor pages, y el problema ha venido porque una vez que ASP.NET ha creado el HTML, la única forma de interactuar con la página (sin tener que cargar otra o actualizarla) es mediante scripts JS que se guardan en la carpeta wwwroot, o se incrustan en el cshtml, en una etiqueta <script>.
Si me dices la manera de usar Vue, React, TypeScript o cualquier otra cosa en el proyecto, lo podré mirar. Mientras tanto, tengo que tirar, de momento, con JS, JQuery, AJAX y cualquier librería o "cosa" que pueda usar directamente dentro de ficheros .js.
-----Actualizado-----
EDIT: ¿He roto la página principal?
Ah, no, yo en tu proyecto de trabajo no me meto. Haz como veas
Sí te fijas, te he recomendado mirarlo "un finde semana", para aprender y jugar, y con algún ejemplo simple, para ver cómo es el desarrollo web actual.
Por supuesto, puedes dedicar tu tiempo libre como estimes conveniente.
selecter25
11/05/2023, 19:39
El desarrollo web moderno está tan alejado de html+js+css que creo que ya no es eficiente empezar así.. Sería (exegerando, pero tampoco mucho) como empezar a estudiar programación de PC enseñando ensamblador. No és una forma eficiente de llegar a algo productivo y moderno.
Los navegadores siguen interpretando solo html+js+css, pero las webs no se programa así. Todo el desarrollo actual se hace en otros lenguajes "de alto nivel" y sistemas que después se compilan/empaquetan a html+js+css "de bajo nivel". Por ejemplo, poca gente escribe ya nada de HTML puro (son todo componentes) y TypeScript se está haciendo dueño y señor del mundillo, creo yo. Incluso si usas JavaScript, lo harás a través de un framework. Vamos, que prácticamente solo escribes "addons" para alguna librería grande.
Ahora que ya tienes el ritmo, cualquier fin de semana pilla un tutorial de Vue/React para hacer algo simple y verás lo diferente que es.
Yo estoy leyendo por encima el hilo, y después de haber estado algunas semanas tocando Angular/React-Next/Vue (los 2 primeros con TS y la última con JS), tengo que darte la razón al 1000%, son cosas que con cualquiera de estos frameworks resuelves en 15min. Veo esos "parches" con JS Vanilla y Jquery y me da urticaria.
Y si yo que no había hecho apenas web me adapté a ellos (repliqué el proyecto en los 3 frameworks sin muchos problemas), cualquier persona que sí haya hecho y tenga un mínimo dominio de HTML/CSS/JS-TS, lo tiene controlado en unos días, en cuanto pilote un poco haciéndose a patrones y programación reactiva.
Ahora porque me han pasado a iOS, pero sin duda cualquier cosa que hiciese en web sería en React/Angular.
josepzin
11/05/2023, 21:40
pero sin duda cualquier cosa que hiciese en web sería en React/Angular.
Moderneces innecesarias!! :V
selecter25
11/05/2023, 22:30
Moderneces innecesarias!! :V
https://i.imgur.com/SNjFR0i.jpg
josepzin
12/05/2023, 03:29
No necesitamos ruedas de piedra para una bicicleta!!
https://i.pinimg.com/originals/ef/25/1e/ef251ef4716b80c03c82ee629aeb4239.jpg
Dejando aparte la discusión de si es necesario tanto framework para trabajar con JS o lo que sea, que modifica HTML o lo que toque (que como digo, personalmente, me parece de una ineficiencia abismal :D), el problema que tengo yo es que me enfrento a un proyecto web, sin tener ni idea de HTML (que no es que sea excesivamente complicado, por lo que estoy viendo, pero tiene muchos matices) ni JS, y aunque es cierto que hay herramientas diseñadas para gente como yo, el problema es que estoy obligado a trabajar en ASP.NET.
En este marco, tengo dos lenguajes que no conozco, que debo aprender a usar, mediante ASP.NET, cuando me estáis recomendando usar un Framework (que no sé usar ni cómo funciona), que no sé si se puede integrar en el proyecto, ni cómo hacerlo.
...Y para más INRI, se me ha abierto otro frente, en el que tengo que portar un proyecto que usa una API de una DLL, para que sustituya esas llamada a un WCF Data Service. Por si éramos pocos, parió https.
No, no te estoy recomendando usar React o lo que sea en tu trabajo. Tu trabajo es tu trinchera y no me meto. Recomendarte cómo hacer tu trabajo es como el abuelo que se pone a mirar obras y dice cómo hay que usar el pico. En tu trabajo, tú sabrás y no se me ocurre meterme que ya tengo bastante con el mío.
Digo que fuera de tu trabajo, en tu casa, algún día de aburrido, si te apetece y tienes curiosidad, te mires Vue/React/Angular y verás el mundo moderno.
En tu casa, para aprender desarrollo web, no empieces con un proyecto que necesite backend. Y si te lías con algún proyecto que necesite backend, nadie te obliga a usar asp.net. Y si por alguna razón en tu casa sigues sintiendo la obligación de usar asp.net, observa el truco: "create new project->asp.net+Vue". Ale, integrado.
selecter25
12/05/2023, 20:32
Exacto, en el curro no te va a quedar otra que morir con las tecnologías que te impongan, el que te mires algo de frameworks JS/TS es para que veas cómo se programa en web actualmente. En cuanto a lo de ineficiente, yo creo que es totalmente al contrario, de hecho creo que va a hacer que te deprimas más en el curro si llegas a probarlo :lol2:.
No, si hubiera una forma de integrar esas tecnologías con lo que tengo que usar, si me simplifican el trabajo, yo firmo (que mi jefe quiere que implementemos pronto una web con todas las pijaditas de scroll parallax y demás que se ven por ahí ya mismo, usando esto :D). El problema es que, aunque alguien supiera, yo no tengo ni idea de dónde tengo la... librería, y se complica todo ^^U.
De todas formas, decirme que usar los frameworks estos para hacerlo todo más eficiente, me suena a decirme que se hagan los programas en Java para hacerlos más eficientes, porque con un programa se ejecuta en todas las máquinas. O más bien que se use Visual Studio en lugar de Eclipse, porque el entorno de desarrollo es más rápido; sí, programas más rápido, pero no eliminas el problema de base.
Por cierto, lo de HTTPS va por otros derroteros diferentes, ya veremos si abro hilo al respecto o no.
josepzin
15/05/2023, 15:51
Ahora mismo hay tantas tecnologías al mismo tiempo que es una auténtico babel de idiomas, librerías, frameworks, formas de hacer las cosas y etc.
A mi ya me pilla mayor y seguramente moriré con la simpleza de mis clientes/proyectos mas pequeños y sin tantas cosas.
De hecho ya he decidido pasar de Wordpress, no porque no lo use más (no hay alternativa) sino porque directamente lo estoy delegando a otra gente que se dedica a WP, a mi el estrés de encontrarme un día que no funciona la web porque se metió un virus que contaminó todo o que uno de los servicios conectados dejó de funcionar por algún cambio externo no me compensa, y pudiendo elegir...
Iba a decir que, mientras tanto, la web de Drumpi, hecha en WP hace siglos, se mantienen funcionando sin mantenimiento alguno... pero parece ser que por estar tanto tiempo inactivo, la han archivado y ahora no recuerdo la clave de acceso ^^U Cuando llegue a casa la buscaré :D
Pero oye, la web que hice para el curso de WP ahí sigue: https://sartenrebozada.wordpress.com/
:lol:
josepzin
15/05/2023, 19:10
Señor, eso es trampa! esa web está alojada en el servidor de WP y ellos se encargan del mantenimiento, es como Blogger!
Ultima entrada: 2016 :D
En cambio yo estoy en el lado oscuro de Goggle: http://josepzin.blogspot.com/
Powered by vBulletin® Version 4.2.5 Copyright © 2025 vBulletin Solutions Inc. All rights reserved.