v7 – recogiendo data del visor HTML

Con el visor HTML de la v7 se pueden hacer infinidad de cosas en cuanto a visualización de data e inclusión de controles gráficos de diferentes tipos pero algunos casos el verdadero lió es lograr recoger la data que esos controles generan, como son editores, calendars, planificadores, UIs complejos, etc. así que utilizar este tipo de librerías genera mucho dinamismo pero tienen dos problemas que hay resolver para tomar la data generada o procesada por estas herramientas y guardarlas en la base de datos, ahora voy a detallar y solucionar estos 2 problemas:

1) Como recoger data generada dinámica mente y guardarla en la DB de V7:

El primer el problema es como lograr tomar la data que generan diferentes controles HTML y guardarla en nuestra DB, el asunto es que desde v7 tenemos acceso al código fuente del control HTML pero durante la ejecución del contenido html normalmente se genera más data y elementos que se adicionan al DOM y que no podemos leerlos desde v7 pues v7 solo ve el código fuente original, así que como recoger esta data que esta en memoria pues has sido generada dinámicamente ?

Pues lo primero que me percaté es que si bien la adición de elementos al DOM por medio de JQuery no aparece en el código fuente del documento, la inclusión de los mismo mediante Javascript puro y duro si lo hace, en este ejemplo estoy tomando el codigo html generado por ace editor y lo estoy guardando en un div especifico para luego recogerlo desde v7:

Contenedor:

<div id='html' style='display:none'></div>

Javascritp:

function setHTML() {

   var html = editor.getValue();
   document.getElementById('html').innerHTML = ''
   var headertext=document.createTextNode(html)
   document.getElementById('html').appendChild(headertext)
}

Como resultado cuando inspeccionó el código html del control html puedo ver dentro del div «#html» el contenido que extraje desde ace editor y puedo mediante expresiones regulares o funciones de texto extraer esa información en el manejador de evento, ejemplo:

var browser = theRoot.dataView().control("BROWSER");
var codigo = browser.sourceCode();
var html = codigo.match(/<div id="html" style="display:none">([\s\S]*)<\/div>\s*<textarea/)[1]

2) Como propagar un evento click desde el visor HTML hasta v7 para recoger lo que hay en #html

Muy bien ya solucionamos el 50% del problema que era generar contenido que sea visible desde v7 leyendo el codigo html del control, ahora el lió es el como y cuando guardarlo, y digo lio por que el control HTML tiene un problema a la hora de tomar el evento click en los links y es que no permite la ejecución de eventos «click» asociados al link ni antes ni despues que sea procesado el evento por el manejador de v7, por lo que la secuencia =>

1) click link.

2) extracción de datos relevantes desde el control.

3) guardado de datos con manejador de evento v7.

No es posible solo capturando el evento «Link clicked» desde v7 por que el código de extracción no va a se ejecutado ni antes ni después del manejador

Lo anterior se soluciona generando el evento click en Javascript puro y duro ($.trigger() y $.click() no funcionan)

Elemento html que sirve de disparador:

<p id="click">Guardar</p>
<a id="external" href="#">Link para simular click</a>

Código para simular evento pero con la posibilidad de ejecutar codigo js antes de que el evento click sea capturado por v7:

function simulateClick(id) {
  var evt = document.createEvent('MouseEvents');
  evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0,
  false, false, false, false, 0, null);
  var cb = document.getElementById(id);
  cb.dispatchEvent(evt);
}
 $('#click').click(function(){
    alert('hola')
    simulateClick('external')
 }

Espero que les sea útil y les ayude a usar contoles y funcionalidades html5 sin necesidad de usar Cirrus.js o vModApache simplemente para extraer la data desde html.

Un saludo,