Jump to content

Llamar función js desde tpl.

Pixie Cabanyaler

By Pixie Cabanyaler
in Discusión general

 Share

Recommended Posts

Pixie Cabanyaler Newbie

Pixie Cabanyaler

Posted
Posted

Buenas tardes.

Seguro que es básico, pero le estoy dando vueltas y no consigo que me funcione.

 

El problema es: No consigo ejecutar una función de js almacenada en un fichero externo al tpl desde donde le llamo.

 

Si dentro de la tpl incluyo entre <script></script> toda las funciones, me funciona perfecto pero si lo extraigo no me funciona.

He hecho lo mismo con la parte de CSS, y ese si que me funciona teniéndolo en un fichero externo, de ahí, que deduzco que debe ser algo de sintaxis declarativa donde fallo.

 

Expongo como lo tengo creado y no me funciona:

 

Me he creado un controlador denominado newPageController.php, donde incluyo los enlaces de la css y el js con las siguientes instrucciones:

 

  public function setMedia()
    {
        parent::setMedia();
        $this->addCSS(_THEME_CSS_DIR_.'new-page.css');
        $this->addJS(_THEME_JS_DIR_.'new-page.js');
    }

 

Las rutas apuntadas son correctas, y en ellas he almacenado el css y el js respectivamente.

 

Después tengo creada una tlp con nombre new-page.tpl, desde donde tengo incluidas estas líneas:

 

<div class="center">
    <button id="start_button" onclick="startButton(event)">
        <img id="start_img" src="/img/microfono-esperando.jpg" height="120" width="120">
    </button>
</div>

 

donde al click del button debería llamar a la función startButton()

 

Y por último tengo el fichero new-page.js con el siguiente código y donde se encuentra la función function startButton(event) :

 

$(document).ready(function(){

showInfo('info_start');                                // Visualitce l'ajuda per al començament de la grabació

//var create_email = false;
var final_transcript = '';
var recognizing = false;                            // Per a controlar si estem capturant veu
var ignore_onend;                                    // Per a ignorar si acabar o no acabar, en la funcion onend() del obj webkitSpeechRecognition
var start_timestamp;                                // Per a capturar el moment en que escomeço a parlar
if (!('webkitSpeechRecognition' in window)) {       // Comprovació de si es soporta la API per l'explorador
  upgrade();                                        // Visualitce que ha de ser Chrome actualitzat
} else {
  var recognition = new webkitSpeechRecognition();  // Cree un obj del tipo de la class del API "recognition"
  recognition.lang = "es-ES";                        // Sol deixe treballar amb el castellà, ja que le denominació del productes està sol en castellà
  recognition.interimResults = true;                // Estableix que els resultats capturats siguen definitius i no canvíen
  recognition.continuous = true;                    // Estableix que quand l'usuari deixe de parlar el reconeiximent de veu deixe de grabar i es dispare                                                                l'event onend
 
  // Començament de la captura de la veu
  recognition.onstart = function() {                // La fique en marja i comença a escoltar el que parlem
    recognizing = true;                                // Fique la var com que estem capturant la veu
    showInfo('info_speak_now');                        // Visualitce el text "Habla ahora. Cuando la palabra aparezca  ..."
    start_img.src = '/img/microfono-abierto.gif';   // I el micrófon en moviment gif. obert capturant veu
  }; // del recognition.onstart
 
 
  // Retorna el resultat capturat des de la veu al texto plà
  recognition.onresult = function(event) {
    var interim_transcript = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results.isFinal) {                            // per obtindre l'ultim parraf capturat pel l'usuari
        final_transcript += event.results[0].transcript;
      } else {
        interim_transcript += event.results[0].transcript;
      }
    }
    final_transcript = capitalize(final_transcript);            // Ho fique a majuscules
    final_span.innerHTML = linebreak(final_transcript);            // Encara que invisible (de moment) ho asigne igualment
    interim_span.innerHTML = linebreak(interim_transcript);
    if (final_transcript || interim_transcript) {
        // Copie lo capturat en final_transcript en text al edit de reserques
        document.getElementById('search_query_top').value =  linebreak(final_transcript);
    }
  }; // del recognition.onresult
 
 
  // Es executa quand l'usuari ha acabat de parlar
  recognition.onend = function() {
    recognizing = false;
    if (ignore_onend) {
      showInfo('info_start');    
      return;
    }
    start_img.src = '/img/microfono-esperando.jpg';
    if (!final_transcript) {
      showInfo('info_start');
      return;
    }
    showInfo('info_continue');
  }; // del recognition.onend
 
  // Control dels posibles errors
  recognition.onerror = function(event) {                // s'executa si hi ha algun error, i tria entre els mes comuns
    if (event.error == 'no-speech') {
      start_img.src = '/img/microfono-esperando.jpg';
      showInfo('info_no_speech');
      ignore_onend = true;
    }
    if (event.error == 'audio-capture') {
      start_img.src = '/img/microfono-esperando.jpg';
      showInfo('info_no_microphone');
      ignore_onend = true;
    }
    if (event.error == 'not-allowed') {
      if (event.timeStamp - start_timestamp < 100) {
        showInfo('info_blocked');
      } else {
        showInfo('info_denied');
      }
      ignore_onend = true;
    }
  }; // del recognition.onerror
 
} // del else de if (!('webkitSpeechRecognition' in window))
// Final de les funcions o metodes del objecte webkitSpeechRecognition


