Inserto bloques HTML + CSS + javascript en forma dinámica dentro de una página html. Dentro del bloque javascript hay variables o funciones que no se actualizan.
La página html principal es:
*******************************************************************
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="StyleSheet" href="css/estilos.css" type="text/css">
<script type="text/javascript" src="js/dhtml.js"></script>
<link rel="stylesheet" href="css/style.css" />
<title>Principal</title>
</head>
<body>
<input type="button" value="Probar" name="prueba1" onClick="insertar();"/>
<div id="aqui"></div>
</body>
</html>
*******************************************************************
cuando oprimo el boton puesto en esta página se ejecuta este otro archivo javascript
dhtml.js
*******************************************************************
function bjJS() {
bloque = '';
bloque += 'var sorter = new TINY.table.sorter("sorter");';
bloque += 'sorter.head = "head";';
bloque += 'sorter.asc = "asc";';
bloque += 'sorter.desc = "desc";';
bloque += 'sorter.even = "evenrow";';
bloque += 'sorter.odd = "oddrow";';
bloque += 'sorter.evensel = "evenselected";';
bloque += 'sorter.oddsel = "oddselected";';
bloque += 'sorter.paginate = true;';
bloque += 'sorter.currentid = "currentpage";';
bloque += 'sorter.limitid = "pagelimit";';
bloque += 'sorter.init("table",1);';
return bloque;
}
function blHTML() {
bloque = '';
bloque += '<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">';
bloque += '<thead>';
bloque += '<tr>';
bloque += '<th class="nosort"><h3>ID</h3></th>';
bloque += '<th><h3>Name</h3></th>';
bloque += '<th><h3>Phone</h3></th>';
bloque += '<th><h3>Email</h3></th>';
bloque += '<th><h3>Zip</h3></th>';
bloque += '<th><h3>Birthdate</h3></th>';
bloque += '<th><h3>Last Access</h3></th>';
bloque += '<th><h3>Rating</h3></th>';
bloque += '<th><h3>Done</h3></th>';
bloque += '<th><h3>Salary</h3></th>';
bloque += '<th><h3>Score</h3></th>';
bloque += '</tr>';
bloque += '</thead>';
bloque += '<tbody>';
bloque += '<tr>';
bloque += '<td>1</td>';
bloque += '<td>Ezekiel Hart</td>';
bloque += '<td>(627) 536-4760</td>';
bloque += '<td><a href="mailto:#">
tortor@est.ca</a></td>';
bloque += '<td>53082</td>';
bloque += '<td>12/02/1962</td>';
bloque += '<td>March 26, 2009</td>';
bloque += '<td>-7</td>';
bloque += '<td>7%</td>';
bloque += '<td>$73,229</td>';
bloque += '<td>6.9</td>';
bloque += '</tr>';
bloque += '<tr>';
bloque += '<td>50</td>';
bloque += '<td>Eden Burks</td>';
bloque += '<td>(576) 196-6013</td>';
bloque += '<td><a href="mailto:#">
lorem@magna.com</a></td>';
bloque += '<td>30822</td>';
bloque += '<td>02/27/1964</td>';
bloque += '<td>April 27, 2002</td>';
bloque += '<td>3</td>';
bloque += '<td>6%</td>';
bloque += '<td>$109,631</td>';
bloque += '<td>2.5</td>';
bloque += '</tr>';
bloque += '</tbody>';
bloque += '</table>';
bloque += '<div id="controls">';
bloque += '<div id="perpage">';
bloque += '<select onchange="sorter.size(this.value)">';
bloque += '<option value="5">5</option>';
bloque += '<option value="10" selected="selected">10</option>';
bloque += '<option value="20">20</option>';
bloque += '<option value="50">50</option>';
bloque += '<option value="100">100</option>';
bloque += '</select>';
bloque += '<span>Lineas por página</span>';
bloque += '</div>';
bloque += '<div id="navigation">';
bloque += '<img src="img/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />';
bloque += '<img src="img/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />';
bloque += '<img src="img/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />';
bloque += '<img src="img/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />';
bloque += '</div>';
bloque += '<div id="text">Pagina <span id="currentpage"></span> de <span id="pagelimit"></span></div>';
bloque += '</div>';
return bloque;
}
function insertar() {
area = document.getElementById('aqui');
area.innerHTML = blHTML();
v2 = document.createElement('script');
v2.setAttribute('type','text/javascript');
v2.setAttribute('src','js/script.js');
document.getElementsByTagName('body').item(0).appendChild(v2);
v3 = document.createElement('script');
v3.setAttribute('type','text/javascript');
v3n = document.createTextNode(bjJS());
v3.appendChild(v3n);
document.getElementsByTagName('body').item(0).appendChild(v3);
}
*******************************************************************
la funcion insertar agrega un bloque HTML con innerhtml
agrega una referencia a un archivo externo javascript dentro del BODY
y agrega un segmento java script dentro del BODY
Si lo ejecuto con Firefox 3.0 funciona bien, pero con Firefox 9.0 es necesario oprimir por segunda vez el boton para que se activen las funcionalidades de esta tabla.
Es como que necesitara refrescarse algo, o es que estoy haciendo algo mal?
Gracias por sus comentarios
Mostrar Temas
