Using Jquery tabs isn't working properly

Using Jquery tabs isn't working properly - javascript

I have 3 different graphs I want to put in tabs and open when selected upon. I used a boostrap elements to make 3 of the graphs. I followed along the Jquery site and used that example and it isn't working how it should. For Example, when I click Tab 1 I want Graph one to appear. I've posted the code below.
$(document).ready(function(){
$( '#tabs' ).tabs();
});
.col-md-1{ padding: 10px;
border:1px solid white;
}
#size { padding: 10px;
border:1px solid white;
}
#page{padding-bottom: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CS2100 Project 3</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="project3.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
<div id="tabs">
<ul>
<li>PART 1</li>
<li>PART 2</li>
<li>PART 3</li>
</ul>
<div class="container" id="part1">
<h3>PART 1: 7-Day Forecast (HTML)</h3>
<table class="table table-hover table-bordered text-center">
<tbody>
<tr class="bg-primary text-primary">
<th class="text-center">Forecast</th>
<th class="text-center">Thursday</th>
<th class="text-center">Friday</th>
<th class="text-center">Saturday</th>
<th class="text-center">Sunday</th>
<th class="text-center">Monday</th>
<th class="text-center">Tuesday</th>
<th class="text-center">Wednesday</th>
</tr>
<tr>
<td>High</td>
<td>88</td>
<td>81</td>
<td>75</td>
<td>83</td>
<td>87</td>
<td>90</td>
<td>91</td>
</tr>
<tr>
<td>Low</td>
<td>61</td>
<td>59</td>
<td>52</td>
<td>57</td>
<td>59</td>
<td>63</td>
<td>65</td>
</tr>
<tr>
<td>Precip</td>
<td>0%</td>
<td>50%</td>
<td>40%</td>
<td>10%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
</tr>
</tbody>
</table>
</div>
<div id="part2">
<div class="container" id="page">
<h3>PART 2: 7-Day Forecast (Bootstrap Grid)</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-center">Forecast</div>
<div class="col-md-1 text-center">Thursday</div>
<div class="col-md-1 text-center">Friday</div>
<div class="col-md-1 text-center">Saturday</div>
<div class="col-md-1 text-center">Sunday</div>
<div class="col-md-1 text-center">Monday</div>
<div class="col-md-1 text-center">Tuesday</div>
<div class="col-md-1 text-center">Wednesday</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">0</div>
<div class="col-md-1 text-center">88</div>
<div class="col-md-1 text-center">81</div>
<div class="col-md-1 text-center">75</div>
<div class="col-md-1 text-center">83</div>
<div class="col-md-1 text-center">87</div>
<div class="col-md-1 text-center">90</div>
<div class="col-md-1 text-center">91</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Low</div>
<div class="col-md-1 text-center">61</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">52</div>
<div class="col-md-1 text-center">57</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">63</div>
<div class="col-md-1 text-center">65</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Precip</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">50%</div>
<div class="col-md-1 text-center">40%</div>
<div class="col-md-1 text-center">10%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
</div>
</div>
<div id="part3">
<div class="container" id="page">
<h3>PART 3: TCP PACKET STRUCTURE</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-right" id="size">Byte#</div>
<div class="col-md-3 text-center" id="size">+0</div>
<div class="col-md-3 text-center" id="size">+1</div>
<div class="col-md-3 text-center" id="size">+2</div>
<div class="col-md-2 text-center" id="size">+3</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">0</div>
<div class="col-md-5 text-center" id="size">Source Port</div>
<div class="col-md-6 text-center" id="size">Destination Port</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">4</div>
<div class="col-md-11 text-center" id="size">Sequence Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-11 text-center" id="size">ACK Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-1 text-center" id="size">Offset</div>
<div class="col-md-1 text-center" id="size">Reserved</div>
<div class="col-md-5 text-center" id="size">Flags</div>
<div class="col-md-4 text-center" id="size">Window Size</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">16</div>
<div class="col-md-5 text-center" id="size">Checksum</div>
<div class="col-md-6 text-center" id="size">Urgent Pointer</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">20-56</div>
<div class="col-md-11 text-center" id="size">Options</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

