1

Necesito activar un script con atributo src=" " desde un boton de formulario html.

He creado la función que recoge los términos de la caja de búsqueda y los guarda en la variable 'q' que es uno de los parametros de la url del script. En realidad ya tengo creado el procedimiento para renovar dinámicamente la url en función de los términos introducidos por el usuario. Ahora necesito que el mismo botón lance el script que contiene la consulta

Este es mi código (sin las claves de identificación). He puesto un alert donde debería ir la llamada al script para probar que el script está bien construido y que deberia ser sustituido (el alert) por esta (la llamada):

<html>
    <body>
    <h2>motor b</h2>
        <form name="form" action="" method="get">

            <input type="text" name="desc" id="desc">
            <input type="submit"  class="sub" value="submit" onclick="sub()">
        </form>
        <script type="text/javascript">
        //variables
        var descriptor = "";
        var status = null;
        var urlSp1 = " " ;
        var urlSpZ = " " ;
        urlSp1='<script src="https://www.googleapis.com/customsearch/v1?key=xxxxxxxxxxxxxxxxxxxxxx&cx=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx&callback=hndlr&q=';

        var urlSC = " " ;

            //submit
            function sub(){
                descriptor = document.getElementById("desc").value;
                var urlSC = urlSp1 + descriptor  ;
                var jsScr =   urlSC + '" ' + "/>"

                alert (jsScr) ;

            };    
        </script>

    <script>

      function hndlr(response) {
      for (var i = 0; i < response.items.length; i ++) {
        var item = response.items[i];
        document.getElementById('content').innerHTML += '<br><br><br>' +  '<img width="30%" src="' + item.pagemap['webpage'][0]['image'] + '" />' ;
       }
    }

    </script>

    <div id='content'></div>
    <p id="demo"> </p>

    </body>
</html>

3 respuestas 3

0

Para insertar un script dinámicamente tendrías que hacer:

var src='https://www.googleapis.com/customsearch/v1?key=xxxxxxxxxxxxxxxxxxxxxx&cx=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx&callback=hndlr&q=';
function sub(){
   descriptor = document.getElementById("desc").value;
   var urlSC = src + descriptor;
   var js = document.createElement('script');
   js.src = urlSC;
   document.body.appendChild(js);   
};   
3
  • No consigo que funcione. La primera parte si la hace. Es decir guarda el texto introducido en la variable 'desc' al pulsar el botón. Sin embargo no deplega ningun resultado, limitandose la acción de pulsar el botón a vaciar la caja. Puede ser que el problema este relacionado con la existencia de dos funciones concurresntes (sub y hndlr)?
    – EnricN
    el 23 sep. 2018 a las 21:25
  • yo probaría tres cosas: primero, cambiar el submit por un botón. Puede que estés enviando el formulario y recargando la página en vez de manipulando el dom. Segundo, loguea lo que recibe la función hndlr. Tercero, comprueba que el script de customsearch esté en el DOM
    – ffflabs
    el 23 sep. 2018 a las 21:34
  • estoy en ello. ya he colocado el botón peró no consigo que funcione en el sentido que busco. De hecho me guarda el resultado en una variable y esta substituye el parametro q del script src (lo sé porque en las pruebas he puesto un alert ) pero no me saca los resultados. Le doy al boton y nada se mueve en la ventana...
    – EnricN
    el 25 sep. 2018 a las 17:34
0

Lo que yo haría: la función sub

  1. crea el url
  2. crea un nuevo elemento script
  3. script.src = url;
  4. agrega el script al <head> o al <body>

Lo que viene a continuación es una prueba donde utilizo el url de un script que no hace más que sacar un mensaje en consola.

function sub(){
    let url = "https://codepen.io/enxaneta/pen/9aea47da8e089e424ff7bae93753c9ce.js";
    var script = document.createElement('script');
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
    };   

boton.addEventListener("click", sub);
<button id="boton">script</button>

0

Si puedes usar jQuery diría que emplearas la función getScript que ya lo hace directamente por ti.

function sub(){
  $.getScript( "https://www.googleapis.com/customsearch/v1?key=xxxxxxxxxxxxxxxxxxxxxx&cx=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx&callback=hndlr&q=" )
    .done(function( script, textStatus ) {
      alert("Script cargado!");
    })
    .fail(function( jqxhr, settings, exception ) {
      alert("Script no cargado");
    });
};

Si lo que te devuelve es un JSON entonces esto no te va a funcionar te recomiendo usar getJSON de jquery. En el done recibirás la respuesta y así no tendrás que usar el callback=hndlr.

5
  • Tampoco he conseguido que funcione con jquery...
    – EnricN
    el 23 sep. 2018 a las 21:30
  • Y qué errores te salen en consola? A lo mejor el problema es que metes mal la key o que la v1 está deprecated y ahora se usa otra versión
    – mrroot5
    el 25 sep. 2018 a las 13:12
  • No que va... la api funciona correctamente con todos los script src que le meto, el problema es que necesito que cambie su parámetro 'q' dinámicamente de acuerdo con los descriptores empleados por cada usuario. El error es que o bien saco la caja, y no los resultados, o bien saco las dos cosas a la vez, y en ese caso ni el texto de la caja ni el botón alteran los resultados iniciales. Lo que busco es que saque primero la caja y en función del contenido de esta desplegue unos resultados u otros.
    – EnricN
    el 25 sep. 2018 a las 17:29
  • Agregué un codepen a mi respuesta, así lo puedes funcionando directamente. En mi caso el error que me da en consola es que tu función "hndlr" no está definida. Si lo que te devuelve es un JSON (típico) en una API estas planteándolo mal y esto no te va a funcionar. Con una simple llamada AJAX te valdría.
    – mrroot5
    el 26 sep. 2018 a las 11:06
  • Cambié el codepen, ahora hace una petición JSON. Si le pones tu key debería devolverte datos (prueba también quitando el callback de tu URL si te falla). En mi caso me devolvía error xq no tengo key.
    – mrroot5
    el 26 sep. 2018 a las 11:19

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.