// Visualització del messagte <p> que indica la necessitat de actualitzar l'explorador al Chrome per no soportar la API
function upgrade() {
  showInfo('info_upgrade');
}

// Funcions de soport al tractament del texte capturat, per si es fà en diverses linies
var two_line = /\n\n/g;
var one_line = /\n/g;
function linebreak(s) {
  return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
}
var first_char = /\S/;
// Ho fique tot a majúscules
function capitalize(s) {
  return s.replace(first_char, function(m) { return m.toUpperCase(); });
}


// ****************************************************************************************************
// Funció per al començament de la grabació de la veu, es crida des de el onclick del botó del micròfon
function startButton(event) {
  if (recognizing) {                // recognizing es true quand escomença a grabar la veu, pel que si entre per açì és perquè estava grabant veu
    recognition.stop();             // aleshores pare la captura de veu
    return;
  }
  final_transcript = '';            // Buide el contingut dela cadena que captura el text traduit de la veu
  recognition.start();                // Començament de la captura de la veu
  ignore_onend = false;
  final_span.innerHTML = '';        // Encara que invisible (de moment) ho notetje
  interim_span.innerHTML = '';
  start_img.src = '/img/microfono-esperando.jpg';    // Fique el micròfon esperant
  start_timestamp = event.timeStamp;                // Capture el moment de començar la captura de veu
}


// Funció per a la visualització de l'informació a donar al navegant del que ha de fer
function showInfo(s) {
  if (s) {
    for (var child = info.firstChild; child; child = child.nextSibling) {
      if (child.style) {
        child.style.display = child.id == s ? 'inline' : 'none';
      }
    }
    info.style.visibility = 'visible';
  } else {
    info.style.visibility = 'hidden';
  }
}

   
}); // fin $(document).ready(function(){

 

 

¿Que estoy haciendo mal para que no encuentre la función invocada por el onclick="startButton(event)" en el fichero externo y si lo haga si lo meto todo en la tpl entre las etiquetas <script></script>?

 

Gracias

Link to comment
Share on other sites
Pixie Cabanyaler Newbie

Pixie Cabanyaler

Posted
  • Author
Posted

Te refieres a esto desde el NewpageController.php ¿verdad?

 

 public function initContent()
    {
        parent::initContent();
        // Estalece la plantilla tpl a manejar de la ruta /public_html/themes/default-boostrap
        $this->setTemplate(_PS_THEME_DIR_.'new-page.tpl');   
    }

Link to comment
Share on other sites
Pixie Cabanyaler Newbie

Pixie Cabanyaler

Posted
  • Author
Posted (edited)

Si, esa es la manera correcta.

A ver si por cache o algo no te esta cogiendo el .js, asegúrate desde el código fuente de la pagina

Disculpa la espera, estaba de viaje.

 

He limpiado la caché del servidor desde el BackOffice, y vuelto a cargar la pagina, y nada, no ejecuta el js.

 

La carga la hace bien si veo el código fuente de la página, veo la línea tal cual en la sección head: 

 

<script type="text/javascript" src="/themes/default-bootstrap/js/new-page.js"></script>

 

¿No será cuestión de sintaxis a la hora de almacenar el fichero js con sus funciones, el JQuery de carga de página completa o algo así?.

 

