I'm learning Vue with VUEX and I'm making and small app.
That small app call a json data and print it in a template.
I created a mutation called year(), that mutation get a world of a string and return the result but when I use that mutation inside template {{ year(item.fechaInicio) }} return a empty value.
That's my html code:
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<!-- bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<!-- fontawesome css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css">
<!-- Tipografía -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i|Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
<!-- Jquery -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- cookies jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<!-- Vuex -->
<script src="https://unpkg.com/vuex#3.6.0/dist/vuex.js"></script>
<!-- CSS estilos -->
<link href="calendario-2020.css" rel="stylesheet" />
</head>
<body>
<div class="Calendario" id="caja-vue">
<p class="calendario-titulo">Calendario Académico</p>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a aria-controls="home" aria-selected="true" class="nav-link active" data-toggle="tab" href="#home" id="home-tab" role="tab">Estudiantes</a></li>
</ul>
<!--TAB 1 ESTUDIANTES-->
<div class="tab-content" id="myTabContent">
<div aria-labelledby="home-tab" class="tab-pane fade show active" id="home" role="tabpanel">
<!--Semestres-->
<div class="flex-container">
<div class="Semestre">
<div class="custom-control form-control-lg custom-checkbox"><input class="custom-control-input" id="customCheck1" type="checkbox" /> <label class="custom-control-label" for="customCheck1">Semestre <span class="num">1</span></label></div>
<p>Enero 17-2020<br />
Mayo 15-2020
</p>
</div>
<div class="Semestre">
<div class="custom-control form-control-lg custom-checkbox"><input class="custom-control-input" id="customCheck2" type="checkbox" /> <label class="custom-control-label" for="customCheck2">Semestre <span class="num">2</span></label></div>
<p>Agosto 15-2020<br />
Diciembre 20-2020
</p>
</div>
<div class="Semestre">
<div class="custom-control form-control-lg custom-checkbox"><input class="custom-control-input" id="customCheck3" type="checkbox" /> <label class="custom-control-label" for="customCheck3">Intersemestral</label></div>
<p>Enero 17-2020<br />
Mayo 15-2020
</p>
</div>
<div class="col-lg-12 fechas">
<div class="row">
<div class="col-lg-9"> </div>
<div class="col-lg-3">
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Organizar por:</option>
<option>Fecha Inicio</option>
<option>Fecha Final</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!--Formulario de Busqueda-->
<div class="Formulario_calndario">
<div class="row">
<div class="col-lg-4">
<div class="form Formulario_busqueda">
<div class="input-group espacio">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fas fa-search">
<!--icono-->
</i>
</button>
</div>
<input class="form-control" name="search" placeholder="¿Qué estás buscando?" type="text" />
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Tipo de programa</option>
<option>Pregrado</option>
<option>Posgrado</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Categoria</option>
<option>Cierre académico</option>
<option>Comité de idiomas</option>
<option>Exámenes finales</option>
<option>Homologaciones, reconocimientos y validaciones</option>
<option>Inicio y finalización de clases</option>
<option>Otras actividades de la vida universitaria</option>
<option>Pago de matrículas</option>
<option>Proceso de inducción</option>
<option>Publicación de grupos cancelados</option>
<option>Recesos y vacaciones</option>
<option>Registro de asignaturas</option>
<option>Reporte de notas</option>
<option>Reserva de cupo, re activaciones de cupo y reintegros</option>
<option>Retiro de asignaturas</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Tipo de programa</option>
<option>Escuela de Administración</option>
<option>Escuela de Medicina y Ciencias de la Salud</option>
<option>Escuela de Ciencias Humanas</option>
<option>Facultad de Economía</option>
<option>Facultad de Jurisprudencia</option>
<option>Facultad de Estudios Internacionales, Políticos y Urbanos</option>
<option>Facultad de Ciencias Naturales</option>
<option>Facultad de Creación</option>
<option>Escuela de Ingeniería, Ciencia y Tecnologí</option>
</select>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fas fa-search">
<!--icono-->
</i>
</button>
</div>
<input class="form-control" name="search" placeholder="Programa" type="text" />
</div>
</div>
<div class="form-group">
<p><a aria-controls="multiCollapseExample1" aria-expanded="false" class="Fecha" data-toggle="collapse" href="#multiCollapseExample1" role="button">Seleccione un mes</a></p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body"><input class="form-control" id="example-date-input" type="date" value="2011-08-19" /></div>
</div>
</div>
</div>
<div class="form-group">
<p><a aria-controls="multiCollapseExample2" aria-expanded="false" class="Fecha" data-toggle="collapse" href="#multiCollapseExample2" role="button">Seleccione un mes</a></p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
<p>Fecha inicial</p>
<input class="form-control" id="example-date-input" type="date" value="2011-08-19" />
<p>Fecha final</p>
<input class="form-control" id="example-date-input" type="date" value="2011-08-19" />
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<input class="btn btn-primary" type="submit">Buscar</input>
</div>
<div class="col-md-6">
<input class="btn btn-primary Limpiar" type="submit">Limpiar</input>
</div>
</div>
</div>
</div>
</div>
<actividades></actividades>
</div>
</div>
</div>
</div>
</div>
<script src="codigo.js"></script>
</body>
</html>
That's my javascript code:
//componentes
Vue.component('actividades', {
template: /*html*/
`
<div class="col-lg-8">
<template v-for="item of actividades">
<div class="row Programa-especifico">
<div class="col-md-4 col-lg-4 Fecha">
<div class="row">
<div class="col-md-2 col-lg-2">
<i class="far fa-calendar">
<!--icono-->
</i>
</div>
<div class="col-md-10 col-lg-10 px-5"><strong class="titulo">Marzo 08</strong> <span>Abril 17 2020</span></div>
</div>
<div class="mt-3 txt">
<strong>Tipo de programa</strong> <span>{{ item.tipoPrograma }}</span><br />
<strong>Facultad</strong> <span>{{ item.facultad }}</span><br />
<strong>Programa</strong> <span>{{ item.programa }}</span><br />
<strong>Categoria</strong> <span>{{ item.categoria }}</span>
</div>
</div>
<div class="col-md-8 col-lg-8 Descripcion">
<p class="titulo">{{ item.contenido }}</p>
<!--
<p class="txt">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
-->
<!--
<i class="fas fa-map-marker-alt">
</i>
-->
<!--
<strong>Lugar:</strong> <span class="txt">Universidad del Rosario, Sede, Claustro, Aula Mutis</span><br />
<i class="far fa-calendar">
</i>
-->
<strong>Fecha de inicio:</strong> <span class="txt">
Marzo, de {{ year(item.fechaInicio) }}
</span><br />
<strong>Fecha de cierre:</strong> <span class="txt">12 Marzo, de 2020</span><br />
<!--
<i class="far fa-clock">
</i>
<strong>Hora:</strong> <span class="txt">De 8:00 a.m. a 12:30 p.m</span>
-->
<div class="row">
<div class="col-lg-3 Semestre_uno">{{ item.periodo }}</div>
<div class="col-lg-3 Cerrado">Cerrado</div>
</div>
</div>
</div>
</template>
</div>
`,
computed: {
...Vuex.mapState(['actividades','programas']),
},
methods: {
...Vuex.mapActions(['llamarJson']),
...Vuex.mapMutations(['year'])
}
});
//VueEx
const store = new Vuex.Store({
state: {
actividades: [],
programas: []
},
mutations: {
llamarJsonMutation(state, llamarJsonAction){
state.actividades = llamarJsonAction.Nueva_estructura_proveedor;
state.programas = llamarJsonAction.BD_programas;
},
year(date){
return String(date).substr(8, 2);
}
},
actions: {
llamarJson: async function({ commit }){
const data = await fetch('calendario-2021-prueba.json');
const dataJson = await data.json();
commit('llamarJsonMutation', dataJson);
}
}
});
//Vue
new Vue({
el: '#caja-vue',
store: store,
created() {
this.$store.dispatch('llamarJson');
}
});
Do not return the value in mutation. Mutations are for mutating states in vuex. Instead, add a property to state as year then in the mutaitioner just add :
state.year = String(date).substr(8, 2);
Then in your component and in computed add:
year(){
return this.store.state.year;
}
And now, you can access {{year}} in your template.
Related
I did an exact copy of the Carousel at the Bootstrap page example but it does not work at all. The slide does not work, it keeps in the first image always. Should I add some Javascript? I put the jquery cdn on top of the bootstrap cdn as I saw in many posts about a possible solution, but it still no working. Below it is the html code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cotizador de Seguros</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="Style.css">
<script defer src="variables.js"></script>
<script defer src="cotizadordeauto.js"></script>
</head>
<body>
<nav>
<div class="topnav">
<img src="imagenes/ooo.jpg" alt="sol">
<span class="navbar-brand">Seguros Sunshine</span>
</div>
</nav>
<div>
<h2>En Seguros Sunshine tenemos muchas opciones para vos</h2>
</div>
<p id="todaInfo"></p>
<div class="container" id="preguntas">
<br>
<br>
<h3>Ingresa tus datos para iniciar una cotizacion</h3>
<table class="table table-striped">
<thead>
<input type="text" id="nombre" class="no-outline" placeholder="Nombre">
<input type="number" id="edad" class="no-outline" placeholder="Edad">
<input type="email" id="email" class="no-outline" placeholder="Email">
<input type="tel" id="telefono" class="no-outline" placeholder="Telefono">
<div>
<button onclick="Guardar()" id="guardado">Guardar</button>
</div>
</thead>
<tbody id="info" class="shadow">
</tbody>
</table>
</div>
<br>
<div class="container shadow col-lg-6">
<div id="contenido" class="pb-auto" style="display: none">
<header class="p-3 bg-info text-white text-uppercase rounded">
<h1 class="text-center">Cotiza tu auto aqui</h1>
</header>
<form class="mt-10 max-width mx-auto" action="#" id="cotizar-seguro">
<div class="d-flex align-items-center mb-5">
<label class="font-weight-bold text-uppercase mr-3 w-20" for="marca">Marca:</label>
<select class="d-flex mt-2 p-3 rounded" id="marca">
<option value="" disabled selected> Seleccionar </option>
</select>
<label class="font-weight-bold text-uppercase ml-auto mr-3 w-20" for="marca">Modelo:</label>
<select class="d-flex mt-2 p-3 rounded" id="modelo">
<option value="" disabled selected> Seleccionar </option>
</select>
</div>
<div class="d-flex justify-content-around align-items-center mb-5">
<label class="font-weight-bold text-uppercase mr-3 w-20" for="year">Año:</label>
<select class="d-flex p-3 rounded" id="year">
<option value="" disabled selected> Seleccionar </option>
</select>
<label class="font-weight-bold text-uppercase ml-auto mr-3" for="color">Color:</label>
<input type="text" class="d-flex p-3 rounded" id="color" placeholder="El color es opcional">
</div>
<fieldset>
<legend class="font-weight-bold text-uppercase text-center w-full">Tipo Seguro</legend>
<div class="d-flex justify-content-around mt-5">
<div>
<label class="font-weight-bold text-uppercase mr-2">Terceros</label>
<input type="radio" name="tipo" value="terceros" checked>
</label>
</div>
<div>
<label class="font-weight-bold text-uppercase mr-2">Terceros Ampliada</label>
<input type="radio" name="tipo" value="terceros-ampliada">
</label>
</div>
<div>
<label class="font-weight-bold text-uppercase mr-2">Todo Riesgo</label>
<input type="radio" name="tipo" value="todo-riesgo">
</label>
</div>
</div>
</fieldset>
<div id="cargando" style="display: none">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<div id="resultado"></div>
<div class="d-flex justify-content-center py-4">
<button type="submit" class="mx-auto bg-info hover text-white font-weight-bold py-2 px-20 rounded">Cotizar Seguro
</button>
</div>
</form>
</div>
</div>
<!--Cierre del form y container-->
<br>
<div>
<br>
<div id="carouselSeguro" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="imagenes/grua.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="imagenes/mapa.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="imagenes/online.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Just change image file to yours!
This code works well for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cotizador de Seguros</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav>
<div class="topnav">
<img src="imagenes/ooo.jpg" alt="sol">
<span class="navbar-brand">Seguros Sunshine</span>
</div>
</nav>
<div>
<h2>En Seguros Sunshine tenemos muchas opciones para vos</h2>
</div>
<p id="todaInfo"></p>
<div class="container" id="preguntas">
<br>
<br>
<h3>Ingresa tus datos para iniciar una cotizacion</h3>
<table class="table table-striped">
<thead>
<input type="text" id="nombre" class="no-outline" placeholder="Nombre">
<input type="number" id="edad" class="no-outline" placeholder="Edad">
<input type="email" id="email" class="no-outline" placeholder="Email">
<input type="tel" id="telefono" class="no-outline" placeholder="Telefono">
<div>
<button onclick="Guardar()" id="guardado">Guardar</button>
</div>
</thead>
<tbody id="info" class="shadow">
</tbody>
</table>
</div>
<br>
<div class="container shadow col-lg-6">
<div id="contenido" class="pb-auto" style="display: none">
<header class="p-3 bg-info text-white text-uppercase rounded">
<h1 class="text-center">Cotiza tu auto aqui</h1>
</header>
<form class="mt-10 max-width mx-auto" action="#" id="cotizar-seguro">
<div class="d-flex align-items-center mb-5">
<label class="font-weight-bold text-uppercase mr-3 w-20" for="marca">Marca:</label>
<select class="d-flex mt-2 p-3 rounded" id="marca">
<option value="" disabled selected> Seleccionar </option>
</select>
<label class="font-weight-bold text-uppercase ml-auto mr-3 w-20" for="marca">Modelo:</label>
<select class="d-flex mt-2 p-3 rounded" id="modelo">
<option value="" disabled selected> Seleccionar </option>
</select>
</div>
<div class="d-flex justify-content-around align-items-center mb-5">
<label class="font-weight-bold text-uppercase mr-3 w-20" for="year">Año:</label>
<select class="d-flex p-3 rounded" id="year">
<option value="" disabled selected> Seleccionar </option>
</select>
<label class="font-weight-bold text-uppercase ml-auto mr-3" for="color">Color:</label>
<input type="text" class="d-flex p-3 rounded" id="color" placeholder="El color es opcional">
</div>
<fieldset>
<legend class="font-weight-bold text-uppercase text-center w-full">Tipo Seguro</legend>
<div class="d-flex justify-content-around mt-5">
<div>
<label class="font-weight-bold text-uppercase mr-2">Terceros</label>
<input type="radio" name="tipo" value="terceros" checked>
</label>
</div>
<div>
<label class="font-weight-bold text-uppercase mr-2">Terceros Ampliada</label>
<input type="radio" name="tipo" value="terceros-ampliada">
</label>
</div>
<div>
<label class="font-weight-bold text-uppercase mr-2">Todo Riesgo</label>
<input type="radio" name="tipo" value="todo-riesgo">
</label>
</div>
</div>
</fieldset>
<div id="cargando" style="display: none">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<div id="resultado"></div>
<div class="d-flex justify-content-center py-4">
<button type="submit"
class="mx-auto bg-info hover text-white font-weight-bold py-2 px-20 rounded">Cotizar Seguro
</button>
</div>
</form>
</div>
</div>
<!--Cierre del form y container-->
<br>
<div class="container">
<div id="carouselSeguro" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="pikachu.jpg" alt="First slide" style="width: 50%; height: 50%">
</div>
<div class="item">
<img src="pikachu.jpg" alt="Second slide" style="width: 50% ; height: 50%">
</div>
<div class="item">
<img src="pikachu.jpg" alt="Third slide" style="width: 50%; height: 50%">
</div>
</div>
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>```
Try copying 'CSS' link from bootstrap getting started page and copy in head tag and while JS scripts should be after body tag. follow this link to have more understanding.
Add css files to the tag like
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
and always put js files at the bottom of your html code after tag
.
.
.
</body>
<script defer src="variables.js"></script>
<script defer src="cotizadordeauto.js"></script>
</html>
Copy and paste the following:
Before the body closing tag (/body).
This question already has answers here:
Have addEventListener on multiple of the same IDs
(2 answers)
Closed 2 years ago.
I have two radio buttons and I want to attach some functionality to them. But no matter how hard I try I can't attach anything to each of them. I tried to add a simple console log and it seems that the issue is the on click events do not work at all. the code is at the very end of the HTML code. What I'm missing and how to fix this...???
Here is the code: The Javascript is placed in a script tag at the end of the HTML code:
Note: I can log the radio buttons. as you see...
<!DOCTYPE html>
<!-- saved from url=(0043)http://thetheme.io/thesaas/demo/saas-2.html -->
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<!-- Styles -->
<link href="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/page.min.css" rel="stylesheet">
<link href="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/style.css" rel="stylesheet">
</head>
<body>
<!-- Main Content -->
<main>
<section id="section-pricing" class="section bg-gray">
<div class="container pricing-plans-regular">
<header class="section-header">
<h2>Affordable Pricing</h2>
<hr>
<p class="lead">TheSaaS for Teams is a single workspace for your small- to medium-sized company or team.</p>
</header>
<div class="text-center my-7">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-round btn-outline-dark w-150 active focus">
<input id="pricing-toggle--regular" type="radio" name="pricing" value="monthly" autocomplete="off" checked=""> Monthly
</label>
<label class="btn btn-round btn-outline-dark w-150">
<input id="pricing-toggle--professional" type="radio" name="pricing" value="yearly" autocomplete="off"> Yearly
</label>
</div>
</div>
<div class="row gap-y text-center">
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Free</p>
<br>
<h2 class="price">free</h2>
<p class="small text-lighter">Forever!</p>
<div class="text-muted">
<small>Searchable messages up to 10K</small><br>
<small>10 apps or service integrations</small><br>
<small>5GB total file storage for the team</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Free</p>
<br>
<h2 class="price">free</h2>
<p class="small text-lighter">Forever!</p>
<div class="text-muted">
<small>Searchable messages up to 10K</small><br>
<small>10 apps or service integrations</small><br>
<small>5GB total file storage for the team</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Standard</p>
<br>
<h2 class="price text-success">
<span class="price-unit">$</span>
<span data-bind-radio="pricing" data-monthly="6.67" data-yearly="75">6.67</span>
</h2>
<p class="small text-lighter">
Per user/
<span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
</p>
<div class="text-muted">
<small>Unlimited searchable message archives</small><br>
<small>Unlimited apps and service integrations</small><br>
<small>10GB file storage per team member</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-success" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Plus</p>
<br>
<h2 class="price">
<span class="price-unit">$</span>
<span data-bind-radio="pricing" data-monthly="12.5" data-yearly="120">12.5</span>
</h2>
<p class="small text-lighter">
Per user/
<span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
</p>
<div class="text-muted">
<small>Everything in Free & Standard, and</small><br>
<small>SAML-based single sign-on (SSO)</small><br>
<small>Compliance Exports of all messages</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
</p>
</div>
</div>
</div>
</div>
<!-- Second one -->
<div class="container pricing-plans-individual">
<header class="section-header">
<h2>Affordable Pricing</h2>
<hr>
<p class="lead">TheSaaS for Teams is a single workspace for your small- to medium-sized company or team.</p>
</header>
<div class="text-center my-7">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-round btn-outline-dark w-150 active focus">
<input id="pricing-toggle--regular" class="switch-input" type="radio" name="plan" checked=""> Monthly
</label>
<label class="btn btn-round btn-outline-dark w-150">
<input id="pricing-toggle--professional" class="switch-input" type="radio" name="plan"> Yearly
</label>
</div>
</div>
<div class="row gap-y text-center">
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Free</p>
<br>
<h2 class="price">free</h2>
<p class="small text-lighter">Forever!</p>
<div class="text-muted">
<small>Searchable messages up to 10K</small><br>
<small>10 apps or service integrations</small><br>
<small>5GB total file storage for the team</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Standard</p>
<br>
<h2 class="price text-success">
<span class="price-unit">$</span>
<span data-bind-radio="pricing" data-monthly="6.67" data-yearly="75">6.67</span>
</h2>
<p class="small text-lighter">
Per user/
<span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
</p>
<div class="text-muted">
<small>Unlimited searchable message archives</small><br>
<small>Unlimited apps and service integrations</small><br>
<small>10GB file storage per team member</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-success" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Scripts -->
<script src="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/page.min.js.download"></script>
<!-- <script src="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/script.js.download"></script>
-->
<script type="text/javascript">
document.querySelector(".pricing-plans-regular").setAttribute('style', 'display:none !important');
const toggleRegular = document.querySelector("#pricing-toggle--regular");
const toggleProfessional = document.querySelector("#pricing-toggle--professional");
console.log(toggleRegular, toggleProfessional);
toggleRegular.onclick = function() {
console.log('toggleRegular')
};
toggleProfessional.onclick = function() {
console.log('toggleProfessional')
};
</script>
</body>
</html>
You're using multiple ID instead of Class. IDs are meant to be unique.
Use class . selector
Use Element.querySelectorAll()
const toggleProfessional = document.querySelectorAll(".pricing-toggle--professional");
const togProf = (ev) => {
console.log(`${ev.target.name} says: ${ev.target.value}`);
};
toggleProfessional.forEach(el => el.addEventListener("change", togProf));
<label><input type="radio" class="pricing-toggle--professional" name="aaa" value="1"> aaa 1</label>
<label><input type="radio" class="pricing-toggle--professional" name="aaa" value="2"> aaa 2</label>
<hr>
<label><input type="radio" class="pricing-toggle--professional" name="bbb" value="1"> bbb 1</label>
<label><input type="radio" class="pricing-toggle--professional" name="bbb" value="2"> bbb 2</label>
I'm still new in coding. I hope I can get a kind response from you.
Please bear with me :) thanks
Anws,
I tried to display the value of these radio buttons but still it won't display.
May I know on how can I get the value of .custom-control-input when I choose a radio button using javascript?
May I know where I did it wrong?
PS: I didn't add the css here yet, what just I need is to display the value of these radio buttons.
function otcContinue_onClick() {
var tac = document.getElementsByClassName('custom-control-input');
if (tac.checked) {
if ($("input[name=exampleRadios]:checked").val()) {
document.getElementById($("input[name=exampleRadios]:checked").val()).style.display = "block";
document.getElementById('pmethods').style.display = "none";
} else {
$('#errorMsg').text("Please select preferred payment option.");
$('#modalError').modal('show');
}
}
}
<div id="pmethods">
<!-- otc tab -->
<div class="card">
<div class="card-header bg-blueberry" id="headingOne">
<h6 class="mb-0">
<a class="collapsed text-apple-core-light" role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Over-the-Counter Payments
</a>
</h6>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<span class="small">Pay in cash at the nearest payment nearest center.</span>
<div class="row">
<div class="col-md-6 col-xs-12 mt-2">
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios1" value="otc_sm" />
<label class="custom-control-label text-md-left" for="exampleRadios1">
<span class="pm-icon-holder">
<img src="images/otc-icons/sm.png" alt="SM" />
</span>
<span class="text-prussian-blue font-weight-bold small">SM Bills Pay</span>
</label>
<br />
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-4 offset-md-8">
<button type="button" class="btn btn-apricot btn-block" onclick="otcContinue_onClick()">Continue</button>
</div>
</div>
</div>
</div>
</div>
<!-- end otc tab -->
</div>
<div class="mt-3">
<!-- sm form -->
<div id="otc_sm" class="card border-secondary mb-3 bg-payment" style="display: none">
<div class="card-body text-prussian-blue">
<div class="selected-logo mb-2">
<img src="images/logos/logo_sm.png" alt="Payment Logo" />
</div>
<span class="card-text small">Pay in cash at the following stores. See complete list here.</span>
<br />
<br />
<span class="card-text small">Please write down the SM Bills Payment Reference Number that will be generated once transaction has been initiated. An email will be sent to you with the transaction details.</span>
<br />
<div class="row mt-4">
<div class="col-md-4 offset-md-8 mb-1">
<button type="submit" class="btn btn-apricot btn-block">Continue</button>
</div>
<div class="col-md-4 offset-md-8 mb-1 text-center">
<u>Go Back</u>
</div>
</div>
</div>
</div>
<!-- end sm form -->
<br />
</div>
I have change your JS so when you click on an input you get the returned value it has. In this case - otc_sm.
$("input[name=exampleRadios]").on('click', function() {
console.log($(this).val());
document.getElementById($("input[name=exampleRadios]:checked").val()).style.display = "block";
document.getElementById('pmethods').style.display = "none";
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pmethods">
<!-- otc tab -->
<div class="card">
<div class="card-header bg-blueberry" id="headingOne">
<h6 class="mb-0">
<a class="collapsed text-apple-core-light" role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Over-the-Counter Payments
</a>
</h6>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<span class="small">Pay in cash at the nearest payment nearest center.</span>
<div class="row">
<div class="col-md-6 col-xs-12 mt-2">
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios1" value="otc_sm" />
<label class="custom-control-label text-md-left" for="exampleRadios1">
<span class="pm-icon-holder">
<img src="images/otc-icons/sm.png" alt="SM" />
</span>
<span class="text-prussian-blue font-weight-bold small">SM Bills Pay</span>
</label>
<br />
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-4 offset-md-8">
<button type="button" class="btn btn-apricot btn-block" onclick="otcContinue_onClick()">Continue</button>
</div>
</div>
</div>
</div>
</div>
<!-- end otc tab -->
</div>
<div class="mt-3">
<!-- sm form -->
<div id="otc_sm" class="card border-secondary mb-3 bg-payment" style="display: none">
<div class="card-body text-prussian-blue">
<div class="selected-logo mb-2">
<img src="images/logos/logo_sm.png" alt="Payment Logo" />
</div>
<span class="card-text small">Pay in cash at the following stores. See complete list here.</span>
<br />
<br />
<span class="card-text small">Please write down the SM Bills Payment Reference Number that will be generated once transaction has been initiated. An email will be sent to you with the transaction details.</span>
<br />
<div class="row mt-4">
<div class="col-md-4 offset-md-8 mb-1">
<button type="submit" class="btn btn-apricot btn-block">Continue</button>
</div>
<div class="col-md-4 offset-md-8 mb-1 text-center">
<u>Go Back</u>
</div>
</div>
</div>
</div>
<!-- end sm form -->
<br />
</div>
a user is created in the admin panel, and it shows total stores, total products and so on.
Image1
When i create a new user for login, nothings shows on dashboard panel. no total store, no total products and so on...
Image2
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Small boxes (Stat box) -->
<?php if($is_admin == true): ?>
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-aqua">
<div class="inner">
<h3><?php echo $total_products ?></h3>
<p>Total Products</p>
</div>
<div class="icon">
<i class="ion ion-bag"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3><?php echo $total_paid_orders ?></h3>
<p>Total Paid Orders</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<h3><?php echo $total_users; ?></h3>
<p>Total Users</p>
</div>
<div class="icon">
<i class="ion ion-android-people"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3><?php echo $total_stores ?></h3>
<p>Total Stores</p>
</div>
<div class="icon">
<i class="ion ion-android-home"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
<?php endif; ?>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<script type="text/javascript">
$(document).ready(function() {
$("#dashboardMainMenu").addClass('active');
});
</script>
This is the code of the dashboard cpanel...
THIS CODE IS FOR CREATING NEW USER
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Manage
<small>Users</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Users</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-md-12 col-xs-12">
<?php if($this->session->flashdata('success')): ?>
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<?php echo $this->session->flashdata('success'); ?>
</div>
<?php elseif($this->session->flashdata('error')): ?>
<div class="alert alert-error alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<?php echo $this->session->flashdata('error'); ?>
</div>
<?php endif; ?>
<div class="box">
<div class="box-header">
<h3 class="box-title">Add User</h3>
</div>
<form role="form" action="<?php base_url('users/create') ?>" method="post">
<div class="box-body">
<?php echo validation_errors(); ?>
<div class="form-group">
<label for="groups">Groups</label>
<select class="form-control" id="groups" name="groups">
<option value="">Select Groups</option>
<?php foreach ($group_data as $k => $v): ?>
<option value="<?php echo $v['id'] ?>"><?php echo $v['group_name'] ?></option>
<?php endforeach ?>
</select>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Username" autocomplete="off">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" id="password" name="password" placeholder="Password" autocomplete="off">
</div>
<div class="form-group">
<label for="cpassword">Confirm password</label>
<input type="password" class="form-control" id="cpassword" name="cpassword" placeholder="Confirm Password" autocomplete="off">
</div>
<div class="form-group">
<label for="fname">First name</label>
<input type="text" class="form-control" id="fname" name="fname" placeholder="First name" autocomplete="off">
</div>
<div class="form-group">
<label for="lname">Last name</label>
<input type="text" class="form-control" id="lname" name="lname" placeholder="Last name" autocomplete="off">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Phone" autocomplete="off">
</div>
<div class="form-group">
<label for="gender">Gender</label>
<div class="radio">
<label>
<input type="radio" name="gender" id="male" value="1">
Male
</label>
<label>
<input type="radio" name="gender" id="female" value="2">
Female
</label>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="submit" class="btn btn-primary">Save Changes</button>
Back
</div>
</form>
</div>
<!-- /.box -->
</div>
<!-- col-md-12 -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<script type="text/javascript">
$(document).ready(function() {
$("#groups").select2();
$("#mainUserNav").addClass('active');
$("#createUserNav").addClass('active');
});
</script>
Can someone help me and tell me what is the problem?
The solution is to remove the check for <?php if($is_admin == true): ?> and this would display the content you want to see.
To continue from what you said in the comment:
#RotimiBest the code is not mine, and im not to good with php thats why i asked for help... I dont know why is there is_admin
I asked you that question, to understand why it was there. I guess the author of the code was trying to prevent those that are not administrators from viewing the total stores, total products and so on. And if you don't need that then you should remove that check.
Note: There might be cases where you would need to hide certain parts of your application from non-administrators in this case that if statement would be good. To implement this in your database you should have a field called is_admin and you should make it a Boolean meaning true or false which you can set manually and then when a user logs in, you should check for that field when you return the whole fields of that particular user from the user table.
The explanation might not make sense if you don't get grounded in php and mysql, I suggest you take this tutorial. It really covers the basics to a comfortable understanding of the language.
I hope this helps )
#rotimi_best
I’ve a strange problem… When I start to compile the form the navbar slowly begins a fading until it disappears altogether. The same behavoiur if I use the tab on the keyboard to move from one input to another. I don’t understand the reason… It appens with the form.. I had the same problem with another form..
I thought that could be a div didn't close. I checked the code but it seems correct... but I don't know another possible cause
this is my html page
<div data-name="users-add" class="page">
<div class="page-content pg-no-padding">
<div class="row justify-content-center">
<div class="col-100 tablet-auto desktop-80">
<div class="block">
<form class="list" id="form-add-user">
<div class="row justify-content-center">
<div class="col-100 tablet-auto desktop-80">
<div class="row justify-content-center">
<h2> Add User</h2>
</div>
<div class="card">
<div class="card-content card-content-padding">
<div class="row justify-content-center margin padding">Compile...</div>
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap">
<div class="item-title item-label">Nome</div>
<input type="text" placeholder="" name="first_name">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Surname</div>
<div class="item-input-wrap">
<input type="text" placeholder="" name="last_name">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Email</div>
<div class="item-input-wrap">
<input type="email" placeholder="" name="email">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" placeholder="" name="password">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Confirm password</div>
<div class="item-input-wrap">
<input type="password" placeholder="" name="password_confirm">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Phone</div>
<div class="item-input-wrap">
<input type="tel" placeholder="" name="phone">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Name Company</div>
<div class="item-input-wrap">
<input type="text" placeholder="" name="company">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<!--list-->
</div>
<!--col-->
</div>
<!--row-->
<div class="row justify-content-center margin padding">Role</div>
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li>
<label class="item-radio item-content">
<input type="radio" name="id_user" value="1" checked />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title"> Superadmin </div>
</div>
</label>
</li>
<li>
<label class="item-radio item-content">
<input type="radio" name="id_user" value="2" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title"> Profile A </div>
</div>
</label>
</li>
<li>
<label class="item-radio item-content">
<input type="radio" name="id_user" value="3" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title"> Profile B </div>
</div>
</label>
</li>
</ul>
</div>
<!--list-->
</div>
<!--col-->
</div>
<!--row-->
<div class="block margin padding">
<div class="row">
<div class="col">
<a class="button button-fill" onclick="addUser()">Save</a>
</div>
</div>
<!-- ./ block - save button -->
</div>
<!-- ./ block -->
</div>
<!--card-content-->
</div>
<!--.card-->
</div>
<!--.col-->
</div>
<!--.row-->
</form>
</div>
<!-- ./ block -->
</div>
<!--.col-->
</div>
<!-- .row-->
</div>
<!-- ./ page-content -->