0

Hola Estoy intentando cabiar de forma dinamica el contenido de un div (pin_destination)que se encuentra a dentro de un <script type="text/template" id="new_pin" >:

en el fichero index.html ademas de las inicializaciones de jquery tengo el codigo del div (id="pin_destination") dentro de un template, pues solo se muestra dentro de una ventana que se aciva al hacer click usando .onclick

<script type="text/template" id="new_pin" >
    <div class="row"> 
        <div class="col-25l">
            <label for="pos_dest_label">Destination:</label>
        </div>
        <div id="pin_destination" name="pin_destination" class="col-75r">
        </div>
    </div>
</script>

en ese mismo fichero tengo el codigo js dentro de una la llamada onclick pues en la misma ventana cargo datos de la base de datos de php.

<script type="text/javascript"> 
   $.get( "../includes/set_var.php?var="+scene_id, function( data ) {
              $( "pin_destination" ).html( data );
              alert( data );
            });
</script>

fragmento de set_var.php donde creo el menu desplegable:

    if ($resultado = $mysqli->query($consulta)) {
                        echo "<select id='pos_ref' name='pos_ref' >";
                        while($row = $resultado->fetch_array()) {
                            if ( $row['POS_ID'] != $_SESSION["SCENE_ID"] ) {
                                echo "<option value=".$row['POS_ID'].">"; 
                                echo "[".$row['POS_ID']."] ";
                                echo htmlspecialchars($row['POS_NAME'])." - ".htmlspecialchars($row['POS_DESC']);
                                echo "</option>";
                            } //End del if
} // End del while
                        echo "</select>";
                        }

El chequeo temporal que hago con la funcion alert(data); devuelve los valores corretos:

mensaje del alert(data)

Pero el

<div id="pin_destination" name="pin_destination" class="col-75r">
        </div>

Nunca se rellena con esos valores, espero haber sido mas claro esta vez..... decidme si no.

Gracias por la ayuda.

Saludos.

3
  • ¿Podrías editar tu pregunta y agregar el código donde cargas el template?
    – Marcos
    el 10 mar. 2021 a las 12:49
  • Estas cargando primero el script que el HTML? Y porque <script> tiene id? el 10 mar. 2021 a las 13:12
  • El fichero html hay una zona donde defino un template que luego uso como contenido de una ventana que se muestra con js. El script que consulta la base de datos (set_var.php) crea el menu desplegable, e intento que el resultado actualize el div que he previamente creado, He actualizado la pregunta para hacerla mas clara..... creo.
    – dun
    el 10 mar. 2021 a las 19:49

3 respuestas 3

1

Creo que te falta el # para el selector de id.

$("#pin_destination").html( data );

Tienes cargado jquery?

3
  • Hola. ya he probado tambien con el # pero no funciona incluso haciendolo directamente en js utilizando (document.getElementById("pin_destination").innerHTML = data;)... pero si, si tengo cargado Jquery.
    – dun
    el 10 mar. 2021 a las 11:17
  • El código js donde lo cargas? El alert que te dice
    – heb1k0
    el 10 mar. 2021 a las 12:32
  • hecho he modificado la pregunta, a ver si consigo explicarme mejor ;) gracias
    – dun
    el 10 mar. 2021 a las 19:48
0

No puedes modificar una plantilla directamente porque no forma parte del DOM, solo es un elemento que está en espera de ser usado, pero primero debes convertirlo en un "elemento activo" y/o agregarlo a un contenedor para poder tener acceso.

Nota: Las etiquetas <template> y <script type="text/template"> funcionan de la misma forma.

// Es nulo, porque está dentro de una plantilla y no existe en el documento
console.log(document.querySelector('#pin_destination'));

// Crear elemento y asignar contenido de la plantilla
let template = document.createElement('div');
template.innerHTML = document.querySelector('#new_pin').innerHTML;

// Aquí ya puedes acceder desde el elemento creado
console.log(template.querySelector('#pin_destination'));


// Agregar plantilla al documento
document.body.appendChild(template);
// Ahora sí se puede acceder al elemento
console.log(document.querySelector('#pin_destination'));

// Y se puede agregar contenido
document.querySelector('#pin_destination').innerHTML = '<select><option>-- Selecciona --</option><option>Opción 1</option><option>Opción 2</option><option>Opción 3</option></selecciona>';
<script type="text/template" id="new_pin" >
    <div class="row"> 
        <div class="col-25l">
            <label for="pos_dest_label">Destination:</label>
        </div>
        <div id="pin_destination" name="pin_destination" class="col-75r">
        </div>
    </div>
</script>

1
  • genial! lo pruebo y os comento.... Gracias triby
    – dun
    el 10 mar. 2021 a las 21:04
0

Gracias por los consejos, finalmente he entendido que No puedes modificar una plantilla directamente porque no forma parte del DOM.

Entonces la solucion que he adoptado es carga una imagen al final de mi template:

<script type="text/template" id="new_pin" >
    <div class="row"> 
        <div class="col-25l">
            <label for="pos_dest_label">Destination:</label>
        </div>
        <div id="pin_destination" name="pin_destination" class="col-75r">
        </div>
    </div>
<img src="../images/pixel.png" onload="fill_pin_form()">
</script>

y cuando este es mostrado, en la funcion fill_form ejecuto el script js + php para rellenar el desplegable:

function fill_pin_form() {
        ...otros datos.....
        $.get( "../includes/set_var.php?var="+scene_id, function( data ) { $( "#pin_destination" ).html( data ); });
        }

Gracias.....

Saludos

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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