-1

Hola quiero hacer algo parecido a esto pasandole partes de codigo a mi aside y que mi aside cambie en base a un evento como onclick por ejemplo pero no lo termino de entender el ejemplo realmente no se angularjs si alguno me lo puede explicar o sabe de una forma de hacerlo sin angularjs. Saludos

PD: Lamento hacer otra vez la publicacion pero realmente necesito la ayuda trate de explicarme de la forma mas concisa que pude esta vez

$(document).ready(function () {
    setInterval(ShowTime, 1000);
    setInterval(MostrarDiaLetras, 1000);
});

function ShowTime() {
    
    var TheDate = new Date();
    
    var TheHour = TheDate.getHours();
    var TheMinutes = TheDate.getMinutes();

    TheMinutes = (TheMinutes < 10) ? "0" + TheMinutes :  TheMinutes;
    
    var TheTime = TheHour + ":" +TheMinutes;
    
    $('#TheDate').html(TheTime);     
}

function MostrarDiaLetras() {
    
    var date = new Date();
    
    var dia = date.getDay();
    var mes = date.getMonth();
    var diaMes= date.getDate();
 	var diaLetras;
 	var mesLetras;

    diaLetras = (dia == 0) ? "Domingo"  :  diaLetras;
    diaLetras = (dia == 1) ? "Lunes"  :  diaLetras;
    diaLetras = (dia == 2) ? "Martes"  :  diaLetras;
    diaLetras = (dia == 3) ? "Miercoles"  :  diaLetras;
    diaLetras = (dia == 4) ? "Jueves"  :  diaLetras;
    diaLetras = (dia == 5) ? "Viernes"  :  diaLetras;
    diaLetras = (dia == 6) ? "Sabado"  :  diaLetras;
 	
 	mesLetras=(mes == 0) ? "Enero"  :  mesLetras;
 	mesLetras=(mes == 1) ? "Febrero"  :  mesLetras;
 	mesLetras=(mes == 2) ? "Marzo"  :  mesLetras;
 	mesLetras=(mes == 3) ? "Abril"  :  mesLetras;
 	mesLetras=(mes == 4) ? "Mayo"  :  mesLetras;
 	mesLetras=(mes == 5) ? "Junio"  :  mesLetras;
 	mesLetras=(mes == 6) ? "Julio"  :  mesLetras;
 	mesLetras=(mes == 7) ? "Agosto"  :  mesLetras;
 	mesLetras=(mes == 8) ? "Septiembre"  :  mesLetras;
 	mesLetras=(mes == 9) ? "Octubre"  :  mesLetras;
 	mesLetras=(mes == 10) ? "Noviembre"  :  mesLetras;
 	mesLetras=(mes == 11) ? "Diciembre"  :  mesLetras;


    var Fecha = diaLetras+"<br/>" +diaMes +" "+ mesLetras;
    $('#DiaLetras').html(Fecha);     
}
html{
	font-family: sans-serif
}

main {
	float: left;
	width: 70%;
}

aside{
	float: right;
	width: 30%;
}

/*  Cambio tamaño glyphi*/
header .glyphicon {
    font-size: 25px;
}

/*  Cambio color bordes del menu*/
.navbar-default{
	border-bottom-width: 2px;
	border-bottom-color: #F49D51;
	margin-bottom: 0px;
}

/*  Cambio de color a active del menu*/

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555;
  background-color: #F49D51;
}

/*  Dropdown tamaño etc */

.navbar-login
{
    width: 305px;
    padding: 10px;
    padding-bottom: 0px;
}

