Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Problema al obtener src con jquery

JavaScript - Problema al obtener src con jquery

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Problema al obtener src con jquery

Publicado por Victor (5 intervenciones) el 22/09/2015 16:41:39
Gracias de antemano a todos,

Estoy teniendo problemas al obtener al src de una imagen. Explico el caso:

Genero en mi portal una serie de gráficas al vuelo mediante amcharts, y quiero mandarlas a imprimir en pdf.
Para ello con una funcion en javascript genero una imagen en base64 y la quiero mandar mediante una funcion en ajax.
La asigno a un src de una imagen y aunque en pantalla se ve que lo está haciendo bien, si quiero obtenerlo mas adelante mediante jquery me da "vacio".

El caso extraño es que si clico una segunda vez sobre el boton que pone en marcha todo esto si que el src tiene el contenido correcto, pero quiero que lo haga bien en el primer click.

Da la sensación que es como si no se hubiese refrescado esa información.

¿Alguien sabe como solucionarlo?

Muchas gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema al obtener src con jquery

Publicado por xve (2100 intervenciones) el 22/09/2015 19:17:37
Hola Victor, me cuesta un poco imaginar exactamente como lo haces... nos puedes poner un trozo de código para poder verlo y probarlo?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Problema al obtener src con jquery

Publicado por Victor (5 intervenciones) el 23/09/2015 10:55:26
Ante todo muchas gracias

Te comento el código y te lo muestro:

1º - Capturo la grafica de amcharts y la paso a un png.
2º - La modifico en el html que se muestra para mandarlo a imprimir a pdf
3º - capturo otra vez la información del src para enviarlo por ajax
4 - llamada a jax

Te comento en el script cual es la variable que esta vacía

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
<script type="text/javascript">
$(document).ready(function(){
 
	$("#descargarPDF").live("click", function() {
		// createReport();

 
		AmCharts.charts[0].export.capture({}, function() {
			// Export to PNG

			this.toPNG({
				multiplier: 5 // increased for the tutorial

 
				// Add image to the layout reference

				  }, function(data) {
 
				// 

				var srcgraf1 = data;
				$("#imgchartdiv").attr('src', srcgraf1);
				$("#chartdiv").hide();
				$("#imgchartdiv").show();
			});
		});
 
 
		var pagina1 = $("#pagina1").html();
		var pagina2 = $("#pagina2").html();
		var pagina3 = $("#pagina3").html();
 
 
		$("#chartdiv").hide();
		$("#imgchartdiv").show();
		$("#chartdiv2").hide();
		$("#imgchartdiv2").show();
		$("#chartdiv3").hide();
		$("#imgchartdiv3").show();
 
 
 
		var grafica1 = $("#imgchartdiv").attr('src');
 
		//alert(grafica1); Esto es lo que sale vacio en el primer clic y con contenido en el 2º

 
 
		$.ajax({
			type: "POST",
			url: "ajax/imprimir_informe_ayudas.php",
			dataType: 'json',
			data: { pagina1: pagina1, pagina2: pagina2, pagina3: pagina3, srcgraf1: srcgraf1},
			success: function(datos) {
				// window.location.href = "index.php?Id=180&action=informe&u=3831351986747192970856788468844015458436961252272676&print=true";

			}
		})
 
	});
});
</script>


Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema al obtener src con jquery

Publicado por Vainas (258 intervenciones) el 23/09/2015 18:56:29
Buenas de nuevo:

Aqui lo que tienes que entender es el concepto de callback o promesas y diferidos en javascript.

1
2
3
4
5
6
7
8
9
10
11
this.toPNG({
	multiplier: 5 // increased for the tutorial

	// Add image to the layout reference

	}, function(data) {
	// 

		var srcgraf1 = data;
		$("#imgchartdiv").attr('src', srcgraf1);
		$("#chartdiv").hide();
		$("#imgchartdiv").show();
	});
...

Esa function dentro de crear un PNG no se ejecuta en el momento sino que se le pasa a la funcion toPNG y esta ya la ejecutara cuando pueda asi que el valor de data no se tendra hasta que en realidad se ejecute la funcion...

Asi que digamos que esto se ejecuta en algun momento cuando lo decida toPNG y el valor no lo tenemos en el momento que creemos mas abajo... y es por eso que mas adelante cuando ya si se lo asigna lo ves en la segunda ejecucion, no es que veas que en el segundo click si que se le asigna un valor sino que ves el valor que se le asigno la primera ves.

Te dejo un link para que veas un articulo en español sobre este tema: http://www.funcion13.com/comprendiendo-promesas-y-deferreds-en-jquery/

Si vas a utilizar esto de las promesas es mejor que lo hagas con una libreria como jQuery ya que en simple javascript no es tan facil (la implementacion es un tanto complicada de entender).

Opciones que tienes:

