Codigo PHP inserto en JS no funciona

[javiercitox]

Tengo una función JS que agrega una serie de campos nuevos a un DIV, para el ejemplo solo pondre 2, la función es la siguiente:

Código:

function crearCampos(){
var div = document.getElementById("campos_dinamicos");
var text ='<td align="center"><input name="ManualUT'+i+'" id= "ManualUT" type="text" disabled size="20" maxlength="20">
<td align="center" valign="top">'+ <?php MostrarSelect("Codigos","","","","","170","","Codigos'+i+'"); ?> +'</td>';
div.innerHTML = text;

En var text existe un código HTML que se utiliza para generar campos nuevos, el primer input es un textBox, y el segundo es una función PHP que devuelve un comboBox (o select para algunos). El código funciona bien sin la función PHP.

El código de la función PHP es el siguiente:

Código PHP:

  <?php
function MostrarSelect($pEntidad,$pSelectedID=NULL,$pDisabled=NULL,$pTipoFamilia=NULL,$pAncho="145",$pEvento=NULL,$pNombre=NULL){
        // Asignamos a una variable la matriz de la entidad a mostrar
        $Matriz = ObtenerMatriz($pEntidad,$pTipoFamilia);
        // Si no existen registros en la base de datos de esta entidad, se manda el mensaje correspondiente
        if (!$Matriz){
            echo "<font color=\"red\"><strong>No existen registros de $pEntidad en la Base de Datos.</strong></font>";
            return;
        }
        // Mostramos el select con las opciones con los nombres de la entidad y los valores de sus identificadores en la base de datos
        ?>
        <select name="<?php if($pNombre!=NULL) echo $pNombre; else echo $pEntidad;?>" id="<?php echo $pEntidad;?>" <?php echo $pDisabled;?> style="width:<?php echo $pAncho?>px <?php echo "$pEvento"?> ">
            <option <?php if (!$pSelectedID) echo "selected ";?>value="" disabled>Seleccionar...</option>
            <?php
                for ($i=0 ; $i<count($Matriz) ; $i++){
                    // Si $pSelectedID es distinto de NULL debemos aplicar un selected a la opción correcta
                    if ($pSelectedID)
                        if ($Matriz[$i][0]==$pSelectedID)
                            $Selected = " selected";
                        else
                            $Selected = NULL;
                    echo "<option value=\"".$Matriz[$i][0]."\"".$Selected.">".$Matriz[$i][1]."</option>\n\t\t\t";
                }
            ?>
        </select>
        <?php
    }
 
?>   

y donde llamo a JS

Código:

<input name="Agregar" type="button" onClick="crearCampos()" id="Agregar" value="Agregar">

<div id="campos_dinamicos"> </div>

Cuando quito la función PHP de JS funciona bien, y he creado otras funciones básicas que devuelven string para probar el código y funcionan bien

[jackson666]

Que es lo que queres hacer? crear DHTML? Para eso solo necesitas javascript, o sea, para crear elementos dinamicamente estan las funciones createElement, apenndChild, etc etc

Lo digo ya que en tu php no haces una consulta a una base de datos, ni nada que requiera de su uso si o si digamos... Si se pude, yo lo evitaria, es complicarte para nada me parece.

Saludos

[javiercitox]

Lo que pasa que mi función , llama a otra que si realiza una consulta sql, fijate en la 2da línea

Código PHP:

  $Matriz = ObtenerMatriz($pEntidad,$pTipoFamilia); 
   

Esta trae los datos necesarios para crear el select, digamos que en mi proyecto genero varios select con similares características, por lo que he creado esta función que los genera pidiendo el parámetro $pEntidad, ya que todos los demás son opcionales, algunos para dar forma al select y otros para algunas consultas más complejas.

La coloque para que vieran que esta no contiene errores, la he probado sin generarla dinámicamente y no tengo ningún problema.

Las funciones createElement y apenndChild las conosco poco, las he utilizado y no las ocupe en este caso ya que los campos que quiero insertar contienen propiedades específicas como por ejemplo disabled size="20" maxlength="20" además de agregar unos cuantos <td> ya que los imprimire en una tabla.

Lo que quiero es que al presionar el boton me aparesca la caja de texto y el select generado por mi función php.

[mhax]

En javascript no puedes incrustar codigo php.
conozco dos formas de hacer lo que quieres:
1) hacer lo que dice jackson666 (createElement o appendChild)
2) Utilizando ajax.