Copio el código integro del fichero js, por si alguien quiere revisármelo y ver si falta o sobra algo en la sintaxis, porque debe ser una cosa  así.

 

La verdad es que poniéndolo como <script>...</script> en la tpl, funciona de maravilla, pero me rompe la limpieza del MVC, y quisiera tenerlo bien estructurado, además de salir de dudas.

 

Muchas gracias.

 

Anexo la imagen que muestra como me carga la ruta en el <head> del new-page.js

 

:(

 

Código del new-page.js:

 

$(document).ready(function(){

 

showInfo('info_start');                                // Visualitce l'ajuda per al començament de la grabació

 

//var create_email = false;

var final_transcript = '';

var recognizing = false;                            // Per a controlar si estem capturant veu

var ignore_onend;                                    // Per a ignorar si acabar o no acabar, en la funcion onend() del obj webkitSpeechRecognition

var start_timestamp;                                // Per a capturar el moment en que escomeço a parlar

if (!('webkitSpeechRecognition' in window)) {       // Comprovació de si es soporta la API per l'explorador

  upgrade();                                        // Visualitce que ha de ser Chrome actualitzat

} else {

  var recognition = new webkitSpeechRecognition();  // Cree un obj del tipo de la class del API "recognition"

  recognition.lang = "es-ES";                        // Sol deixe treballar amb el castellà, ja que le denominació del productes està sol en castellà

  recognition.interimResults = true;                // Estableix que els resultats capturats siguen definitius i no canvíen

  recognition.continuous = true;                    // Estableix que quand l'usuari deixe de parlar el reconeiximent de veu deixe de grabar i es dispare                                                                l'event onend

 

  // Començament de la captura de la veu

  recognition.onstart = function() {                // La fique en marja i comença a escoltar el que parlem

    recognizing = true;                                // Fique la var com que estem capturant la veu

    showInfo('info_speak_now');                        // Visualitce el text "Habla ahora. Cuando la palabra aparezca  ..."

    start_img.src = '/img/microfono-abierto.gif';   // I el micrófon en moviment gif. obert capturant veu

  }; // del recognition.onstart

 

 

  // Retorna el resultat capturat des de la veu al texto plà

  recognition.onresult = function(event) {

    var interim_transcript = '';

    for (var i = event.resultIndex; i < event.results.length; ++i) {

      if (event.results.isFinal) {                            // per obtindre l'ultim parraf capturat pel l'usuari

        final_transcript += event.results[0].transcript;

      } else {

        interim_transcript += event.results[0].transcript;

      }

    }

    final_transcript = capitalize(final_transcript);            // Ho fique a majuscules

    final_span.innerHTML = linebreak(final_transcript);            // Encara que invisible (de moment) ho asigne igualment

    interim_span.innerHTML = linebreak(interim_transcript);

    if (final_transcript || interim_transcript) {

        // Copie lo capturat en final_transcript en text al edit de reserques

        document.getElementById('search_query_top').value =  linebreak(final_transcript);

    }

  }; // del recognition.onresult

 

 

  // Es executa quand l'usuari ha acabat de parlar

  recognition.onend = function() {

    recognizing = false;

    if (ignore_onend) {

      showInfo('info_start');    

      return;

    }

    start_img.src = '/img/microfono-esperando.jpg';

    if (!final_transcript) {

      showInfo('info_start');

      return;

    }

    showInfo('info_continue');

  }; // del recognition.onend

 

  // Control dels posibles errors

  recognition.onerror = function(event) {                // s'executa si hi ha algun error, i tria entre els mes comuns

    if (event.error == 'no-speech') {

      start_img.src = '/img/microfono-esperando.jpg';

      showInfo('info_no_speech');

      ignore_onend = true;

    }

    if (event.error == 'audio-capture') {

      start_img.src = '/img/microfono-esperando.jpg';

      showInfo('info_no_microphone');

      ignore_onend = true;

    }

    if (event.error == 'not-allowed') {

      if (event.timeStamp - start_timestamp < 100) {

        showInfo('info_blocked');

      } else {

        showInfo('info_denied');

      }

      ignore_onend = true;

    }

  }; // del recognition.onerror

 

} // del else de if (!('webkitSpeechRecognition' in window))

// Final de les funcions o metodes del objecte webkitSpeechRecognition

 

 

// Visualització del messagte <p> que indica la necessitat de actualitzar l'explorador al Chrome per no soportar la API

function upgrade() {

  showInfo('info_upgrade');

}

 

// Funcions de soport al tractament del texte capturat, per si es fà en diverses linies

var two_line = /\n\n/g;

var one_line = /\n/g;

function linebreak(s) {

  return s.replace(two_line, '<p></p>').replace(one_line, '<br>');

}

var first_char = /\S/;

// Ho fique tot a majúscules

function capitalize(s) {

  return s.replace(first_char, function(m) { return m.toUpperCase(); });

}

 

 

// ****************************************************************************************************

// Funció per al començament de la grabació de la veu, es crida des de el onclick del botó del micròfon

function startButton(event) {

  if (recognizing) {                // recognizing es true quand escomença a grabar la veu, pel que si entre per açì és perquè estava grabant veu

    recognition.stop();             // aleshores pare la captura de veu

    return;

  }

  final_transcript = '';            // Buide el contingut dela cadena que captura el text traduit de la veu

  recognition.start();                // Començament de la captura de la veu

  ignore_onend = false;

  final_span.innerHTML = '';        // Encara que invisible (de moment) ho notetje

  interim_span.innerHTML = '';

  start_img.src = '/img/microfono-esperando.jpg';    // Fique el micròfon esperant

  start_timestamp = event.timeStamp;                // Capture el moment de començar la captura de veu

}

 

 

// Funció per a la visualització de l'informació a donar al navegant del que ha de fer

function showInfo(s) {

  if (s) {

    for (var child = info.firstChild; child; child = child.nextSibling) {

      if (child.style) {

        child.style.display = child.id == s ? 'inline' : 'none';

      }

    }

    info.style.visibility = 'visible';

  } else {

    info.style.visibility = 'hidden';

  }

}

 

   

}); // fin $(document).ready(function(){

 

post-1336199-0-04479300-1486492376_thumb.jpg

Edited by Pixie Cabanyaler (see edit history)
Link to comment
Share on other sites
Pixie Cabanyaler Newbie

Pixie Cabanyaler

Posted
  • Author
Posted (edited)

Si miro desde las herramientas para desarrollador del navegador de Chrome en el apartado Source, veo que no tengo cargado el js ¿? ahora si que ya no entiendo nada. :unsure:

Creo que me voy a ver el futbol.

Adjunto imagen de que no me lo carga viendo la pestaña Source, sin embargo desde la pestaña de Elements si que está según muestro en la imagen del anterior post.

post-1336199-0-47609300-1486494666_thumb.jpg

Edited by Pixie Cabanyaler (see edit history)
Link to comment
Share on other sites
Pixie Cabanyaler Newbie

Pixie Cabanyaler

Posted
  • Author
Posted (edited)

En el código generado en html de la página, veo que me da el error "Uncaught ReferenceError: startButton in not defined"

 

<!-- div on fique l'icono del micròfon -->
<div class="center">
    <button id="start_button" onclick="startButton(event)">  // Aqui me aparece el error
        <img id="start_img" src="/img/microfono-esperando.jpg" height="120" width="120">
    </button>
</div>

 

He aplicado todas las soluciones leidas en el siguiente link, pero no hay manera.

 

http://stackoverflow.com/questions/5067887/function-is-not-defined-uncaught-referenceerror

 

Es por el alcance de la vision "scope" de las funciones, ya que si pongo la funcion  startButonn(...) dentro del $(document).ready(function(), indican que no la ve, pero tampoco la ve si lo pongo fuera.

 

Muy probablemente el problema venga de que al cargarse el html primero, y hacer referencia a la función, esta no ha sido declarada todavía, ya que el $(document).ready(function(){, establece propiamente que se pueda ejecutar sólo cuando la html se ha cargado al completo, y por tanto al cargarse la html y no haberse ejecutado la carga todavía del js, no conoce la función. Aunque tambien lo he probado sin el $(document).ready(function(), y el problema es el mismo.

 

 

También lo he intentado con la sintaxis de

 

 $(document).on("click","#start_button",function(event){

 

y quitando en el html el: <button id="start_button" onclick="startButton(event)"> y dejándolo como <button id="start_button">,

 

pero tampoco.

 

 

Dentro del js he puesto un alert('hola'); y no me muestra. Creo que ni siquiera carga el js, o si lo carga no hace ni caso de lo que contiene.

No se como continuar con esto.

Edited by Pixie Cabanyaler (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...