[SOLUCIONADO] Recoger valor php para JS y insertar en innerHTML

supernino69 · #1 (**permalink**) 01/10/2014, 01:36

EDITO EL TEMA PARA ACLARARLO MEJOR A VER SI ALGUIEN SABE:

Al cargar mi página, realiza esta funcion que carga los datos, los cuales, en el VAR CELL , quisiera meter la imagen correspondiente a su numero de ficha.
En el var cell5, realizo lo mismo, solo que en el onclick para llevarme a la imagen en una ventana aparte.
Quisiera saber si puedo hacer un thubmail de esas imagenes tal y como os voy a enseñar:

Código PHP:

Ver originalfunction cargar_datos_BD (){
        <?php     
        //comprueba si ya se han insertado sus datos o va a ser una nueva inserción
        bd_conectar();
        $conn = $_SESSION["conexion_BD"];
        //consulta para devolver los datos de la adquisición asociados el bien
        $query = " SELECT d.id_documentacion, d.nombre, d.id_tipo_documento, td.valor AS tipo_documento, 
                   d.path, d.observacion, date_format(d.fecha_documento,'%d/%m/%Y') AS fecha_documento 
                   FROM documentacion d INNER JOIN tipo_documento td ON d.id_tipo_documento = td.id_tipo_documento
                   WHERE d.id_ficha = '" . $_GET['param_id_ficha'] . "' ";
        $res = mysql_query($query, $conn);
        //si devuelve algún documento lo carga en la tabla de documentos para mostrarlo en la pantalla
        if (mysql_num_rows($res) != 0) {
            ?>
            //Crea la variable asociada a la tabla de documentos
            var table = document.getElementById("tabla_documentos");
            <?php       
            for ($i=1;$i<=mysql_num_rows($res);$i++){
                $fila = mysql_fetch_array($res);
            ?>
                var row = table.insertRow(<?php print $i; ?>); //Inserta una nueva fila
                if (<?php print $i; ?> %2 !== 0) //Si es una fila par le aplica el formato de fondo-gris
                    row.className="fondo-gris";
                    
                //añade el id de la fila    
                row.id = <?php print $fila["id_documentacion"] ?>;
                
          
                var cell = row.insertCell(0);    //Inserta la imagen pequeña
                cell.innerHTML = '<img src=""  height="60px" width="60px">'   //AQUI INSERTAR LA IMAGEN DE CADA FILA
                    
                var cell1 = row.insertCell(1); //Inserta el tipo de documento
                var element1 = document.createTextNode("<?php print $fila["tipo_documento"] ?>");
                cell1.appendChild(element1);
 
                var cell2 = row.insertCell(2); //Inserta el fichero
                var element2 = document.createTextNode("<?php print $fila["nombre"] ?>");
                cell2.appendChild(element2);
 
                var cell3 = row.insertCell(3); //Inserta la fecha
                var element3 = document.createTextNode("<?php ($fila['fecha_documento'] == "00/00/0000")? print "" : print $fila['fecha_documento'] ?>");
                cell3.appendChild(element3);
 
                var cell4 = row.insertCell(4); //Inserta la observación
                var element4 = document.createTextNode("<?php print mysql_real_escape_string($fila["observacion"]) ?>");
                cell4.appendChild(element4);
 
                var cell5 = row.insertCell(5); //Inserta la acción de eliminar el documento
                cell5.className = "acciones"; //Le aplica el formato mediante la clase
                cell5.innerHTML = '<a title="Ver" onclick="ver_documento(this)"><img alt="Ver" title="Ver" src="imagenes/icono_ver.gif"></a>' +
                                  '&nbsp;&nbsp;&nbsp;' +
                                  '<a title="Modificar" onclick="modificar_documento(this)"><img alt="Modificar" title="Modificar" src="imagenes/icono_editar.png"></a>' +
                                  '&nbsp;&nbsp;&nbsp;' +
                                  '<a title="Eliminar" onclick="if (confirm(\'¿Seguro que desea eliminar el documento?\')) {eliminar_documento_tabla(this)}"><img alt="Eliminar" title="Eliminar" src="imagenes/icono_eliminar.gif"></a>';
                          
                var cell6 = row.insertCell(6); //Inserta la observación
                cell6.className = "oculto";
                var element6 = document.createTextNode("<?php print $fila["id_tipo_documento"] ?>");
                cell6.appendChild(element6);
            <?php
            }
            ?>    
            //muestra la tabla de mobiliario
            $("#tabla_documentos").removeClass("oculto");
        <?php
        }
        ?> 
    }