.navbar-login-session
{
    padding: 10px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.icon-size
{
    font-size: 87px;
}

.navbar-right{
	margin-right: 0px;
}

/*  --------- */
.sub-top{
	padding: 5px 5px 0px 5px;
	height: 46px;
	background-color: #444444;
}

main .sub-top{
	padding-bottom: 0px;
}

aside .sub-top{
	border-style: solid;
	border-width: 0px 0px 0px 1px;
	border-left-color: #3a3a3a;
}

.nav-tabs{
	border-bottom: none;
}

.nav-tabs>li{
	margin-bottom: 0px;
}

.nav-tabs>li>a{
	color: #FFF;
	background-color: #444444;
	border: none;
}

.nav-tabs>li>a:hover,
.nav-tabs>li>a:focus{
	color:#F49D51;
	background-color: #444444;
	border: none;
}



.nav-tabs>li.active>a, 
.nav-tabs>li.active>a:focus, 
.nav-tabs>li.active>a:hover {
	color: #FFF;
	background-color: #666666;
	font-size: 15px;
	font-weight: bold;
	border: 0px none;
}

.desc{
	display: block;
	height: 50px;
	padding: 10px 18px;
}

main .desc{
	background-color: #666666;

}

aside .desc{
	background-color: #EEEEEE;
	border-style: solid;
	border-width: 0px 0px 0px 1px;
	border-left-color: #d5d5d5;
}

.titlecat{
	float: left;
	margin:0px;
	font-size: 17px;
	color: #fff;
	font-weight: bold;	
	padding-top: 5px;
	width: 70%
}

.desc .btn-default{
	color:#fff;
	background-color: #444444;
	border-style: none;
	float: right;


}


.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
  color: #fff;
  background-color: #333;
}

.Principalside{
	background-color: #f6f6f6;
	border-style: solid;
	border-width: 0px 0px 0px 1px;
	border-left-color: #d5d5d5;
	height: 640px;
}

.glyphicon-plus {
    font-size: 12px;
}

.table{
	width:90%;
	float:left;
}

#inputBuscar{
	width:40%;
	float:left;
	margin-left: 28%;
}

.col-lg-offset-1{
	margin-left: 5%;
}

.row{
    margin-top: 25px;
    margin-bottom: 25px;
}

.date{
	display: block;
	font-size: 30px;
	margin: 0px 20px 0px 5px;
	padding-top: 10px;
	color: #666666;
}

.fecha{
	display: block;
	font-size: 11px;
	padding-top: 16px;
	color: #666666;
	font-weight: bold;
}

.table tbody tr:hover{
	background-color: #ffeebb;
	border: 1px 0px solid #ffcc66;
}
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Trabajo Cuatrimestral OO2</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/design.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <script src="../js/search.js"></script>
    <script src="../js/date.js"></script>
    <script src="https://rawgit.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.1.0.min.js"></script>

</head>
<body>
	<header>
		<nav class="navbar navbar-default">
			<div class="top-left">
				<ul class="nav navbar-nav">
		          <li><a class="navbar-brand" href="#"><img src="../imgs/logo.jpg" width="200" height="35"></a></li>
		          <li id="restaurant">
		            <a href="../restaurant/salon.html" title="Restaurant">
		              <span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span>
		            </a>
		          </li>
		          <li id="ventas">
		          	<a href="#productos/" title="Ventas">
		          		<span class="glyphicon glyphicon-shopping-cart"></span>
		          	</a>
		          </li>
		          <li class="active" id="productos">
		          	<a href="../productos/productos.html" title="Productos">
		          		<span class="glyphicon glyphicon-apple" aria-hidden="true"></span>
		          	</a>
		          </li>
		          <li id="client">
		          	<a href="#productos/" title="Clientes">
		          		<span class="glyphicon glyphicon-user"></span>
		          	</a>
		          </li>
		          <li id="report">
		          	<a href="#productos/" title="Reportes">
		          		<span class="glyphicon glyphicon-stats"></span>
		          	</a>
		          </li>
		          <li id="config">
		          	<a href="#productos/" title="Configuración">
		          		<span class="glyphicon glyphicon-cog"></span>
		          	</a>
		          </li>

		        </ul>
	        </div>
			<div class="top-right">
				<ul class="nav navbar-nav navbar-right">
					<li>
						<div id="DiaLetras" class="fecha"></div>
					</li>
				
					<li>
						<div id="TheDate" class="date"></div>
					</li>
		          <li class="dropdown">
		            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
		                <span class="glyphicon glyphicon-user"></span> 
		                <strong>Nombre</strong>
		                <span class="glyphicon glyphicon-chevron-down"></span>
		            </a>
		            <ul class="dropdown-menu">
		              <li>
		                <div class="navbar-login">
		                  <div class="row">
		                    <div class="col-lg-4">
		                      <p class="text-center">
		                        <img src="../imgs/foto-carnet.jpg" width="100" height="100">
		                      </p>
		                    </div>
		                    <div class="col-lg-8">
		                      <p class="text-left"><strong>Nombre Apellido</strong></p>
		                      <p class="text-left small">[email protected]</p>
		                      <p class="text-left">
		                        <a href="#" class="btn btn-primary btn-block btn-sm">Actualizar Datos</a>
		                      </p>
		                    </div>
		                  </div>
		                </div>
		              </li>
		              <li class="divider"></li>
		              <li>
		                <div class="navbar-login navbar-login-session">
		                  <div class="row">
		                    <div class="col-lg-12">
		                      <p>
		                        <a href="#" class="btn btn-danger btn-block">Cerrar Sesion</a>
		                      </p>
		                    </div>
		                  </div>
		                </div>
		              </li>
		            </ul>
		          </li>
		        </ul>
			</div>
		</nav>
	</header>
	<main>
		<section class="sub-top">
		  <ul class="nav nav-tabs">
            <li class="active"><a href="productos.html">Productos</a></li>
            <li><a href="Ingredientes.html">Ingredientes</a></li>
            <li><a href="Platos.html">Platos</a></li>
            <li><a href="Menus.html">Menus</a></li>
            <li><a href="Viandas.html">Viandas</a></li>
            <li><a href="Rubro.html">Rubro</a></li>
            <li><a href="Subrubro.html">Subrubro</a></li>
          </ul>
		</section>
		<section class="desc">
			<h1 class="titlecat">
				<span>PRODUCTOS</span>
			</h1>
			<button type="button" class="btn btn-default" aria-label="Left Align">
	  			<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Nuevo Producto
			</button>

		</section>
		<section >
		 <div class="table-main">
		  <div class="row">
              <div class="col-lg-4 col-lg-offset-3" id="inputBuscar">
                  <input type="search" id="search" value class="form-control" placeholder="Buscar producto">
              </div>
          </div>
          <div class="row">
              <div class="col-lg-12 col-lg-offset-1">
                  <table class="table" id="table">
                      <thead class="thead-inverse">
                          <tr>
                              <th>Cod.</th>
                              <th>Producto</th>
                              <th>Precio</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                              <td>20</td>
                              <td>Salsa</td>
                              <td>25</td>
                          </tr>
                          <tr>
                              <td>13</td>
                              <td>PrePizza</td>
                              <td>50</td>
                          </tr>
                          <tr>
                              <td>11</td>
                              <td>Muzarella</td>
                              <td>40</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>
         </div> 
		</section>
	</main>
	<aside>
		<section class="sub-top">
		</section>
		<section class="desc">
			<h1 class="titlecat">
				<span></span>
			</h1>
		</section>
		<section class="Principalside">

		</section>
	</aside>
</body>
</html>

Quiero que el contenido la clase PrincipalSide cambie en base a un evento onclick de la tabla

5
  • Dario, buenas, para poder brindar ayuda, deberíamos tener el código que estás usando, y la descripción del error que te ha llevado a hacer la pregunta. En caso de que tu problema sea de conocimiento en cuanto a algo en particular, especifica la linea que genera la confusión y porqué. Saludos
    – KN_
    el 21 jun. 2017 a las 23:13
  • Es que en mi anterior pregunta puse todo y me dijieron que sea mas conciso mil disculpas ahi esta editado el 22 jun. 2017 a las 0:51
  • No veo rastros de angularjs, solo de jquery.
    – gugadev
    el 22 jun. 2017 a las 1:35
  • El código de angularjs en el link que compartiste está haciendo uso de algo llamado routing usando la librería ui-router lo cual es mucho más complejo de lo que quieres lograr
    – Leon Plata
    el 22 jun. 2017 a las 1:39
  • No estoy usando angularjs porque no se el lenguaje solo googlie para ver si se podía hacer lo que quería y encontré eso el 22 jun. 2017 a las 15:51

2 respuestas 2

2

Obtén el contenido que quieres agregar en una variable Javascript, luego agrégalo a la sección con el siguiente código:

var texto;
texto = "Hola Mundo";
function change(){
  document.getElementById('mydiv').innerHTML = texto;
}
    
<div id='mydiv'>TEXTO QUE VA A CAMBIAR</div>
<br/>
<input type='button' onclick='change()' value='cambiar valor'>