I believe the issue is with the additionally declared jQuery library at the bottom of the page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"</script>
As well, you have not included the jQuery UI library:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
$(document).ready(function(){
$( '#tabs' ).tabs();
});
.col-md-1{ padding: 10px;
border:1px solid white;
}
#size { padding: 10px;
border:1px solid white;
}
#page{padding-bottom: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CS2100 Project 3</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="project3.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
<div id="tabs">
<ul>
<li>PART 1</li>
<li>PART 2</li>
<li>PART 3</li>
</ul>
<div class="container" id="part1">
<h3>PART 1: 7-Day Forecast (HTML)</h3>
<table class="table table-hover table-bordered text-center">
<tbody>
<tr class="bg-primary text-primary">
<th class="text-center">Forecast</th>
<th class="text-center">Thursday</th>
<th class="text-center">Friday</th>
<th class="text-center">Saturday</th>
<th class="text-center">Sunday</th>
<th class="text-center">Monday</th>
<th class="text-center">Tuesday</th>
<th class="text-center">Wednesday</th>
</tr>
<tr>
<td>High</td>
<td>88</td>
<td>81</td>
<td>75</td>
<td>83</td>
<td>87</td>
<td>90</td>
<td>91</td>
</tr>
<tr>
<td>Low</td>
<td>61</td>
<td>59</td>
<td>52</td>
<td>57</td>
<td>59</td>
<td>63</td>
<td>65</td>
</tr>
<tr>
<td>Precip</td>
<td>0%</td>
<td>50%</td>
<td>40%</td>
<td>10%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
</tr>
</tbody>
</table>
</div>
<div id="part2">
<div class="container" id="page">
<h3>PART 2: 7-Day Forecast (Bootstrap Grid)</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-center">Forecast</div>
<div class="col-md-1 text-center">Thursday</div>
<div class="col-md-1 text-center">Friday</div>
<div class="col-md-1 text-center">Saturday</div>
<div class="col-md-1 text-center">Sunday</div>
<div class="col-md-1 text-center">Monday</div>
<div class="col-md-1 text-center">Tuesday</div>
<div class="col-md-1 text-center">Wednesday</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">0</div>
<div class="col-md-1 text-center">88</div>
<div class="col-md-1 text-center">81</div>
<div class="col-md-1 text-center">75</div>
<div class="col-md-1 text-center">83</div>
<div class="col-md-1 text-center">87</div>
<div class="col-md-1 text-center">90</div>
<div class="col-md-1 text-center">91</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Low</div>
<div class="col-md-1 text-center">61</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">52</div>
<div class="col-md-1 text-center">57</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">63</div>
<div class="col-md-1 text-center">65</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Precip</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">50%</div>
<div class="col-md-1 text-center">40%</div>
<div class="col-md-1 text-center">10%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
</div>
</div>
<div id="part3">
<div class="container" id="page">
<h3>PART 3: TCP PACKET STRUCTURE</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-right" id="size">Byte#</div>
<div class="col-md-3 text-center" id="size">+0</div>
<div class="col-md-3 text-center" id="size">+1</div>
<div class="col-md-3 text-center" id="size">+2</div>
<div class="col-md-2 text-center" id="size">+3</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">0</div>
<div class="col-md-5 text-center" id="size">Source Port</div>
<div class="col-md-6 text-center" id="size">Destination Port</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">4</div>
<div class="col-md-11 text-center" id="size">Sequence Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-11 text-center" id="size">ACK Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-1 text-center" id="size">Offset</div>
<div class="col-md-1 text-center" id="size">Reserved</div>
<div class="col-md-5 text-center" id="size">Flags</div>
<div class="col-md-4 text-center" id="size">Window Size</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">16</div>
<div class="col-md-5 text-center" id="size">Checksum</div>
<div class="col-md-6 text-center" id="size">Urgent Pointer</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">20-56</div>
<div class="col-md-11 text-center" id="size">Options</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Related