Y esta es la funcion ver_documento de la cual recoge el valor de la fila para darle la ruta.

Código PHP:

Ver originalfunction ver_documento(t){
        //variable con el número de inventario completo del bien para crear el path del documento (para la ruta relativa)
        <?php 
            //se divide el número de inventario completo en diferentes subcadenas
            $array_carpetas = explode("_",$tmp_num_inventario);
            $path_tmp = "";
            for ($i = 0; $i < count($array_carpetas); $i++){
                $path_tmp = $path_tmp . "/" . $array_carpetas[$i];
            }
            print 'var parte_ruta_1 = "' . $path_tmp . '";';
        ?>
        //obtiene la fila de id recibido
        var td = t.parentNode;
        var tr = td.parentNode;
        var ruta_archivo = "archivos_web/" + parte_ruta_1 + "/" + tr.childNodes[1].innerHTML + "/"  + tr.childNodes[2].innerHTML;
        window.open(ruta_archivo,'_blank');
    }

Como hago para recoger en el SRC del var cell, la ruta correspondiente dependiendo de cada fila?

Muchas gracias de antemano.

supernino69 · #2 (**permalink**) 15/10/2014, 01:32

Actualizado para ver si alguien sabe.

IsaBelM · #3 (**permalink**) 15/10/2014, 04:24

el error que estás cometiendo y es una de las razones por la cual nadie te responde, es que no muestras el html y javascript generado

supernino69 · #4 (**permalink**) 15/10/2014, 04:27

Adjunto el HTML como me dices, aun que dudo que haga falta, ya que es un tema de usar PHP cn JS

Código HTML:

Ver original<div class="titulo2">
    <h1>
        DOCUMENTACIÓN
    </h1>
</div>
 
<div id="contenido_izq">
    <form action="javascript: mandarForm(this)" method="post" id="formulario" name="formulario" enctype="multipart/form-data">
        <input name="pestania" value="documentacion" type="hidden">
        <input id="nuevo_bien" name="nuevo_bien" value="" type="hidden">
        <input id="tipo_bien" name="tipo_bien" value="" type="hidden">
        <input id="id_modificar" name="id_modificar" value="" type="hidden">
        <input id="param_form_id_bien" name="param_form_id_bien" type="hidden">
        <input id="num_inventario" name="num_inventario" type="hidden" value="<?php print $tmp_num_inventario ?>">
        <input id="doc_tipo_docu" name="doc_tipo_docu" type="hidden" value="">
        <ul>
            <li>
                <label> TIPO DOCUMENTO:<sup>*</sup> </label>
                <select id="doc_tipo" name="doc_tipo" class="obligatorio" onchange="actualizar_tipo()">
                    <?php
                        crear_combo('tipos_documento');
                    ?>
                </select>
            </li>
            <li>
                <label> DOCUMENTO:<sup>*</sup> </label>   
                <input class="adjunto obligatorio" id="doc_nombre" name="doc_nombre" type="file">
            </li>
            <li>
                <label> FECHA DEL DOCUMENTO: </label>
                <input id="doc_fecha" class="text date" type="text" value="" name="doc_fecha" readonly="">
                <a class="icon calendar" href="javascript:void(0)" title="Seleccionar fecha">
                    <img src="imagenes/icono_calendario.gif" title="Fecha" alt="Fecha">
                </a>
            </li>
            <li>
                <label> OBSERVACIONES: </label> 
                <br>
                <textarea class="texto" id="doc_observaciones" name="doc_observaciones" rows="2" cols="78"></textarea>
            </li>
        </ul>
 
        <div class="botones">
            <input class="boton_enviar" type="submit" value="GUARDAR" name="guardar" id="guardar" title="GUARDAR">
            <input class="boton_enviar" type="button" value="RESTAURAR" name="restaurar" title="RESTAURAR" onclick="restaurar_formulario()">
        </div>
    </form>   
    
    <table class="lista oculto" id="tabla_documentos">
        <thead>
            <tr>
                <th>Imagen</th>
                <th>Tipo documento</th>
                <th>Nombre</th>
                <th class="peq">Fecha</th>
                <th>Observación</th>
                <th class="peq">Acciones</th>
                <th class="oculto">Id. tipo documento</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    
</div>

Si hay algo que no se entienda o se necesite, puedo pegar el codigo integro, aunque creo que sera mas lioso aun.

IsaBelM · #5 (**permalink**) 15/10/2014, 04:49