Tu decides...!!!
Saludos

[javiercitox]

Gracias a ambos por responder tan pronto.

1.- A createElement y appendChild le puedo dar propiedades?
2.- y como seria con Ajax???lo desconosco completamente

Nuevamente gracias por tomarse la molestia

[mhax]

var div = document.createElement('div'); //crear un div
div.style.color="red"; //dar propiedades

var link = document.createElement('a'); //crea un elemento de etiketa a

div.appendChild(link); // insertas el link dentro del div

para ajax nada mejor que el señor Google!!!

[javiercitox]

@mhax gracias

[javiercitox]

He logrado crear mis campos dinámicamente pasando los datos obtenidos de php en un string y luego tratandola con la función js, el único problema es que los campos que estoy creando van dentro de una tabla y al agregar los td dinámicamente en la página, al parecer no son tomados en cuenta, ya que me aparecen todos los campos juntos... mejor una imagen vale más q mil palabras....




http://s2.subirimagenes.com/otros/previo/thump_3780647untitled-5.jpg



La primera línea está generada directamente en la página, y la 2da con la función js, se puede apreciar que aparecen todos los campos juntos y debiesen salir como en la primera línea

Esta es la función que genera la segunda línea...

Código Javascript:

function crearCampos(CantCod,StringID,StringCod)
    {
    //Se separan las cadenas cuando aparece el delimitador , y se almacena en un array
    idcod = StringID.split(',');
    codig = StringCod.split(',');
 
    CantidadElementos = (FormularioInterManual.elements.length - 3);
    i = CantidadElementos/13;
    
    var div         = document.getElementById("campos_dinamicos");
    var td      = document.createElement("td");
    var espacio = document.createElement(" ");
    var salto       = document.createElement("P");
    var ManualUT    = document.createElement("<input name=\"ManualUT"+i+"\" id= \"ManualUT\" type=\"text\" disabled size=\"20\" maxlength=\"20\">");
    var Buscar = document.createElement("<input type=\"button\" name=\"Buscar\" value=\"Buscar\" onClick=\"abrirVentana("+i+");\" style=\"font:\'Trebuchet MS\'; font-size:9px;border-width:1px;border-style:solid;border-color:#003366; width:64px;\">");
    var HoraInicial = document.createElement("<input name=\"ManualHora_Inicial"+i+"\" type=\"text\" style=\"width:21px\" onBlur=\"ValidarHora(this,\'Hora\',1)\" onKeyPress=\"SoloNumeros(event,this,\'Hora\')\" onKeyUp=\"ValidarHora(this,\'Hora\',0)\" maxlength=\"2\">");
    var MinutoInicial= document.createElement("<input name=\"ManualMinutos_Inicial"+i+"\" type=\"text\" style=\"width:21px\" onBlur=\"ValidarHora(this,\'Minutos\',1)\" onKeyPress=\"SoloNumeros(event,this,\'Minutos\')\" onKeyUp=\"ValidarHora(this,\'Minutos\',0)\" maxlength=\"2\">");
    var HoraFinal   = document.createElement("<input name=\"ManualConsHora_Final"+i+"\" type=\"text\" style=\"width:21px\" onBlur=\"ValidarHora(this,\'Hora\',1)\" onKeyPress=\"SoloNumeros(event,this,\'Hora\')\" onKeyUp=\"ValidarHora(this,\'Hora\',0)\" maxlength=\"2\">");
    var MinutoFinal = document.createElement("<input name=\"ManualConsMinutos_Final"+i+"\" type=\"text\" style=\"width:21px\" onBlur=\"ValidarHora(this,\'Minutos\',1)\" onKeyPress=\"SoloNumeros(event,this,\'Minutos\')\" onKeyUp=\"ValidarHora(this,\'Minutos\',0)\" maxlength=\"2\">");
    var CheckBox    = document.createElement("<input name=\"ManualTurnoSig"+i+"\" type=\"checkbox\" value=\"checkbox\">");
    var SAP         = document.createElement("<input name=\"ManualSAP"+i+"\" type=\"text\" size=\"10\" maxlength=\"10\">");
    var Sistema     = document.createElement("<input name=\"ManualSistema"+i+"\" type=\"text\" size=\"25\" maxlength=\"30\" disabled=\"disabled\">");
    var Observacion = document.createElement("<input name=\"ManualObs_Inter"+i+"\" type=\"text\" size=\"35\" maxlength=\"256\">");
    var IDSistema   = document.createElement("<input type=\"hidden\" name=\"IDSistema"+i+"\" value=\"\" />");
    var SaltoLinea  = document.createElement("<input type=\"hidden\" name=\"Salto"+i+"\" value=\"NextLine\" />");       
 
    var Codigo = document.createElement("<select name=\"Codigos"+i+"\" id=\"Codigos\" style=\"width:170px\">");
 
    for (i=0; i < CantCod+1 ; i++) 
        {
        Opciones = document.createElement('option');
        Opciones.value = idcod[i];
        Opciones.innerHTML = codig[i+1];
        Codigo.appendChild(Opciones);
        }
 
//En está parte pienso que está el error
    salto.appendChild(td);
    td.appendChild(ManualUT);
    td.appendChild(Buscar);
    td.appendChild(Codigo);
    td.appendChild(HoraInicial);
    td.appendChild(MinutoInicial);  
    td.appendChild(HoraFinal);
    td.appendChild(MinutoFinal);    
    td.appendChild(CheckBox);
    td.appendChild(SAP);
    td.appendChild(Sistema);
    td.appendChild(Observacion);
    td.appendChild(IDSistema);
    td.appendChild(SaltoLinea); 
    div.appendChild(salto);
}
 