how to connect a navigation bar (<nav>) with HTML files in google appscript?

I am developing a code where I have different option levels and I want one of those options to display a nav bar with two tabs: one to search customers and the other to add customers, I already have the loadView, loadCustomersView and loadAddCustomerView function in my clients.html doc, but it does not display the content when I click on the tabs.
How can I make the navigation bar with the search and add clients options show me what is in search.html and addcustomer.html? (see image 3)
step 1, click in opcion1
step 2, click in opcion 1.1
step3, have a nav bar with 2 options: search and add customers
here is a copy of all my files.
codigo.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function getOpcion1() {
var html = HtmlService.createHtmlOutputFromFile('opcion1').getContent();
return html
}
function getObtenerClientes() {
var html = HtmlService.createHtmlOutputFromFile('clientes').getContent();
return html
}
function loadPartialHTML_(partial) {
const htmlServ = HtmlService.createTemplateFromFile(partial);
return htmlServ.evaluate().getContent();
}
function loadSearchView() {
return loadPartialHTML_("search");
}
function loadAddCustomersView() {
return loadPartialHTML_("addcustomer");
}
Index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Gestor Virtual de Talento 1.0</title>
<style>
.nav-link {
cursor:pointer;
}
#loading {
position:fixed;
top:0;
left:0;
x-index:10000;
width:100vw;
height:100vh;
background-color: rgba(255,255,255,0.9);
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-primary static-top mb-5" style="background-color: #072146;">
<div class="container-fluid" style="height:67.33px; background-color: #072146">
<div class="d-flex justify-content-end">
<a class="badge badge-info" href="javascript:ventanaSecundaria('https://docs.google.com')" style="text-align: center;">Guía de usuario</a>
</div>
</div>
</nav>
<div class="container">
<h3>Bienvenidos </h3>
<h6>Selecciona una opción</h6>
<P></P>
</div>
<div class="card-group">
<div class="card">
<div style="text-align: center;" >
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=1eBB_kiCc6FDkbDZwkKueZho-yDFeBOHU" alt="Card image cap" alt="" >
<div class="card-body">
<input type="button" value="Opcion 1" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getOpcion1()" />
<P></P>
<p class="card-text">Conoce opcion 1</p>
</div>
</div>
</div>
<div class="card">
<div style="text-align: center;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=1osgZRT_0ahKHXGyNbasbx_xaBr2_2orx" alt="Card image cap">
<div class="card-body">
<input type="button" value="Opcion 2" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getOpcion2()" />
<P></P>
<p class="card-text">Conoce opcion 2</p>
</div>
</div>
</div>
<div class="card">
<div style="text-align: center;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=1Hmxvyc9gM9KEpdQUalaNCvsPFJV8VYfJ" alt="Card image cap" >
<div class="card-body">
<input type="button" value="Opcion 3" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getPagina3()" />
<P></P>
<p class="card-text">conoce pagina 3</p>
</div>
</div>
</div>
</div>
<p></p>
<p></p>
<div id="resultado" class="container">
</div>
<P></P>
<script>
function ventanaSecundaria (URL){
window.open(URL,"ventana1","width=1400,height=700,scrollbars=NO")
}
function actualizarDiv(html, button) {
var div = document.getElementById('resultado');
div.innerHTML = html;
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
opcion1.html
<P></P>
<br>
<div class="container">
<div class="d-flex justify-content-center">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100" style="width: 18rem;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=19CbMDqXEmgtPemrwiAlsaRyZmdMPrZqA" width="286px" height="180px">
<div class="card-body">
<h5 class="card-title">Opcion 1.1</h5>
<p class="card-text">conoce opcion 1.1</p>
<input type="button" value="Accede aquí" class="btn btn-info"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getObtenerClientes()" />
</div>
</div>
</div>
<div class="col">
<div class="card h-100" style="width: 18rem;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=14_9fglXHnJhb4U4Xyy6XApBJ8KEerDd_" width="286px" height="180px">
<div class="card-body">
<h5 class="card-title">Opcion 1.2</h5>
<p class="card-text">conoce opcion 1.2</p>
<a class="btn btn-info" href="javascript:ventanaSecundaria('https://google.com/')" style="text-align: center;">Accede aquí</a>
</div>
</div>
</div>
</div>
</div>
</div>
clientes.html
<P></P>
<div class="d-flex justify-content-center">
<div class="card mb-5" style="width: 18rem;">
<img src="http://drive.google.com/uc?export=view&id=13n5Nl3nZzL8GRJkG8EeNSPJi-vobrjw_" width="286px" height="180px" class="mx-auto">
<h5 class="text-center">Validación Clientes</h5>
</div>
</div>
<div class="container">
<h6>Selecciona clientes y valídalos.</h6>
<P></P>
</div>
<div class="container">
<nav id="navigation" class="mb-3">
<ul class="nav nav-tabs main-nav">
<li class="nav-item">
<div class="nav-link active" id="search-link">Encontrar cliente</div>
</li>
<li class="nav-item">
<div class="nav-link" id="add-customer-link">Aniadir cliente</div>
</li>
</ul>
</nav>
</div>
<div id="app"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
function loadView(options){
var id = typeof options.id === "undefined" ? "app" : options.id;
var cb = typeof options.callback === "undefined" ? function(){} : options.callback;
google.script.run.withSuccessHandler(function(html){
document.getElementById(id).innerHTML = html;
typeof options.params === "undefined" ? cb() : cb(options.params);
})[options.func]();
}
function loadSearchView(){
loadView({func:"loadSearchView"});
}
function loadAddCustomerView(){
loadView({func:"loadAddCustomersView"});
}
document.getElementById("search-link").addEventListener("click",loadSearchView);
document.getElementById("add-customer-link").addEventListener("click",loadAddCustomerView);
</script>
search.html
<h4>Search</h4>
<div class="mb-3">
<input type="text" class="form-control" id="searchInput" placeholder="search...">
</div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col" class="text-right">#</th>
<th scope="col">ID</th>
<th scope="col">Nombre</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
</table>
addcustomer.html
<h4>Add a Customer</h4>
<div class="add-customer-form">
<div class="mb-3">
<label for="first-name" class="form-label">Nombre</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="mb-3">
<label for="last-name" class="form-label">Apellido</label>
<input type="text" class="form-control" id="last-name">
</div>
<button class="btn btn-primary" id="add-customer-button">Add Customer</button>
</div>
<div class="alert alert-success invisible mt-3" id="save-success-message" role="alert">
New customer Added!
</div>

How to initialize divs in DataTables?

I have installed a DataTable in my application and it returns back an error saying "DataTables warning: Non-table node initialisation (DIV). For more information about this error, please see http://datatables.net/tn/2".
Now I understand that DataTables structure is meant to be working with < tr >< td >, but I would like to use spans and divs inside as shown in the preview below.
Is there any way how data tables can work on this structure? Or if there's any good alternative which can do the same job?
Thanks.
$('#dt').DataTable();
// COLLAPSE TABLE
$('tr[data-toggle="collapse"]').click(function(){
$('.insert-here').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<div class="table-responsive">
<!-- Table -->
<table class="table" id="dt">
<!-- Table Headings -->
<thead class="table-header">
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
<th scope="col">Last Login</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<!-- Table Row 1 -->
<tr class="table-chevron" data-toggle="collapse" data-target="#AccountDetails">
<td><i class="fas fa-angle-right"></i></td>
<td>[0708]</td>
<td>Mark Jonas</td>
<td>Guest</td>
<td class="success">Active</td>
<td>22/11/2018</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
<tr>
<td class="insert-here coll-bg" colspan="8">
<!-- START OF COMPLETE ACCOUNT SETTINGS -->
<div class="collapse" id="AccountDetails">
<div class="col-12 pl-0 mt-3">
<!-- START OF ACCOUNT SETTINGS -->
<div class="col-4 pl-0 account-details-box float-left">
<h2 class="accounts-heading">Account Settings</h2>
<!-- Account Status -->
<div class="row">
<div class="col-md-6 mb-3 float-left">
<p>Account Status</p>
</div>
<div class="col-md-6 mb-3 pl-0 float-left ac-set">
<select class="form-control custom-select col-md-11">
<option>Active</option>
<option>Disabled</option>
<option>Deleted</option>
<option>Pending</option>
</select>
</div>
</div>
<!-- Account Manager -->
<div class="row">
<div class="col-md-6 mb-3 float-left">
<p>Account Manager</p>
</div>
<div class="col-md-6 mb-5 pl-0 float-left ac-set">
<select class="form-control custom-select col-md-11">
<option selected="selected">--</option>
<option>Bilal Khan</option>
<option>Rishabh Saxena</option>
<option>Abhishekh Joshi</option>
</select>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

Search in your code maybe you have initialized dataTable twice in your code.
You shold have like this code:
$('#example').dataTable( {paging: false} );
Only one Time.

.bootstrapMaterialDatePicker is not a function on Codeigniter 3

I'm having the following problem in my form has two dates of type varchar
<div class="row clearfix">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 form-control-label">
<label for="areareal_cadastro">Cadastrado em</label>
</div>
<div class="col-lg-8 col-md-10 col-sm-8 col-xs-7">
<div class="form-group">
<div class="form-line">
<input type="text" id="areareal_cadastro" name="areareal_cadastro" value="<?= $construct_areareal['areareal_cadastro']; ?>" class="form-control">
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 form-control-label">
<label for="areareal_atualizar">Atualizado em</label>
</div>
<div class="col-lg-8 col-md-10 col-sm-8 col-xs-7">
<div class="form-group">
<div class="form-line">
<input type="text" id="areareal_atualizar" name="areareal_atualizar" value="<?= $construct_areareal['areareal_atualizar']; ?>" class="form-control">
</div>
</div>
</div>
</div>
But in the console I get the following error, being that I'm not declaring this variable anywhere.

try this js use library too.
$('#input_id').bootstrapMaterialDatePicker({ weekStart : 0, time: false });

You Have to add Below CSS and Javascript
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="js/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-1.11.2.min.js"></script></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>

Angular Routing 1.6 assistance

When building this site I took a pure JS approach for the interaction. But now I am trying implement Angular as well, particularly for the routing.
However I am a novice with angular and am struggling with the routing. What I would like to happen is have the new section html load into the <div ng-view=""> upon click of new page in nav.
This is the error in the console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module stretchFlexViewer due to:
Error: [$injector:nomod] Module 'stretchFlexViewer' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Here is my plunkr.
http://plnkr.co/edit/F6rRQcQtA8lNgLCKmoEj?p=preview
app.js
(function() {
angular.module("app", ["ngRoute", "app.homeCtrl","app.stretchProdCtrl"])
.config(function($routeProvider) {
$routeProvider
.when("/home", {
controller: "homeCtrl",
templateUrl: "home.html"
})
.when("/stretchProd", {
controller: "stretchProdCtrl",
templateUrl: "stretchProd.html"
})
.when("/science", {
templateUrl: "/science.html"
})
.otherwise({
redirectTo: "/home"
});
});
})();
index.html
<!DOCTYPE html>
<html ng-app="app" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script data-require="angular.js#2.0.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script data-require="angular-route#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://unmillennials.com/but.css" />
<title>Stretch Flex</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top col-xs-12 no-pad">
<div class="container col-xs-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">StretchFlex</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
<a class="menu_item" href="stretchProd.html">Stretch Producer</a>
</li>
<li>
<a class="menu_item" href="science.html">Science</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div ng-view=""></div>
</body>
</html>
homeCtrl
var app = angular.module('stretchFlexViewer', []);
app.controller('homeCtrl', function($scope) {
console.log('This is a test');
});
home.html
<section id="content">
<div class="col-md-12 col-xs-12 no-pad top-block">
<img class="top-photo col-lg-12 col-xs-12 no-pad" src="http://stretchflex.net/photos/img5.jpg" alt="tennis" width="100%" />
</div>
<div class="comp-name">
<span class="lightBlue" style="color:#87CEEB;">Stretch</span><span style="color: #D3D3D3;">Flex</span>
</div>
<div class="comparison parent">
<div class="col-md-4 col-xs-12 no-pad mov">
<div class="bordered-image child first">
<span class="stance-area">
<div class="col-md-8 col-xs-8 no-pad">
<img class="stance" src="http://stretchflex.net/stanceJaphet.jpg" min-height="50%" width="85%"/>
</div>
<div class="col-md-4 col-xs-4 no-pad ang1">
<img class="angle-japhet one" src="http://stretchflex.net/photos/startAngle.png" min-height="25%" width="100%"/>
</div>
</span>
<span class="stance-area">
<div class="col-md-8 col-xs-8 no-pad">
<img class="stance" src="http://stretchflex.net/stanceBaez.jpg" min-height="50%" width="85%"/>
</div>
<div class="col-md-4 col-xs-4 no-pad ang2">
<img class="angle-japhet one" src="http://stretchflex.net/photos/startAngle.png" min-height="25%" width="100%"/>
</div>
</span>
</div>
</div>
<div class="col-md-4 col-xs-12 no-pad mov">
<div class="bordered-image child second">
<span class="swing-area">
<div class="col-md-8 col-xs-8 no-pad">
<img class="swing" src="http://stretchflex.net/japhet1.jpg" min-height="50%" width="86%"/>
</div>
<div class="col-md-4 col-xs-4 no-pad ang3">
<div class="red-ex">
<span class="red">✘</span>
</div>
<div class="sec-ang-3">
<img class="angle-japhet sec" src="http://stretchflex.net/photos/japhetAngle.png" min-height="25%" width="100%" />
</div>
</div>
</span>
<span class="swing-area jav">
<div class="col-md-8 col-xs-8 no-pad">
<img class="swing" src="http://stretchflex.net/javier1.jpg" min-height="50%" width="86.5%"/>
</div>
<div class="col-md-4 col-xs-4 no-pad ang4">
<div class="green-check">
<span class="green">✔</span>
</div>
<div class="sec-ang-4">
<img class="angle-japhet sec" src="http://stretchflex.net/photos/javierAngle.png" min-height="25%" width="100%" />
</div>
</div>
</span>
</div>
</div>
<div class="col-md-4 col-xs-12 no-pad">
<div class="bordered-image child description third">
<div class="col-md-12 col-xs-12 delt" style="text-align: center;">
<h1>`\Delta degrees`</h1>
</div>
<div class="metrics">
<table class="fir">
<tr class="fir col-xs-12">
<th class="fir col-xs-6">Name</th>
<th class="fir col-xs-6" style="padding-left: 100px;">Height</th>
</tr>
<tr class="fir col-xs-12">
<td class="fir col-xs-6">Japhet Amador</td>
<td class="fir col-xs-6" style="padding-left: 118px;">6'4"</td>
</tr>
<tr class="fir col-xs-12">
<td class="fir col-xs-6">Javier Baez</td>
<td class="fir col-xs-6" style="padding-left: 118px;">6'0"</td>
</tr>
</table>
<table class="sec col-xs-12">
<tr class="sec col-xs-12">
<th class="sec col-xs-6">Weight</th>
<th class="sec col-xs-6" style="padding-left: 40px;">Home Runs (2014)</th>
</tr>
<tr class="sec col-xs-12">
<td class="sec col-xs-6">310</td>
<td class="sec col-xs-6" style="padding-left: 125px;">14</td>
</tr>
<tr class="sec col-xs-12">
<td class="sec col-xs-6">190</td>
<td class="sec col-xs-6" style="padding-left: 125px;">32</td>
</tr>
</table>
</div>
<div class="pelvis">
<img class="pelvis-1" src="http://stretchflex.net/pelvis1.jpg" />
<img class="arrow" src="http://stretchflex.net/rotArrow4.jpeg" />
<img class="pelvis-2" src="http://stretchflex.net/pelvis2.jpg" />
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-12 no-pad" style="height: 300px;">
<div class="started col-md-8 col-md-offset-2 col-xs-12">
Get Started
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
Any suggestions would be great.

Here is the working plunkr
Changes made:
<html ng-app="app" lang="en"> The name of your main module is app.
Included the scripts.
Scripts:
<script data-require="angular.js#1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"> . </script>
<script data-require="angular-route#1.6.0" data-semver="1.6.0" src="https://code.angularjs.org/1.6.0/angular-route.js"></script>
<script src="app.js"></script>
<script src="homeCtrl.js"></script>
<script src="stretchProdCtrl.js"></script>
Declared one dependency of app.
Module definition:
angular.module("app", ["ngRoute"]) // ng-app="app" to match here
Referenced that module like so:
Reference main module:
angular.module("app").controller('homeCtrl'

how to make text align right in labels inside row

I am trying to make simple demo as given in image ![enter image description here][1]
I am able to display contend in view .But I am facing few issue in making this page
how to add background image in contend .I don't have same background image but I have similar background image in this url
how to make text align left in application .The end character in a sigle line .how to make all label left align.
how to add separator line in grid view .Actually In all row separator are present.
here is my code
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
</body>
<ion-view>
<ion-header-bar align-title="center" class="bar-balanced">
<div class="buttons" style="font-size:20px ;padding:3px">
<i style="font-size:30px;" class='icon ion-chevron-left'></i>
</div>
<h1 class="title">Account</h1>
</ion-header-bar>
<ion-content>
<div class="button-bar">
<a class="button button-small" ui-sref="a" ui-sref-active="button-balanced">Account Details</a>
<a class="button button-small" ui-sref="l" ui-sref-active="button-balanced">Related</a>
<a class="button button-small" ui-sref="dinner" ui-sref-active="button-balanced">d</a>
<a class="button button-small" ui-sref="dinner" ui-sref-active="button-balanced">Notes</a>
</div>
<div>
<h4 class="headerTitle">Account Information</h4>
<div class="row rowoffset">
<div class="col gey_label_font">Number:</div>
<div class="col">0981234165</div>
<div class="col"></div>
<div class="col gey_label_font">Name:</div>
<div class="col">Girish Padhve</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font">Owner:</div>
<div class="col">Girish</div>
<div class="col"></div>
<div class="col gey_label_font">Total AR:</div>
<div class="col">345</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font">Last:</div>
<div class="col">123</div>
<div class="col"></div>
<div class="col gey_label_font">Last ] Amount:</div>
<div class="col">9891234165</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font"> Net Collectible:</div>
<div class="col">123</div>
<div class="col"></div>
<div class="col gey_label_font">Past Due:</div>
<div class="col">9891234165</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font"> Total Past Due:</div>
<div class="col">123</div>
<div class="col"></div>
<div class="col gey_label_font">Total Promised:</div>
<div class="col">9891234165</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font">Total Disputed:</div>
<div class="col">123</div>
<div class="col"></div>
<div class="col gey_label_font">Limit:</div>
<div class="col">9891234165</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font">Remaining:</div>
<div class="col">123</div>
<div class="col gey_label_font"></div>
<div class="col">Credit Score:</div>
<div class="col">9891234165</div>
</div>
</div>
</ion-content>
</ion-view>
</html>

The columns in your codepen already look aligned left to me, so I assume you worked that out. As for the background image and the separator lines, you can use these css rules: http://codepen.io/anon/pen/YXNVvv
#wrapper {
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
.rowoffset{
border-top: 1px solid gray;
}
.gey_label_font{
text-align: right;
}

Develop Reference

JavaScript is the programming language of the Web.

Using Jquery tabs isn't working properly - javascript

Related

how to connect a navigation bar (<nav>) with HTML files in google appscript?

How to initialize divs in DataTables?

.bootstrapMaterialDatePicker is not a function on Codeigniter 3

Angular Routing 1.6 assistance

how to make text align right in labels inside row

Categories

Resources