JavaScript - Elementos dinamicos con Ajax

 
Vista:
sin imagen de perfil

Elementos dinamicos con Ajax

Publicado por Vidal Garza (15 intervenciones) el 18/03/2016 20:18:44
Buen día Foro,

Les mando muchos saludos.

Les platico que en una pagina estoy cargando contenido html, pero una vez que traigo el contenido quisierae en la misma seccion success poderle cambiar un atributo al elemento que estoy creando, es decir, en el ajax traigo un contenido html de tabs y por defecto el tab muestra el primer tab. Lo que necesito hacer es cuando le doy el append, ahi mismo cambiar la clase para que me muestre por defecto otro tab.

El codigo que estoy utilizando para traerl el contenido html es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$.ajax({
        type: "POST",
        url: "http://162.253.184.187:3000/trafficStats.html",
        dataType: "html",
        error: function(){
                alert("error peticion ajax");
        },
        success:
                function(data){
                        $("#div1").empty();
                        $("#div1").append(data);
 
#                                       var loader = document.getElementById("tabs-1");
#                                       loader.className = "ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide";
 
#                                       var loader = document.getElementById("tabs-4");
#                                       loader.className = "ui-tabs-panel ui-widget-content ui-corner-bottom";
 
 
                }
    });
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 Jordi
Val: 4
Ha aumentado su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Elementos dinamicos con Ajax

Publicado por Jordi (76 intervenciones) el 19/03/2016 08:07:28
Hola Vidal,

Primeramente, comentar que utilizar (jQuery).empty().append("algo") es lo mismo que (jQuery).html(algo).

Luego, la solución a tu problema es que antes de añadir el data dentro de tu #div1, tienes que parsearlo y hacerle el cambio.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.ajax({
        type: "POST",
        url: "http://162.253.184.187:3000/trafficStats.html",
        dataType: "html",
        error: function(){
                alert("error peticion ajax");
        },
        success:
                function(response){
                        var data = $.parseHTML(response);  // Guardas tu response como HTML
                        data.find(".active").removeClass("active"); // EJEMPLO - con selectores, desactivas tu pestaña activa
                        data.find("#miTab").addClass("active"); // EJEMPLO - con selectores, activas la pestaña que quieras
                        $("#div1").html(data); // Añades los datos con la pestaña arreglada
                }
    });
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

Elementos dinamicos con Ajax

Publicado por Vainas (258 intervenciones) el 19/03/2016 09:44:32
Buenas:

No habia usado parseHTML que yo recuerde pero es una buena opcion.

Yo suelo hacerlo metiendo la respuesta del servidor en una variable jQuery:

1
var $data = $(response);

el $ delante de data no es necesario.

No se si hay alguna diferencia entre lo que yo expongo y lo que dice Jordi.

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
Imágen de perfil de Jordi
Val: 4
Ha aumentado su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Elementos dinamicos con Ajax

Publicado por Jordi (76 intervenciones) el 19/03/2016 12:27:20
El parseHTML y el $(elemento) es básicamente lo mismo, sí. Yo también suelo utilizar lo que tú comentas.
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