Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » AJAX » Script no funciona en contenido enviado por AJAX

AJAX - Script no funciona en contenido enviado por AJAX

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Oscar

Script no funciona en contenido enviado por AJAX

Publicado por Oscar (5 intervenciones) el 07/03/2017 04:32:56
Hola buenas noches, tengo una pagina php para hacer un foro, que contiene un script que modifica los estilos de unos div, con el evento del mouse al pasar por encima modifica la imagen del div. por defecto estos div muestran una imagen dependiendo de la informacion en una base de datos, son imagenes de estrellas es como un sistema de calificacion de la pagina. Inicialmente muestra la calificacion haciendo un promedio. pero al pasar el mouse se iluminan cinco estrellas para hacer la calificacion. Cada entrada del foro puede ser calificada. Como esta puede ser vista por varios usuarios debe actualizarse y recuperar esta informacion de la base de datos por lo cual cargo ese contenido en el php por medio de ajax. el problema es que cuando coloco el codigo html en un prepend() aparece el contenido pero los div con las estrellas no funcionan como lo hacian en un html, no aparece el efecto de cambio de la imagen de estrella al pasar el mouse por encima. creeria que no me reconoce los estilos o el js donde se cambia el estilo. Alguien me puede dar alguna sugerencia?
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 kip
Val: 33
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

Script no funciona en contenido enviado por AJAX

Publicado por kip (10 intervenciones) el 07/03/2017 04:49:10
Hola, luego de la llamada a Ajax los nuevos objetos no estan enlazados a las funciones o eventos que declaras antes de la llamada, para que funcione debes enlazar estos eventos al finalizar la llamada Ajax a los nuevos elementos o elemento creado.

No se si usas jQuery, este provee una funcion que te ayuda a evitar este problema, me gustaría que coloques tu codigo para ver como estas trabajando.
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 Oscar

Script no funciona en contenido enviado por AJAX

Publicado por Oscar (5 intervenciones) el 07/03/2017 04:57:26
este es el script donde envio la informacion:

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
var problems=[];
$(document).ready(function(){
 
    loadProblems();
});
 
  function loadProblems(){
        problems.length=0;
        $('#f0').empty();
        $('#f1').empty();
 
      $.ajax({
            type: "POST",
            url: "../02_student/foro.php",
            success: function(data) {
                problems=$.parseJSON(data);
 
                for(var i=0; i< problems.length;){
 
                    $('#f1').prepend('<div class="row entrada">        <div class="col s4">            <ul>             <li class="col s2"><br><i class="material-icons circle" style="font-size: 30px">visibility</i></li>            <li class="col s2"><br><h6 href="#comentario" class="title modal-trigger">Tema:' +utf8Decode(problems[(i+2)])+'</h6></li>            </ul>        </div>        <div class="col s4">            <br>            <br>            <p>Publicado por:'+utf8Decode(problems[(i+4)])+'<br>Visitas: - Mensajes:</p>         </div>        <div class="col s3">            <ul id="rating_1" class="ratings">              <li class="star_1 ratings_stars"></li>             <li class="star_2 ratings_stars"></li>                <li class="star_3 ratings_stars"></li>                <li class="star_4 ratings_stars"></li>               <li class="star_5 ratings_stars"></li>  <li class="total_votes">vote data</li></ul></div> </div>');
 
                  i+=5;
                }
 
 
            },
            error: function(){
                alert('Error!');
            }
        });
 
    };
 
 
function utf8Decode(utf8String) {
    if (typeof utf8String != 'string') throw new TypeError('parameter ‘utf8String’ is not a string');
    // note: decode 3-byte chars first as decoded 2-byte strings could appear to be 3-byte char!

    const unicodeString = utf8String.replace(
        /[\u00e0-\u00ef][\u0080-\u00bf][\u0080-\u00bf]/g,  // 3-byte chars

        function(c) {  // (note parentheses for precedence)

            var cc = ((c.charCodeAt(0)&0x0f)<<12) | ((c.charCodeAt(1)&0x3f)<<6) | ( c.charCodeAt(2)&0x3f);
            return String.fromCharCode(cc); }
    ).replace(
        /[\u00c0-\u00df][\u0080-\u00bf]/g,                 // 2-byte chars

        function(c) {  // (note parentheses for precedence)

            var cc = (c.charCodeAt(0)&0x1f)<<6 | c.charCodeAt(1)&0x3f;
            return String.fromCharCode(cc); }
    );
    return unicodeString;
};

este otro es el que da el efecto cuando paso el mouse y con el que pienso guardar la seleccion o mostrar el puntaje luego que el usuario califique

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
$(document).ready(function() {
 $('.ratings_stars').hover(
 
 
            function() {
 
                $(this).prevAll().andSelf().addClass('ratings_over');
 
 
            },
 
            function() {
 
                $(this).prevAll().andSelf().removeClass('ratings_over');
 
            }
 
        );
 
        $('.ratings_stars').bind('click', function() {
 
			var id=$(this).parent().attr("id");
		    var num=$(this).attr("class");
			var poststr="id="+id+"&stars="+num;
		$.ajax({url:"rate.php",cache:0,data:poststr,success:function(result){
   document.getElementById(id).innerHTML=result;}
   });
		});
 
});
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 kip
Val: 33
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

Script no funciona en contenido enviado por AJAX

Publicado por kip (10 intervenciones) el 07/03/2017 05:27:53
Intenta modificando el ultimo codigo asi:

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
$(document).ready(function() {
 
    $("#f1").on({
        mouseenter: function() {
            $(this).prevAll().andSelf().addClass('ratings_over');
        },
        mouseleave: function() {
            $(this).prevAll().andSelf().removeClass('ratings_over');
        }
    }, '.ratings_stars');
 
    $('#f1').on('click', '.ratings_stars', function() {
        var id = $(this).parent().attr("id");
        var num = $(this).attr("class");
        var poststr = "id=" + id + "&stars=" + num;
        $.ajax({
            url: "rate.php",
            cache: 0,
            data: poststr,
            success: function(result) {
                document.getElementById(id).innerHTML = result;
            }
        });
    });
 
});

Nos cuentas!
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 Oscar

Script no funciona en contenido enviado por AJAX

Publicado por Oscar (5 intervenciones) el 07/03/2017 15:59:39
Coloque el codigo para que sea aplicado a f1, pero sigue igual no noto algun cambio. Como es lo del jquery, que deberia enviar o deberia incluir este script de alguna manera en AJAX?

Gracias por la ayuda.
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 Oscar

Script no funciona en contenido enviado por AJAX

Publicado por Oscar (5 intervenciones) el 07/03/2017 16:30:24
Se me olvidaba comentar algo f1 esta contenido dentro de un modal el cual aparece al hacer click en un boton, el modal lo activo cambiando el estilo del div. Estoy utilizando materialize.
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 Oscar

Script no funciona en contenido enviado por AJAX

Publicado por Oscar (5 intervenciones) el 07/03/2017 20:24:22
Al parecer no actualice bien la pagina pero estuve revisando de nuevo y ya me esta funcionando, según lo que veo mi error era que en el js estaba referenciando unas clases de las cuales no existían en el archivo php, al hacer la referencia tomando f1, si funciona.
Muchas gracias kip.
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