ese php no genera ese html. si quieres que se te ayude, has poner las cosas fáciles

supernino69 · #6 (**permalink**) 15/10/2014, 06:24

No dije que generase ese HTML

Dije que ese HTML es el de mi aplicacion

El HTML que se genera es este(no te entendi perdon):

Código HTML:

Ver original<div class="contenido" id="capa">    
 
 
 
<div class="titulo">
    <h1>
        INMUEBLES URBANOS
    </h1>
</div>
 
<input id="tipo_bien_a_crear" value="INMUEBLES URBANOS" type="hidden">
<input id="param_id_bien" type="hidden" value="151">
 
<div class="submenu">
    <a href="#" title="Identificación" id="identificacion" style="display: block;"> Identificación </a>
    <a href="#" title="Datos generales" id="generales" style="display: block;"> Datos generales </a>
    <a href="#" title="Datos de adquisición" id="adquisicion" style="display: block;"> Datos de adquisición </a>
    <a href="#" title="Registro" id="registro" style="display: block;"> Registro </a>
    <a href="#" title="Edificación" id="edificacion" style="display: block;"> Edificación </a>
    <a href="#" title="Referencia catastral" id="catastro" style="display: block;"> Referencia catastral </a>
    <a href="#" title="Valoraciones" id="valoraciones" style="display: block;"> Valoraciones </a>    
    <a href="#" title="Datos contables" id="datos_contables" style="display: block;"> Datos contables </a>
    <a href="#" title="Seguros" id="seguros" style="display: block;"> Seguros </a>
    <a href="#" title="Frutos y rentas" id="frutos" style="display: block;"> Frutos y rentas </a>
    <a href="#" title="Signatura" id="signatura" style="display: block;"> Signatura </a>
    <a href="#" title="Mejoras" id="mejoras" style="display: block;"> Mejoras </a>
    <a href="#" title="Observaciones" id="observaciones" style="display: block;"> Observaciones </a>
    <a href="#" title="Documentación" id="documentacion" style="display: block;"> Documentación </a>
    <!--<a href="#" title="Revertible" id="revertible"> Revertible </a>-->
</div>
<div class="clear"></div>
<div class="cuadro" id="capa_formulario">
 
 
 
<div id="campo_mensajes" class="errors"></div>
 
<div id="campo_errores" class="errors oculto">
    <div class="error">
        El campo tipo de documento es obligatorio
        <br>
        El campo documento es obligatorio
    </div>
    <br>
</div>
 
<div class="titulo2">
    <h1>
        DOCUMENTACIÓN
    </h1>
</div>
 
