[SOLUCIONADO] [Consulta] Puedo enviar variables a un archivo js o html

Fmoris · #1 (**permalink**) 20/06/2013, 09:37

Buenos días, Esta estoy recién conociendo NODE e visto y leido algunos tutoriales pero no e visto en ninguna parte como traspasar variables entre distintos archivos.

Donde quiero tener un HTML estático y hacer consultas con NODE a mi base de datos MYSQL, y cargar los datos obtenidos en las consultas MYSQL en mi HTML.

lo que logre hacer es mostrar información de un archivo.js sin problema pero cuando quiero mostrar el resultado de la consulta no puedo.

Pego mi código:

index.html

Código Javascript:

Ver original<!DOCTYPE html>
<html lang=es>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
function test(){
alert("test");
}
 
</script>
 
</head>
<body>
<div data-role="header">
<h1>TEST DE MOSTRAR DESDE NODE.JS</h1>
   </div>
<div id="resultado" >
<h2>DESDE NODE</h2>
</div>
<p></p>
<div>
<h2>DESDE JS</h2>
<div id="resultado2">
<h2>DESDE JS</h2>   
</div>
</div>
</body>
<script type="text/javascript" src="mysql.js"></script>
<script type="text/javascript" src="holamundo.js"></script>
</html>

mysql.js (NODE) desde aqui no logro enviar las variables al html como innerHTML o al holamundo.js

Código Javascript:

Ver originalvar mysql      = require('mysql');
var connection = mysql.createConnection({
 host     : 'localhost',
 user     : 'root',
 password : '',
});
 
connection.connect();
 
connection.query('USE locales')
 
connection.query('SELECT type FROM markers', function(err, rows, fields) {   
var mostrar;
if(err){
console.log("ERROR: "+err.message);
throw err;
} 
 
for(var i=0;i<rows.length;i++){
 
mostrar = rows[i].type;
console.log(mostrar);
}
 //console.log(rows);
 
return(mostrar);
});
 
connection.end();

holamundo.js funciona OK

Código Javascript:

Ver original$('#lista').listview();
document.getElementById('resultado2').innerHTML = "<ul id='lista' data-role='listview' data-inset='true'>" +
                                                 "<li><a href='#' onClick='test();'>1</a></li>" +
                                                 "<li><a href='#'>2</a></li>" +
                                                 "</ul>";

Ojala puedan ayudarme ,
Gracias

SeaPirates · #2 (**permalink**) 20/06/2013, 14:26

Hola, ¿Te funciona algo de tu código?

Por lo que veo ni estás conectando al servidor de NodeJS, ni estás devolviendo ningún dato.

Que yo sepa tienes que conectarlo a un puerto, no sé (Usando socket.io). No soy experto pero es lo que yo hago para poder enviar y recibir datos:

Código Javascript:

Ver originalvar mysql = require('mysql');
 
var client = mysql.createConnection(
    {
      host     : 'localhost',
      user     : 'root',
      password : '',
      database : 'database',
    }
);
 
client.connect(function(error, results) {
  if(error) {
    console.log('Error de conexion: ' + error.message);
    return;
  }
  console.log('Conectado a MySQL correctamente');
});
 
var io = require('socket.io').listen(15000, { log: false });
 
 
io.sockets.on('connection', function (socket) {
    socket.on('request1', function() {
        client.query("SELECT type FROM markers", function(errors, rows) {
            socket.emit('send1', rows[0].type);
        });
    });
});

Si no es así, no me hagas caso. Pero yo almenos para poder enviar datos al servidor y poder recibirlos tengo que usar sockets.

Fmoris · #3 (**permalink**) 20/06/2013, 15:05

cuando ejecuto node mysql.js me muestra el resultado de la consulta en la consola, y en tu código como recibes el resultado¿

SeaPirates · #4 (**permalink**) 20/06/2013, 15:25

Cita:

Iniciado por Fmoris

cuando ejecuto node mysql.js me muestra el resultado de la consulta en la consola, y en tu código como recibes el resultado¿

Claro, puedes mostrar en la consola los datos, pero nada más. Creo que no puedes devolver los datos desde un servidor hasta el cliente si no es por sockets.

Con el código que te he pasado, y usando el módulo socket.io puedes enviar datos desde el cliente hasta el servidor y viceversa.

Aunque le faltan partes, como la conexión del cliente al servidor, y la petición para recibir los datos.

Si quieres saber más acerca de como funciona tienes su página web: http://socket.io

Fmoris · #5 (**permalink**) 20/06/2013, 15:34

Gracias, ya estoy instalando socket.io mientras me informo

Fmoris · #6 (**permalink**) 24/06/2013, 14:04

Cita:

Iniciado por SeaPirates

Claro, puedes mostrar en la consola los datos, pero nada más. Creo que no puedes devolver los datos desde un servidor hasta el cliente si no es por sockets.

Con el código que te he pasado, y usando el módulo socket.io puedes enviar datos desde el cliente hasta el servidor y viceversa.

Aunque le faltan partes, como la conexión del cliente al servidor, y la petición para recibir los datos.

Si quieres saber más acerca de como funciona tienes su página web: [url]http://socket.io[/url]

Muchas gracias por la info, logre hacer lo que queria, insertar, listar, etc desde una base de datos mysql con los modulos socket.io y mysql.

Ahora si tengo otro problema que cuando muestra la información obtenida desde la base de datos , no toman los diseños de jquery Mobile.

Código Javascript:

Ver original<ul data-role="listview" data-filter="true" data-filter-placeholder="busca locales..." data-inset="true" id='lista_locales_ingresados'></ul>

tengo este codigo que se supone que arregla el problema

Código Javascript:

Ver original$("#lista_locales_ingresados").listview("refresh");

pero no me funciona.

pego mi index.html por si alguien tiene la solución.
*tengo comentado el refresh porque no me funciona

Código Javascript:

Ver original<!DOCTYPE html>          
<!DOCTYPE html>          
<html>                           
  <head>                                            
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Node JS</title>
    <style type="text/css">                    
      html , body {
        font: normal 0.9em arial , helvetica;
      }                     
    </style> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript"> 
 
    $(document).ready(function() {
      var socket  = io.connect('http://localhost:3000');
        
      $('#save').click(function() {
        if ($('#nombre_local').val() == '' || $('#direccion_local').val() == '') {
          return alert('Porfavor ingrese todos los campos!');
 
        }
        var data = {
          name:    $('#nombre_local').val(),
          address: $('#direccion_local').val(),
          lat:     $('#latitud_local').val(),
          lng:     $('#longitud_local').val(),
          type:    $('#tipo_local').val()
 
        };
       // $("#lista_locales_ingresados").listview("refresh");   
        socket.emit('add local', data);        
        $('#nombre_local').val('');
        $('#direccion_local').val('');          
        $('#latitud_local').val('');
        $('#longitud_local').val('');
        $('#tipo_local').val('');
      });
 
      socket.on('listar', function(data) {
 
        var out = "";
        $.each(data, function(i, obj) {
          out += "<li>"+obj.name+" <b>Ubicado en</b> "+obj.address+" <b>latitud:</b> "+obj.lat+"<b>Long:</b> "+obj.lng+" <b>Tipo:</b> "+obj.type+"</li>";
        });
        $('#lista_locales_ingresados').html(out);   
 
 
      });
    });
    </script>  
  </head>                                                                                                                              
  <body>
    <div data-role="header">
      <h1>Crear nuevo Registro</h1>
    </div>
    <label for="text-basic">NOMBRE LOCAL:</label>
    <div><input type='text' id='nombre_local' value=''></div>
    <div>DIRECCION: <input type='text' id='direccion_local' value=''></div>
    <div>LATITUD: <input type='text' id='latitud_local' value=''></div>
    <div>LONGITUD: <input type='text' id='longitud_local' value=''></div>
    <div>TIPO: <input type='text' id='tipo_local' value=''></div>
    <div><input data-inline="true" type='button' value='Guardar' id='save'></div>
    
    <br> 
    <h2>lista_locales_ingresados:</h2>
    <ul data-role="listview" id='lista_locales_ingresados'></ul>
    
  </body>                                                                                                                              
</html>

Fmoris · #7 (**permalink**) 17/07/2013, 09:57

solucione el problema agregando este codigo

$('#lista_locales_ingresados').html(out);
$('#lista_locales_ingresados').listview('refresh') ;