[javiercitox]

ayuda porfa.... el codigo me tiene agotado.... :(

[javiercitox]

logre solucionarlo, como???
cree objetos tipo texto nuevos que contuvieran espacios

Código Javascript:

espacio     = document.createTextNode(" ");
td.appendChild(espacio);
 

y los fui agregando donde correspondian, hice lo mismo con los ":", y el código quedo asi finalmente (es solo la parte donde pense que estaba el error):

Código Javascript:

salto.appendChild(td);
    td.appendChild(ManualUT);
    td.appendChild(espacio);
    td.appendChild(Buscar);
    espacio     = document.createTextNode(" ");
    td.appendChild(espacio);
 
    td.appendChild(Codigo);
    espacio     = document.createTextNode(" ");
    td.appendChild(espacio);
 
    td.appendChild(HoraInicial);
    td.appendChild(texto1);
    td.appendChild(MinutoInicial);  
    espacio     = document.createTextNode("  ");
    td.appendChild(espacio);
    texto1      = document.createTextNode(":");
 
    td.appendChild(HoraFinal);
    td.appendChild(texto1);
    td.appendChild(MinutoFinal);    
    espacio     = document.createTextNode(" ");
    td.appendChild(espacio);
    
    td.appendChild(CheckBox);
    espacio     = document.createTextNode(" ");
    td.appendChild(espacio);
 
    td.appendChild(SAP);
    espacio     = document.createTextNode(" ");
    td.appendChild(espacio);
 
    td.appendChild(Sistema);
    espacio     = document.createTextNode(" ");
    td.appendChild(espacio);
 
    td.appendChild(Observacion);
 
    td.appendChild(IDSistema);
    td.appendChild(SaltoLinea); 
    div.appendChild(salto);