1. Metemos todo lo que tienes debajo dentro de la function anonima que se le pasa a toPNG como segundo parametro.
2. Implementamos de alguna forma una promesa:

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
<script type="text/javascript">
$(document).ready(function(){
 var promesa_graf1 = $.Deferred();  
 
	$("#descargarPDF").live("click", function() {
		// createReport();

 
		AmCharts.charts[0].export.capture({}, function() {
			// Export to PNG

			this.toPNG({
				multiplier: 5 // increased for the tutorial

 
				// Add image to the layout reference

				  }, function(data) {
 
				// 

 
				var srcgraf1 = data;
				$("#imgchartdiv").attr('src', srcgraf1);
				$("#chartdiv").hide();
				$("#imgchartdiv").show();
				promesa_graf1.resolve();
			});
		});
 
		promesa_graf1.done(function(){
		var pagina1 = $("#pagina1").html();
		var pagina2 = $("#pagina2").html();
		var pagina3 = $("#pagina3").html();
 
 
		$("#chartdiv").hide();
		$("#imgchartdiv").show();
		$("#chartdiv2").hide();
		$("#imgchartdiv2").show();
		$("#chartdiv3").hide();
		$("#imgchartdiv3").show();
 
 
 
		var grafica1 = $("#imgchartdiv").attr('src');
 
		//alert(grafica1); Esto es lo que sale vacio en el primer clic y con contenido en el 2º

 
 
		$.ajax({
			type: "POST",
			url: "ajax/imprimir_informe_ayudas.php",
			dataType: 'json',
			data: { pagina1: pagina1, pagina2: pagina2, pagina3: pagina3, srcgraf1: srcgraf1},
			success: function(datos) {
				// window.location.href = "index.php?Id=180&action=informe&u=3831351986747192970856788468844015458436961252272676&print=true";

			}
		});
	});
 
	});
});
</script>

No se si esta bien implementado pero eso seria la idea. Es decirle dentro de la function(data)... que cuando este lista y tenga en valor resuelva la promesa y ejecute todo lo que esta dentro de done

Espero que quede mas o menos claro.

Saludos.

Actualizo: Otra cosa mas. No uses live ya que se a eliminado en versiones superiores de jQuery mejor usa .on o .click.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Problema al obtener src con jquery

Publicado por Victor (5 intervenciones) el 24/09/2015 10:39:40
Muchisimas gracias por la ayuda y por la información. La solución es la que buscaba.

Lo único he tenido que modificarla ya que hay varias graficas y he recorrido un array con todas las graficas para imprimir el documento en pdf.

EL "promesa_graf1.resolve();" se lo he puesto a la ultima de ellas y parece que funciona muy bien.

Otra vez, mil gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema al obtener src con jquery

Publicado por Vainas (258 intervenciones) el 23/09/2015 10:46:47
Buenas:

Sin codigo no podemos hacer nada.

Si queda "vacio" puede ser que estes creando una variable dentro de una funcion que luego se destruye y por eso no puedes luego ver desde otro lado....

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Problema al obtener src con jquery

Publicado por Victor (5 intervenciones) el 23/09/2015 17:58:23
Ante todo muchas gracias

Te comento y te paso el código, pero es muy posible que sea lo que me dices. No soy muy experto en javascript.

1º - Capturo la grafica de amcharts y la paso a un png.
2º - La modifico en el html que se muestra para mandarlo a imprimir a pdf
3º - capturo otra vez la información del src para enviarlo por ajax
4 - llamada a jax

Te comento en el script cual es la variable que esta vacía

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
<script type="text/javascript">
$(document).ready(function(){
 
	$("#descargarPDF").live("click", function() {
		// createReport();

 
		AmCharts.charts[0].export.capture({}, function() {
			// Export to PNG

			this.toPNG({
				multiplier: 5 // increased for the tutorial

 
				// Add image to the layout reference

				  }, function(data) {
 
				// 

				var srcgraf1 = data;
				$("#imgchartdiv").attr('src', srcgraf1);
				$("#chartdiv").hide();
				$("#imgchartdiv").show();
			});
		});
 
		var grafica1 = $("#imgchartdiv").attr('src');
 
		alert(grafica1);
 
 
 
		var pagina1 = $("#pagina1").html();
		var pagina2 = $("#pagina2").html();
		var pagina3 = $("#pagina3").html();
 
		$("#chartdiv").hide();
		$("#imgchartdiv").show();
		$("#chartdiv2").hide();
		$("#imgchartdiv2").show();
		$("#chartdiv3").hide();
		$("#imgchartdiv3").show();
 
 
		var grafica1 = $("#imgchartdiv").attr('src');
 
		alert(grafica1); //Esto es lo que sale vacio en el primer clic y con contenido en el 2º

 
		$.ajax({
			type: "POST",
			url: "ajax/imprimir_informe_ayudas.php",
			dataType: 'json',
			data: { pagina1: pagina1, pagina2: pagina2, pagina3: pagina3, srcgraf1: srcgraf1},
			success: function(datos) {
 
			}
		})
 
	});
});
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Problema al obtener src con jquery

Publicado por Victor (5 intervenciones) el 24/09/2015 10:43:03
Muchisimas gracias,

Es lo que necesitaba, tanto por la solución que me planteas como por la información adjuntada.

Lo único que me ha tocado cambiar es que tengo varias gráficas y tengo que recorrer un array con todas ellas para imprimirlas en pdf.

EL "promesa_graf1.resolve();" se lo he puesto en la llamada a "toPNG" en la última de ellas.

Otra vez, mil gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar