1

Solo él código referente a socket.io se ejecuta, el chat funciona perfecto, pero el código que tengo en bootstrapPage.js no funciona, ¿por qué?. (ANTES LOS FORMULARIOS AL HACER CLICK EN SIGN IN Y LOGIN SE EJECUTABAN, AHORA YA NO) introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

index.html

<html>
   <head>
      <title>Bootstrap Case</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
      <script src="http://code.jquery.com/jquery-1.11.1.js"></script>

      <style>
         form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
         form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
         form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
         #messages { list-style-type: none; margin: 0; padding: 0; }
         #messages li { padding: 5px 10px; }
         #messages li:nth-child(odd) { background: #eee; }
      </style>

   </head>

   <body>
      <nav class="navbar navbar-default">
         <div class="container-fluid">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               </button>
               <a class="navbar-brand" href="#">MyApp <span class="glyphicon glyphicon-heart" style="color:red;"></span>
               </a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
               <ul class="nav navbar-nav">
               <li><a href="#">Chat</a></li>
               <ul class="nav navbar-nav navbar-right">
                  <li><a href="#" id="signUp"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                  <li><a href="#" id="logIn"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
               </ul>
            </div>
          </div>

      </nav>
      <div class="container" id="wrap">
      </div>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="bootstrapPage.js"></script>

      <div class="container" id="contenido">
         <ul id="messages"></ul>
         <form action="">
            <input id="m" autocomplete="off" /><button>Send</button>
         </form>
      </div>

      <script>
         var socket = io();
         $('form').submit(function(){
           socket.emit('chat message', $('#m').val());
           $('#m').val('');
           return false;
         });
         socket.on('chat message', function(msg){
           $('#messages').append($('<li>').text(msg));
         });
      </script>

   </body>
</html>

index.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

bootstrapPage.js ( NO FUNCIONA EL CÓDIGO DENTRO DE bootstrapPage.js )

$(document).ready(function() {

$( "#signUp" ).on( "click", function(e) {  
  e.preventDefault();
 $("#wrap").load("bootstrapSignUp.html"); 
});

$( "#logIn" ).on( "click", function(e) {
  e.preventDefault();
 $("#wrap").load("bootStrapLogIn.html");

});



window.onload = function() {
 alert("Welcome to myApp");        // ESTE CÓDIGO TAMPOCO SE EJECUTA !!!!!!!
};





});

bootStrapLogIn.html

<div class="container">
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
   <div class="panel panel-info" >
      <div class="panel-heading">
         <div class="panel-title">Sign In</div>
         <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div>
      </div>
      <div style="padding-top:30px" class="panel-body" >
         <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
         <form id="loginform" class="form-horizontal" role="form">
            <div style="margin-bottom: 25px" class="input-group">
               <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
               <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">                                        
            </div>
            <div style="margin-bottom: 25px" class="input-group">
               <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
               <input id="login-password" type="password" class="form-control" name="password" placeholder="password">
            </div>
            <div class="input-group">
               <div class="checkbox">
                  <label>
                  <input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
                  </label>
               </div>
            </div>
            <div style="margin-top:10px" class="form-group">
               <!-- Button -->
               <div class="col-sm-12 controls">
                  <a id="btn-login" href="#" class="btn btn-success">Login  </a>
                  <a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>
               </div>
            </div>
            <div class="form-group">
               <div class="col-md-12 control">
                  <div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
                     Don't have an account! 
                     <a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()">
                     Sign Up Here
                     </a>
                  </div>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>
<div id="signupbox" style="display:none; margin-top:50px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info">

bootstrapSignUp.html

<div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form action="r" method="post" accept-charset="utf-8" class="form" role="form">   <legend>Sign Up</legend>
                    <h4>It's free and always will be.</h4>
                    <div class="row">
                        <div class="col-xs-6 col-md-6">
                            <input type="text" name="firstname" value="" class="form-control input-lg" placeholder="First Name"  />                        </div>
                        <div class="col-xs-6 col-md-6">
                            <input type="text" name="lastname" value="" class="form-control input-lg" placeholder="Last Name"  />                        </div>
                    </div>
                    <input type="text" name="email" value="" class="form-control input-lg" placeholder="Your Email"  /><input type="password" name="password" value="" class="form-control input-lg" placeholder="Password"  /><input type="password" name="confirm_password" value="" class="form-control input-lg" placeholder="Confirm Password"  />                    <label>Birth Date</label>                    <div class="row">
                        <div class="col-xs-4 col-md-4">
                            <select name="month" class = "form-control input-lg">
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>                        </div>
                        <div class="col-xs-4 col-md-4">
                            <select name="day" class = "form-control input-lg">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>                        </div>
                        <div class="col-xs-4 col-md-4">
                            <select name="year" class = "form-control input-lg">
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>                        </div>
                    </div>
                     <label>Gender : </label>                    <label class="radio-inline">
                        <input type="radio" name="gender" value="M" id=male />                        Male
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="gender" value="F" id=female />                        Female
                    </label>
                    <br />
              <span class="help-block">By clicking Create my account, you agree to our Terms and that you have read our Data Use Policy, including our Cookie Use.</span>
                    <button class="btn btn-lg btn-primary btn-block signup-btn" type="submit">
                        Create my account</button>
            </form>          
          </div>
</div>            
</div>
7
  • 1
    Puedes abrir las herramientas de desarrollador en F12 y en la consola mirar que error sale al hacer click donde dices, y dejarnoslo por aqui Commented el 25 ene. 2017 a las 15:58
  • Al hacer click no sale nada, pero al cargar la página sale esto "localhost:3000/bootstrapPage.js Failed to load resource: the server responded with a status of 404 (Not Found)" Commented el 25 ene. 2017 a las 16:07
  • Eso quiere decir que el archivo bootstrapPage.js no se encuentra en el directorio raíz de tu servidor. Osea que el src donde tienes la etiqueta script enlazando al bootstrapPage.js está erróneo. Debes poner el bootstrapPage.js en el mismo sitio que tienes la página principal de tu web. Commented el 25 ene. 2017 a las 16:19
  • ¿Como puede ser esto?, tengo todos los archivos en la misma ruta, bootstrapPage.js index.html index.js estan todos juntos!!! no entiendo Commented el 25 ene. 2017 a las 16:22
  • ¿Puedes hacer una captura de tu carpeta con los archivos y ponerlo aquí? Commented el 25 ene. 2017 a las 16:23

1 respuesta 1

2

Tu problema se debe a que NO estás sirviendo contenido estático. Para hacerlo con Express se agregan la siguiente línea:

app.use(express.static('./assets'));

Suponiendo que el directorio assets tiene dentro js y css, en tus vistas debes referenciarlas como relativas:

<script src="/js/bootstrapPage.js"></script>
5
  • El asunto estaba por ahí, muchisimas gracias!!!, debo agregar de esa manera los archivos javascript, esto me funciono para agregar el script externo. No se si lo que me dijiste funcionaba y no lo supe hacer, pero me diste la pista para poder solucionar mi problema. app.get('/bootstrapPage.js',function(req,res){ res.sendFile((__dirname + '/bootstrapPage.js')); }); Commented el 25 ene. 2017 a las 18:11
  • 1
    No es la forma correcta de hacerlo. Express te provee una manera ya para referenciar estáticos, no hay necesidad de enviar el archivo.
    – gugadev
    Commented el 25 ene. 2017 a las 18:12
  • Ah ok, ya me parecía, entonces creo que no entiendo la forma en que lo hiciste :( voy a seguir intentando entonces a ver si puedo hacerlo. Commented el 25 ene. 2017 a las 18:15
  • Ahora si me funciono, mi problema era que no tenia definido express, tuve que agregar: var express = require('express'); app.use(express.static('./public')); Commented el 25 ene. 2017 a las 18:39
  • 1
    Me alegra que lo hayas solucionado. Saludos.
    – gugadev
    Commented el 25 ene. 2017 a las 18:44

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.