1

En php al cargar la página, construyo un JSON pequeño, que mando al JavaScript. Eso es lo que en un principio contiene la variable json del JavaScript.

Después hago un clic en pantalla, llamando a inicio_pru.php y éste me construye un JSON nuevo, más grande y se lo devuelve al JavaScript.

En JavaScript, la parte que recibe el evento click (se pincha en un nodo del árbol en pantalla, lo cual desencadena una llamada a inicio_pru.php para que construya un JSON más grande):

       onCreateLabel: function(label, node){
                label.id = node.id;            
                label.innerHTML = node.name;
                label.onclick = function(){

                  var http = new XMLHttpRequest();
                  var url = "inicio_pru.php";
                  var params = "callFunction=arbol_completo";
                  http.open("POST", url, true);

                 //Send the proper header information along with the request
                 http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                 http.send(params);
                 http.onreadystatechange = function() {//Call a function when the state changes.
                    if(http.readyState == 4 && http.status == 200) {

                      json=http.responseText;

                        st.loadJSON(json);
                        compute node positions and layout
                        st.compute();
                        //optional: make a translation of the tree
                        st.geom.translate(new $jit.Complex(-200, 0), "current");
                        //emulate a click on the root node.
                        st.onClick(node.id);
                        alert (json);


                    }
                }
                alert(json);

         };

En php (inicio_pru.php):

        <?php
        if($callFunction == "arbol_completo") {
                $root=recorrerArbol($children_root,$raiz); 
                $arbol1=json_encode($root);
                $arbol2=str_replace("type","\$type",$arbol1);
                $arbol3=str_replace("color","\$color",$arbol2);
                $arbol=str_replace("'","\'",$arbol3);


                echo '$arbol';
        }
        else 
        {


        $root=recorrerArbol1($children_root,$raiz);


        $arbol1=json_encode($root);
        $arbol2=str_replace("type","\$type",$arbol1);
        $arbol3=str_replace("color","\$color",$arbol2);
        $arbol=str_replace("'","\'",$arbol3);


        return '$arbol';

        }


        ?>

Pero al hacer click en un nodo del árbol, parece que la función onclick no hace nada, de hecho ni siquiera saca los dos alert que le he puesto. Muchísimas gracias de antemano

6
  • 3
    ¿Dónde estableces que se ejecute la función JS al hacer click? El onCreateLabel? Estás definiendo una función anónima (onCreateLabel es una etiqueta JS, no el nombre de la función) y no veo en ninguna parte que la enlaces con un evento de un elemento DOM.
    – SJuan76
    Commented el 12 sept. 2016 a las 10:17
  • Seria en el label.onclick = function(){, o sea en el objeto label, cuando dé un click sobre él
    – Mayte
    Commented el 12 sept. 2016 a las 12:09
  • De acuerdo, label.onclick registra la función anónima interna, pero ¿cuándo ejecutas ese código? ¿Dónde llamas a la función anónima externa? Por lo que veo del código nunca se llama a dicha función, así que no se registra la función de evento y ya no funciona todo lo demás. Prueba añadiendo un alert delante de label.id = node.id para que veas lo que te digo.
    – SJuan76
    Commented el 12 sept. 2016 a las 12:16
  • El label.onclik se ejecuta cuando en la pantalla pulso encima del nodo , sobre la etiqueta. Ésta web lo que hace es , cuando se carga, visualiza un árbol con unos nodos con etiquetas en cada uno.Después , yo pulso en un de ellos, en el label , y es ahí donde se ejecuta el label.onclick.
    – Mayte
    Commented el 13 sept. 2016 a las 7:40
  • Entiendo cuando se ejecuta la función asociada con el evento onclick. Lo que no veo es cuándo se ejecuta el codigo que define que el evento onclick; la función function (label, node) {. Como he dicho, pon un alert al inicio de la función y comprobarás si se ejecuta o no; si no se ejecuta no se asignara ninguna función al evento onclick...
    – SJuan76
    Commented el 13 sept. 2016 a las 7:43

2 respuestas 2

1

Una confusión muy común es liarse entre el código que genera la página (en este caso el php) y el código de la propia página.

En el código que tú tienes, no hay ninguna función javascript llamada "oncreatelabel". Hay una etiqueta JS (que no sirve para nada) y una función anónima, que es definida pero como no se guarda la referencia nunca puede ser llamada. Por eso no aparece el alert.

El PHP (o Java/Python/Perl/loquesea) se ejecuta únicamente en el servidor, y proporciona una página HTML (en este caso). El método PHP no puede ejecutar ningún método JS (ni de otro tipo) en el navegador, sólo genera el contenido que se envía al navegador y el navegador ya se encargara del renderizado y de la ejecución del JS.

Otra forma de verlo: el navegador sólo ve el HTML. Lo que haga el PHP (aparte de proporcional el HTML) no le afecta lo más mínimo. Cuando estés depurando JS, olvídate de cuál es el origen de la página.

Si quieres ejecutar código JS, la orden para ejecutar dicho código JS debe estar en la pagina entregada. Por ejemplo, pon la línea

document.onload =  function(){
  // Obtener valores de label y node
  label.id = node.id;            
  label.innerHTML = node.name;
  label.onclick = function(){
    ...
}

dentro de un tag de javascript pero fuera de cualquier método. Es preferible usar document.onload frente a window.onload porque con la primera te aseguras que el DOM está completamente construido.

2
  • la página que carga el HTML tiene un : <body onload="init(datos,1);">.Ese init es una función de js que hace entre otras cosas , lo siguiente:
    – Mayte
    Commented el 13 sept. 2016 a las 9:29
  • Perdon, he dado a intro sin querer.Hace lo siguiente: onCreateLabel: function(label, node){ label.id = node.id; label.innerHTML = node.name; label.onclick = function(){.Te lo digo porque esto ha estado funcionando perfectamente hasta ayer.De hecho si cambio la orma de ontener datos en el php que obtiene el json, lo que hace al hacer onclikc es desplegar los hijos del nodo , y esto lo ha estado haciendo hasta ayer ...
    – Mayte
    Commented el 13 sept. 2016 a las 9:31
0

Estaba pasándole el json como texto y no como objeto.Al poner esto :

json=http.responseText; json=JSON.parse(json);

convierte el texto json a un objeto json que puede ser ya cargado:

st.loadJSON(json);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.