<div id="contenido_izq">
    <form action="javascript: mandarForm(this)" method="post" id="formulario" name="formulario" enctype="multipart/form-data">
        <input name="pestania" value="documentacion" type="hidden">
        <input id="nuevo_bien" name="nuevo_bien" value="true" type="hidden">
        <input id="tipo_bien" name="tipo_bien" value="INMUEBLES URBANOS" type="hidden">
        <input id="id_modificar" name="id_modificar" value="" type="hidden">
        <input id="param_form_id_bien" name="param_form_id_bien" type="hidden" value="151">
        <input id="num_inventario" name="num_inventario" type="hidden" value="0927402_00281_1.1.00003">
        <input id="doc_tipo_docu" name="doc_tipo_docu" type="hidden" value="">
        <ul>
            <li>
                <label> TIPO DOCUMENTO:<sup>*</sup> </label>
                <select id="doc_tipo" name="doc_tipo" class="obligatorio" onchange="actualizar_tipo()">
                    <option value=""> </option><option value="1">Fotografía descriptiva</option><option value="3">Otros documentos</option><option value="2">Plano con georeferenciación</option>                </select>
            </li>
            <li>
                <label> DOCUMENTO:<sup>*</sup> </label>   
                <input class="adjunto obligatorio" id="doc_nombre" name="doc_nombre" type="file">
            </li>
            <li>
                <label> FECHA DEL DOCUMENTO: </label>
                <input id="doc_fecha" class="text date" type="text" value="" name="doc_fecha" readonly="">
                <a class="icon calendar" href="javascript:void(0)" title="Seleccionar fecha">
                    <img src="imagenes/icono_calendario.gif" title="Fecha" alt="Fecha">
                </a>
            </li>
            <li>
                <label> OBSERVACIONES: </label> 
                <br>
                <textarea class="texto" id="doc_observaciones" name="doc_observaciones" rows="2" cols="78"></textarea>
            </li>
        </ul>
 
        <div class="botones">
            <input class="boton_enviar" type="submit" value="GUARDAR" name="guardar" id="guardar" title="GUARDAR">
            <input class="boton_enviar" type="button" value="RESTAURAR" name="restaurar" title="RESTAURAR" onclick="restaurar_formulario()">
        </div>
    </form>   
    
    <table class="lista" id="tabla_documentos">
        <thead>
            <tr>
                <th>Imagen</th>
                <th>Tipo documento</th>
                <th>Nombre</th>
                <th class="peq">Fecha</th>
                <th>Observación</th>
                <th class="peq">Acciones</th>
                <th class="oculto">Id. tipo documento</th>
            </tr>
        <tr class="fondo-gris" id="8788"><td><img src="" height="60px" width="60px"></td><td>Fotografía descriptiva</td><td>1100002A.jpg</td><td>16/09/2014</td><td>Albergue Municipal y Aulas de la Naturaleza</td><td class="acciones"><a title="Ver" onclick="ver_documento(this)"><img alt="Ver" title="Ver" src="imagenes/icono_ver.gif"></a>&nbsp;&nbsp;&nbsp;<a title="Modificar" onclick="modificar_documento(this)"><img alt="Modificar" title="Modificar" src="imagenes/icono_editar.png"></a>&nbsp;&nbsp;&nbsp;<a title="Eliminar" onclick="if (confirm('¿Seguro que desea eliminar el documento?')) {eliminar_documento_tabla(this)}"><img alt="Eliminar" title="Eliminar" src="imagenes/icono_eliminar.gif"></a></td><td class="oculto">1</td></tr><tr id="8790"><td><img src="" height="60px" width="60px"></td><td>Fotografía descriptiva</td><td>1100002B.jpg</td><td>16/09/2014</td><td>Albergue Municipal y Aulas de la Naturaleza</td><td class="acciones"><a title="Ver" onclick="ver_documento(this)"><img alt="Ver" title="Ver" src="imagenes/icono_ver.gif"></a>&nbsp;&nbsp;&nbsp;<a title="Modificar" onclick="modificar_documento(this)"><img alt="Modificar" title="Modificar" src="imagenes/icono_editar.png"></a>&nbsp;&nbsp;&nbsp;<a title="Eliminar" onclick="if (confirm('¿Seguro que desea eliminar el documento?')) {eliminar_documento_tabla(this)}"><img alt="Eliminar" title="Eliminar" src="imagenes/icono_eliminar.gif"></a></td><td class="oculto">1</td></tr><tr class="fondo-gris" id="8791"><td><img src="" height="60px" width="60px"></td><td>Fotografía descriptiva</td><td>1100002C.jpg</td><td>16/09/2014</td><td>Albergue Municipal y Aulas de la Naturaleza</td><td class="acciones"><a title="Ver" onclick="ver_documento(this)"><img alt="Ver" title="Ver" src="imagenes/icono_ver.gif"></a>&nbsp;&nbsp;&nbsp;<a title="Modificar" onclick="modificar_documento(this)"><img alt="Modificar" title="Modificar" src="imagenes/icono_editar.png"></a>&nbsp;&nbsp;&nbsp;<a title="Eliminar" onclick="if (confirm('¿Seguro que desea eliminar el documento?')) {eliminar_documento_tabla(this)}"><img alt="Eliminar" title="Eliminar" src="imagenes/icono_eliminar.gif"></a></td><td class="oculto">1</td></tr><tr id="8792"><td><img src="" height="60px" width="60px"></td><td>Fotografía descriptiva</td><td>1100002D.jpg</td><td>16/09/2014</td><td>Albergue Municipal y Aulas de la Naturaleza</td><td class="acciones"><a title="Ver" onclick="ver_documento(this)"><img alt="Ver" title="Ver" src="imagenes/icono_ver.gif"></a>&nbsp;&nbsp;&nbsp;<a title="Modificar" onclick="modificar_documento(this)"><img alt="Modificar" title="Modificar" src="imagenes/icono_editar.png"></a>&nbsp;&nbsp;&nbsp;<a title="Eliminar" onclick="if (confirm('¿Seguro que desea eliminar el documento?')) {eliminar_documento_tabla(this)}"><img alt="Eliminar" title="Eliminar" src="imagenes/icono_eliminar.gif"></a></td><td class="oculto">1</td></tr></thead>
        <tbody>
        </tbody>
    </table>
    
</div>
 
</div></div>