Jquery el evento MouseOver
Publicado por Jose (11 intervenciones) el 06/11/2017 22:55:21
Que tal comunidad espero estén bien, una vez mas vengo a pedirles su consejo les muestro un archivo JS que tengo a continuación:
Les explico de que trata, trata de crear un datatable dinámico a partir de un excel, lo que busco es que cuando cargo el excel al datatable debo ejecutar un conjunto de validaciones de acuerdo al tipo de campo; estoy trabajando con Laravel, las validaciones van fenomenal, todo funciona excepto lo siguiente:
Si vieron mi archivo JS verán que hago un petición AJAX, en donde envió una variable "$id" y una variable "text", que pasa básicamente?, al enviar al controlador de Laravel el $id estoy enviando el ID del TD en el que estoy haciendo clic en ese momento, adicional envió a "text" que es el texto que esta en el TD, en el controlador tengo un switch que recibe el ID y el "text", ese switch dependiendo de lo que reciba aplica validaciones: Campo no puede ser blanco, debe tener XX caracteres etc...
Para eso es la bandera, cuando la bandera es 0 significa que "text" no cumple con las reglas así que allí pueden ver que recorro con un $each un arreglo llamado data.error, en data.error tengo los errores que me reporto Laravel a través de Json.
Eso que esta allí es para poder colorear con un borde rojo la celda TD de la tabla que no cumple con la regla, pero necesito mostrar el mensaje de la validación con un tooltip.
Entonces fijence como todo funciona fenomenal, el borde rojo se colorea en el campo que no cumple la regla, entonces coloque el tooltip para que me salga el mensaje donde yo haga mouseover, el tema es que no funciona.
El mouseover no funciona, la celda se colorea perfecto en donde esta el error y se descolorea cuando cumple la validación, pero el tooltip aparece es en la primera fila de la tabla, no en el lugar donde debería ser, es decir, si el error ocurrió en la cuarta fila, el td se colorea en rojo perfecto pero el tooltip aparece en la primera fila y se queda congelado.
Que estoy haciendo mal? en verdad no lo veo. Espero me puedan ayudar.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
$(document).ready(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}});
$("#formtable").on("click",function (e) {
e.preventDefault();
});
/*Buscamos el TD de la tabla que tenga la clase edit*/$("td.edit").on("click", function () {
var $this = $(this);
var $id = $this.attr("id");
var Value = $this.text();
/*Se crea un input dinamico*/var $input = $('<input type="text" value="' + Value + '"/>');
/*Finalmente se agrega el input al campo TD y se le crea el foco*/$this.html("").append($input);
$input.focus();
/*Se crea una funcion para indicar que cuando el input pierda el foco ejecute lo siguiente:*/$input.on("blur", function () {
var text = $input.val();
$input.remove();
$this.text(text);
/*Se envia un ajax con el id y con el valor del input para validarlo en Laravel */ $.ajax({
url: 'editable',
type: 'post',
data: {'id': $id, 'value': text},
dataType: 'json',
success: function (data) {
var bandera=data.bandera;
/*Si la bandera es 0 significa que lo agarra la validacion*/if(bandera==0)
{$.each(data.error, function (index, contenido) {
$this.attr("style","border: solid #ff1b08;");
$this.mouseover(function(){
$("#"+$id).tooltip({
content:""+contenido
});
})
})
} /*Si la validacion es exitosa se quita el marco rojo de error encontrado*/else
{$this.attr("style","border-collapse: separate;");
$( "#"+$id ).tooltip({
content:""
});
}},
error: function (e) {
alert("Algo sucedio: " + e);
}})
}).on("click", function (e) {
e.stopPropagation()
});
});
Les explico de que trata, trata de crear un datatable dinámico a partir de un excel, lo que busco es que cuando cargo el excel al datatable debo ejecutar un conjunto de validaciones de acuerdo al tipo de campo; estoy trabajando con Laravel, las validaciones van fenomenal, todo funciona excepto lo siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
/*Si la bandera es 0 significa que lo agarra la validacion*/if(bandera==0)
{$.each(data.error, function (index, contenido) {
$this.attr("style","border: solid #ff1b08;");
$this.mouseover(function(){
$("#"+$id).tooltip({
content:""+contenido
});
})
})
}Si vieron mi archivo JS verán que hago un petición AJAX, en donde envió una variable "$id" y una variable "text", que pasa básicamente?, al enviar al controlador de Laravel el $id estoy enviando el ID del TD en el que estoy haciendo clic en ese momento, adicional envió a "text" que es el texto que esta en el TD, en el controlador tengo un switch que recibe el ID y el "text", ese switch dependiendo de lo que reciba aplica validaciones: Campo no puede ser blanco, debe tener XX caracteres etc...
Para eso es la bandera, cuando la bandera es 0 significa que "text" no cumple con las reglas así que allí pueden ver que recorro con un $each un arreglo llamado data.error, en data.error tengo los errores que me reporto Laravel a través de Json.
1
$this.attr("style","border: solid #ff1b08;");
Eso que esta allí es para poder colorear con un borde rojo la celda TD de la tabla que no cumple con la regla, pero necesito mostrar el mensaje de la validación con un tooltip.
1
2
3
4
5
$this.mouseover(function(){
$("#"+$id).tooltip({
content:""+contenido
});
})
Entonces fijence como todo funciona fenomenal, el borde rojo se colorea en el campo que no cumple la regla, entonces coloque el tooltip para que me salga el mensaje donde yo haga mouseover, el tema es que no funciona.
El mouseover no funciona, la celda se colorea perfecto en donde esta el error y se descolorea cuando cumple la validación, pero el tooltip aparece es en la primera fila de la tabla, no en el lugar donde debería ser, es decir, si el error ocurrió en la cuarta fila, el td se colorea en rojo perfecto pero el tooltip aparece en la primera fila y se queda congelado.
Que estoy haciendo mal? en verdad no lo veo. Espero me puedan ayudar.
Valora esta pregunta
0