0

En esta respuesta brindo una solución de propósito general en cuanto a cambiar el contenido de un elemento DOM ya sea un div u otro implementando un sistema sencillo de componentes usando jQuery.

$(document).ready(function () {

  // El objeto components actua como un diccionario de componentes
  // Cada componente tiene dos propiedades:
  // - template: Es el html a ser renderizado.
  // - controller: Son las operaciones a ser realizadas sobre el
  //               html renderizado, el argumento "element" hace
  //               referencia al elemento DOM contenedor del html
  //               renderizado.
  // NOTA: se está usando la notación de "template literals" de ES2015
  // para evitar concatenar strings, así que puede que navegadores
  // extremadamente antiguos no puedan soportar este ejemplo.
  // https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals
  var components = {
    o1: {
      template:`
        <div>
          <span>Contenido de la opción 1</span>
        </div>
      `,
      controller: function (element) {
        element.find('span').css('color', 'red');
      }
    },
    o2: {
      template: `
        <div>
          <h1>Opción 2</h1>
          <span>Contenido de la opción 2</span>
        </div>
      `,
      controller: function (element) {
        element.find('h1').css('color', 'blue');
      }
    },
    o3: {
      template: `
        <div>
          <h2>Opción 3</h2>
          <pre>Contenido de la opción 2</pre>
        </div>
      `,
      controller: function (element) {
        element.find('pre').css('color', 'green');
      }
    }
  };
  
  // Renderiza el html de cada componente y ejecuta el controlador
  // de este pasando el elemento contenedor como argumento.
  function renderComponent(element, componentName) {
    var component = components[componentName];
    element.html(component.template);
    component.controller(element);
  }
  
  // Un selector que busca todos los links y les asigna un click
  // listener que hace el cambio de componente sobre el elemento
  // usando el nombre del atributo "id" como llave del diccionario
  // de componentes.
  $('li.opcion a').click(function () {
  
    var aside = $('#mi-aside');
    // this hace referencia al elemento encontrado
    // this.id hace referncia al atributo "id"
    renderComponent(aside, this.id);
  });
});
/* Los links sin el atributo href pierden el cursor,
 * aquí se está forzando a que tengan cursor.
 */
a:hover {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="opcion"><a id="o1">Opcion 1</a></li>
  <li class="opcion"><a id="o2">Opcion 2</a></li>
  <li class="opcion"><a id="o3">Opcion 3</a></li>
</ul>
<div id="mi-aside"></div>

6
  • Es mejor esperar a que el OP aclare qué es lo que está usando; porque ha etiquetado su pregunta con angularjs, aunque no veo rastro de él. Si resulta que usa angularjs la respuesta no serviría mucho ya que este contiene su propio sistema de routing.
    – gugadev
    el 22 jun. 2017 a las 1:39
  • @GustavoGarcía Gracias, no me percaté lo de las etiquetas
    – Leon Plata
    el 22 jun. 2017 a las 1:41
  • es lo que quiero que haga pero desde ese template yo puedo poner codigo jsp porque a la ahora de editar algo traeria los datos de java? y puse la etiqueta por el ejemplo que les pegue pero ahi la quito asi queda mas claro el 22 jun. 2017 a las 17:23
  • Si tu idea es que cambie el contenido de un div sin recargar la página entonces tu servidor debería ser capaz de manejar llamadas en Ajax para traer los datos requeridos hasta el cliente y usar handlebars u otra librería para renderizar templates de html con dichos datos obtenidos
    – Leon Plata
    el 22 jun. 2017 a las 18:00
  • si te explico este proyecto es para la universidad la idea seria usar ajax de la sig manera por ejem: <script type="text/javascript"> $(document).ready(function () { $('#consultar').click(function () { var dni = $('#dni').val(); $.ajax({ method: "POST", url: "MostrarClienteJSP", data: { dni: dni }, async: false }).done(function (data) { $("#responsecliente").html(data); }) }); }); </script> a diferencia del ejemplo yo tomaria el cod Producto de la fila de la tabla y invocar al controlador que traiga todos los datos de ese producto y eso pasarlo a una vista en jsp el 23 jun. 2017 a las 21:16

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.