I ran my server with python manage.py runserver and for some reason it started displaying as plain text. When I run it as a live server it comes out normal. I have no idea what I changed that messed it up. Seems like a longshot but if anyone has encountered the same problem please let me know.
For some reason, when I run it in the django liveserver, it is all wrapped in a pre tag
Here is the full html code
<!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.0">
<title>Document</title>
{% load static %}
<link rel="stylesheet" href="{% static 'pictures.css' %}">
<link rel="stylesheet" href="{% static 'my_albums.css' %}">
<link rel="stylesheet" href="{% static 'other.css' %}">
<link rel="stylesheet" href="{% static 'text.css' %}">
<link rel="stylesheet" href="{% static 'header_stuff2.css' %}">
<script>
let album_list = []
function display_albums(){
document.getElementById('album_table').innerHTML = ''
table_header = document.createElement('tr')
table_album_header = document.createElement('th')
table_artist_header = document.createElement('th')
table_date_header = document.createElement('th')
table_score_header = document.createElement('th')
table_album_header.innerText = 'Album'
table_artist_header.innerText = 'Artist'
table_date_header.innerText = 'Date'
table_score_header.innerText = 'Score'
let album_location = document.getElementById('album_table')
album_location.appendChild(table_header)
table_header.appendChild(table_album_header)
table_header.appendChild(table_artist_header)
table_header.appendChild(table_date_header)
table_header.appendChild(table_score_header)
album_list.forEach(function (album){
table_row = document.createElement('tr')
album_collumn = document.createElement('td')
artist_collumn = document.createElement('td')
date_collumn = document.createElement('td')
score_collumn = document.createElement('td')
delete_button_button = document.createElement('button')
delete_button_button.innerText = "Delete"
delete_button_button.id = album.id
delete_button_button.onclick = delete_album;
score_box = document.createElement('select')
score_box.innerText = "Score"
score_box.id = album.album_name + '' + '_select'
score_box.onclick = validate(album.album_name + '' + '_select')
score_option_default = document.createElement('option')
album_collumn.innerText = album.album_name
artist_collumn.innerText = album.artist
date_collumn.innerText = album.release_date
let album_location = document.getElementById('album_table')
album_location.appendChild(table_row)
table_row.appendChild(album_collumn)
table_row.appendChild(artist_collumn)
table_row.appendChild(date_collumn)
table_row.appendChild(score_collumn)
table_row.appendChild(delete_button_button)
score_collumn.appendChild(score_box)
score_box.appendChild(score_option_default)
option_counter = 0
while(option_counter != 11){
sc_o1 = document.createElement('option')
sc_o1.innerText = option_counter
sc_o1.value = option_counter
option_counter++
score_box.appendChild(sc_o1)
sc_o1.id = album.album_name + '' + option_counter.toString()
}
})
}
function validate(select_id){
var selected_select = document.getElementById(select_id)
console.log(select_id)
var selected_value = selected_select.options[selected_select.selectedIndex].value
alert(selected_value+''+'gang')
}
function update_score(){
album_list.forEach(function (album){
var select_thing = document.getElementById(album.album_name+''+'_select')
album.score = selected_select.options[selected_select.selectedIndex].value
})
}
document.addEventListener('DOMContentLoaded', () => {
document
.getElementById('flavours')
.addEventListener('input', handleSelect);
document.getElementById('thing').addEventListener('input', handleData);
});
function handleSelect(ev) {
let select = ev.target; //document.getElementById('flavours');
console.log(select.value);
let choices = [];
// for (let i = 0; i < select.selectedOptions.length; i++) {
// choices.push(select.selectedOptions[i].value);
// }
choices = [].map.call(select.selectedOptions, (option) => option.value);
console.log(choices);
}
function handleData(ev) {
let theInput = ev.target;
console.log(theInput.value, typeof theInput.value);
}
/*album_collumn = table_row.createElement('td')
artist_collumn = table_row.createElement('td')
date_collumn = table_row.createElement('td')
album_collumn.innerText = album.album_name
artist_collumn.innerText = album.artist
date_collumn.innerText = album.release_date
*/
function add_albums(){
album_name = document.getElementById('addedInput').value
album_list.push({
album_name: album_name,
artist: "Aidan Stone",
release_date: 2022,
score: NaN,
id: album_name
});
display_albums();
update_score();
}
function delete_album(event){
const delete_button = event.target
const idToDelete = delete_button.id
album_list = album_list.filter(function (album){
if (album.id === idToDelete){
return false
}
else{
return true
}
})
display_albums();
}
</script>
</head>
<body style="
height:3000px;
">
<header class="header">
<div class="search_bar_section">
<form class="search_bar" >
<div ><input class="search_bar_cool" type="text" placeholder="Search"></div>
<img class="search_bar_button" src="pictures/search_bar.jpg">
<!-- When I make it a button it fucks up the shape? -->
</form>
</div>
<div class="header_section">
<div class="nav_stuff">
<li><span>Home</span></li>
<li><span>Add Albums</span></li>
<li><span>About Me</span></li>
<li><span>Other idk</span></li>
<li><span>Other idk</span></li>
</div>
</div>
<div class="profile_section">
<img class="pfp" src="pictures/gkmc.jpg">
</div>
</header>
<body>
<div>
<table border="10" width="100" class="album_table" id="album_table">
<tr>
<th>Album</th>
<th>Artist</th>
<th>Average Score</th>
<th>Score</th>
</tr>
</table>
</div>
<div class="form">
<input type="text" placeholder="Search" id="addedInput",class = "Searchbar">
<button type="button" id="addBtn" onclick="add_albums()"></button>
</div>
<body>
You are not closing html tag. Please use the body tag once. Keep coding standard
Related
I try to get the contents of 3 arrays from spreadsheet in 3 vars when the page is loaded in DOMContentLoaded. But I get nothing (look the picture)
I deployed the test project here: https://script.google.com/a/fmlogistic.com/macros/s/AKfycbxROleHY3u69jTpdVZjLOfDTzY9c5q1S4kwm0ctTFzU/dev
and test-spreadsheet with script of this is here
https://docs.google.com/spreadsheets/d/1qxr91eiLUykfLS0zKq3D4Dn206vnEkVqxDo6ZQF1rU4/edit#gid=0
I tried to write something like here, but this way with variantes Apps script return values from server function to html form
const inputs = document.querySelector('.dws-input');
const formControl = document.querySelectorAll('.form-control');
let findData;
let curInpID;
let firstValid, secValid, thirdValid, allValid;
formControl[0].focus();
function callBack(e) {
var Logs = e.ListLogins;
var Tabs = e.ListTables;
var Ords = e.ListOrders;
}
document.addEventListener("DOMContentLoaded", function(){
google.script.run.withSuccessHandler(callBack).sendData();
var Logs = e.ListLogins;
var Tabs = e.ListTables;
var Ords = e.ListOrders;
console.log(Logs);
console.log(Tabs);
console.log(Ords);
});
<!doctype html>
<html lang="en">
<head>
<title>CLR: PACKING</title>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="conteiner">
<form novalidate>
<h6 class="title">PACKING</h6>
<div class="dws-input">
<div class="col-md-3"></div>
<div>
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" novalidate id="tLogin" name= "username" placeholder= "Login:" autofocus >
<label for="tLogin">Login:</label>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" novalidate id="tTable" name= "text" placeholder= "Table:" >
<label for="tTable">Table:</label>
</div>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" novalidate class="form-control" id="tOrder" name= "text" placeholder= "Order:" >
<label for="tOrder">Order:</label>
</div>
</div>
</form>
</div>
<?!= include("index-js"); ?>
</body>
</html>
In actions.gs at server I wrote this:
const url = SpreadsheetApp.getActiveSpreadsheet().getUrl();
var htmlServ = HtmlService.createTemplateFromFile("index");
let ss = SpreadsheetApp.openByUrl(url);
let sheetTo = ss.getSheetByName("#sistem");
let sheetIn = ss.getSheetByName("#packing");
function doGet(e){
return htmlServ.evaluate();
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function sendData(){
var lrLogins = sheetTo.getRange("A:A").getValues().filter(String).length;
var arrLogins = sheetTo.getRange(1, 1, lrLogins, 1).getValues().flat();
var lrTMPLORDS = sheetTo.getRange("K:K").getValues().filter(String).length;
var curTMPLORDS = sheetTo.getRange(1, 11, lrTMPLORDS, 1).getValues();
var lrTABLES = sheetTo.getRange("R:R").getValues().filter(String).length;
var curTABLES = sheetTo.getRange(1, 18, lrTABLES, 1).getValues().flat();
var objDataInfo = {};
objDataInfo.ListLogins = arrLogins;
objDataInfo.ListTables = curTABLES;
objDataInfo.ListOrders = curTMPLORDS;
return objDataInfo;
}
Are there any ways to get the contents of these arrays when the page is loaded
Try this:
function callBack(e) {
var Logs = e.ListLogins;
var Tabs = e.ListTables;
var Ords = e.ListOrders;
console.log(Logs);
console.log(Tabs);
console.log(Ords);
}
document.addEventListener("DOMContentLoaded", function(){
google.script.run.withSuccessHandler(callBack).sendData();
//the following code is not in the callback function and it get's executed probably before the callback is returned.
var Logs = e.ListLogins;
var Tabs = e.ListTables;
var Ords = e.ListOrders;
console.log(Logs);
console.log(Tabs);
console.log(Ords);
});
It could have been written like this:
document.addEventListener("DOMContentLoaded", function () {
google.script.run.withSuccessHandler(function(e){
var Logs = e.ListLogins;
var Tabs = e.ListTables;
var Ords = e.ListOrders;
console.log(Logs);
console.log(Tabs);
console.log(Ords);
}).sendData();
});
Pagination through JSON Object Using Angular Js 1 and Bootstrap UI
May someone help me on how to paginate through json object with proper bootstrap displays and and uib-pagination paging functionality...
below is my app code
var app = angular
.module("app",[
"ngRoute",
"ngResource",
"ui.bootstrap"
])
.config(['$routeProvider', function($routeProvider)
{
$routeProvider
.when('/home',{
templateUrl: 'HTML/temp/home.html',
controller:'HomeCtrl'
})
.otherwise({redirectTo:'/home'});
}])
.controller('HomeCtrl',['$scope','myresource','$route','$routeParams',function($scope,myresource,$route,$routeParams){
// console logs when I click on pagination link ...
$scope.pageChanged = function(){
console.log("Loading Pagination ... ");
};
//fucntion to edit and save details
$scope.edit = function(myArray){
console.log("ID : ... !" + myArray.id);
console.log("NUmber ... !" + myArray.contactdetails.number );
//phone details fieds auto popution binding
$scope.phonenumber = myArray.contactdetails.number;
$scope.email = myArray.contactdetails.email;
//address part fieds auto popution binding
$scope.housenumber = myArray.addressdetails.number;
$scope.street = myArray.addressdetails.street;
$scope.suburb = myArray.addressdetails.suburb;
$scope.postalcode = myArray.addressdetails.postalcode;
$scope.data = {
userid: myArray.id,
number : myArray.contactdetails.number,
email : myArray.contactdetails.email,
streetNum : myArray.addressdetails.number,
streetName: myArray.addressdetails.street,
suburb: myArray.addressdetails.suburb,
postalcode :myArray.addressdetails.postalcode
}
/*for(var i = 0 ; i <= myArray.length ; i++ ){
if($scope.editId === myArray.id){
$scopedata.contactdetails.number = myArray.contactdetails.number;
$scope.user.contactdetails.number = data[i].number;
console.log("phone number " + $scope.user.contactdetails.number)
}else{
console.log("NOne !");
}
console.log("NOne !" + $scope.editId);
}*/
//
};
$scope.myArray=[];
//gets data from JSON file
myresource.query({},function(response){
$scope.users = response;
$scope.pagi = [];
myArray = $scope.users;
//object for pagination instead of premitives
$scope.pagi = {
currentPage:1,
pageSize:3,
objlength:myArray.length
}
//console.log("Start : " + ($scope.pagi.currentPage-1) * pagi.pageSize )
;
});
}])
//slice and filter desired number of items
.filter('PagiFilter', function(){
return function(data,start){
return data.slice(start);
}
});
//resource factory
app.factory('myresource',function($resource){
return $resource("./JSON/ScreenMockupData.json",{
update:{method:"PUT", isArray: true}
})
})
below is html :
problem 1 : pages do not link to next page
problem 2 : bootrap buttons are not displayed.
Search...
UserID NumberDate of birthAgeGenderAction
<td>{{user.user}}</td>
<td>{{user.idnumber}}</td>
<td>{{user.dob}}</td>
<td>{{user.age}}</td>
<td>{{user.gender}}</td>
<td><form method="post" ><button type="submit" id = "{{user.id}}" ng-model="editId" value="{{user.id}}" ng-value="{{user.id}}" ng-click = "edit(user)">Edit user{{user.id}}</button></td>
</form></td>
</tr>
</a>
</table>
</div>
</div>
<div class='btn btn-default'>
<ul uib-pagination total-items="users.length" items-per-page = "pagi.pageSize" ng-model="pagi.currentPage" data-ng-show="users.length" ng-change = "pageChanged()"> </ul>
</div>
******************Index.html**************************************
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="app" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>User Management System</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class = "container">
<div ng-view></div>
</div>
<script src="./JS/node_modules/jquery/dist/jquery.js"></script>
<script src="./js/node_modules/angular/angular.js"></script>
<script src="./js/node_modules/angular-resource/angular-resource.js"></script>
<script src="./js/node_modules/angular-route/angular-route.js"></script>
<link rel="stylesheet" href="./JS/node_modules/bootstrap/dist/css/bootstrap.css">
<script src="./js/node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js" ></script>
<script src="./js/node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js" ></script>
<link rel="stylesheet" href="./CSS/styles.css">
<script src="./JS/application.js"></script>
</body>
</html>
I'm new in front-end.I need to show the list of values whenever the user types the % in the text area.And from the list, the selected value must be appended in the text box.
for example:
Hi %name how are you?
in the above string, the name is one of the list value.After appending the value it can allow the user to type normal text.
Here is the solution to what you are looking for. Please ignore css
<html ng-app="exampleApp">
<head>
<meta charset="utf-8">
<title>ng app</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" type="text/javascript"></script>
<script>
var myApp = angular.module('exampleApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.actualData = [
'John',
'Dan',
'Brown'
];
$scope.viewList = function() {
var templist = []
if ($scope.val == '' || $scope.val == undefined) {
templist = [];
} else if ($scope.val.indexOf('%') > -1) {
templist = $scope.actualData;
}
$scope.data = templist;
}
$scope.setData = function(value) {
$scope.val = $scope.val.replace('%','') + " " + value;
$scope.data = [];
}
})
</script>
</head>
<body ng-controller="myCtrl">
<input type="search" ng-model="val" ng-change="viewList()" />
<ul>
<li ng-repeat="option in data" ng-click="setData(option)">{{option}}</li>
<ul>
</body>
</html>
Check this plunker link https://plnkr.co/edit/bz68dKK3izvCs7jcjX4C?p=preview, to see it in action
my code basically works, but when I click the start button a few times, so for example I click on start, the randomnumbers appear, then I type in a number, click on fertig, and make these steps for a few times again. After these few times the start button is "stuck" when I click on it. So I click on it, it goes down, but not up again, you understand ? :-)
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Der Einmaleins - Trainer</title>
<link href = "style.css" type = "text/css" rel = "stylesheet">
<script src = "script1m1.js"></script>
</head>
<body>
<h1>Der Einmaleins - Trainer</h1>
<button type="button" onclick = "start();">Start</button>
<button type = "button" onclick = "fertig();">Fertig!</button>
<input id = "erginput" type = "number">
<label id = "rn1"></label>
<label id = "multiplication"></label>
<label id = "rn2"></label>
<br>
<label id = "feedback"></label>
</body>
</html>
Here's the JS:
var randomnumber1;
var randomnumber2;
function start() {
randomnumber1 = getrn();
randomnumber2 = getrn();
while(randomnumber1 == 5 || randomnumber2 == 5 ){
if (randomnumber1 == 5){randomnumber1 = getrn();}
else{randomnumber2 == getrn();}
}
document.getElementById("rn1").innerHTML = randomnumber1;
document.getElementById("multiplication").innerHTML = "x";
document.getElementById("rn2").innerHTML = randomnumber2;
}
function getrn(){
var min = 3;
var max = 10;
var zufallszahl = Math.floor(Math.random() * (max - min)) + min;
return zufallszahl;
}
function ergebnispruefen(zahl,faktor1,faktor2){
var ergebnisrichtig = faktor1 * faktor2;
if (zahl == ergebnisrichtig){
document.getElementById("feedback").innerHTML = "Richtig!";
document.getElementById("feedback").style.color = "Lime";
}else{
document.getElementById("feedback").innerHTML = "Falsch,denk nach!";
document.getElementById("feedback").style.color = "red";
}
}
function fertig(){
var ergebnis = document.getElementById("erginput").value;
ergebnispruefen(ergebnis,randomnumber1,randomnumber2);
}
console.log("Thanks in advance! :-)");
Ji W
I have this next page, on which a user can create a new account. My question now is how can i make sure the user inserts a username that doesn't already exist in my MySQL database. The page is available on http://webs.hogent.be/kevinbaeyens/gebruiker.html
the code of this page is:
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nieuwe gebruiker | Sociale buurt</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="onzebuurt.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
window.onload = function() {
document.getElementById("Username").focus();
};
function formulierValideren() {
if (document.getElementById('Username').value == '' || document.getElementById('Username').value == null)
{
alert ('Gebruikersnaam is verplicht.');
document.getElementById('Username').style.borderColor = "red";
return false;
}
else if (document.getElementById('Wachtwoord').value == '' || document.getElementById('Wachtwoord').value == null)
{
alert ('Wachtwoord is verplicht.');
document.getElementById('Wachtwoord').style.borderColor = "red";
return false;
}
else if (document.getElementById('Wachtwoord2').value == '' || document.getElementById('Wachtwoord2').value == null)
{
alert ('Bevestig wachtwoord.');
document.getElementById('Wachtwoord2').style.borderColor = "red";
return false;
}
else if (document.getElementById('Wachtwoord2').value != document.getElementById('Wachtwoord').value)
{
alert ('Wachtwoorden komen niet overeen.');
document.getElementById('Wachtwoord2').style.borderColor = "red";
return false;
}
else
{
var url = "http://localhost:8080/OnzeBuurt2/resources/gebruikers";
var reminder = {};
reminder.naam = jQuery.trim($("#Username").val());
reminder.wachtwoord = jQuery.trim($("#Wachtwoord").val());
var request = new XMLHttpRequest();
request.open("POST", url);
request.onload = function() {
if (request.status === 201) {
reminder.id = request.getResponseHeader("Location").split("/").pop();
} else {
console.log("Error creating reminder: " + request.status + " " + request.responseText);
}
};
request.setRequestHeader("Content-Type", "application/json");
request.send(JSON.stringify(reminder));
var msg = "Registratie succesvol. Klik op OK om u aan te melden op de site.";
if(confirm(msg)){
setTimeout(function() {window.location.href = "http://localhost:8080/OnzeBuurt2/"})
}
}
//end if
}//end function
</script>
</head>
<body class="body2">
<div class="gridContainer clearfix">
<div class="header2">
<center>
Nieuwe gebruiker
</center>
</div>
<div id="formulier2">
<form method="post" name="form" action="">
<p class="labels"><center>Gebruikersnaam *</center></p><input id="Username" type="text" name="Username" placeholder="Gebruikersnaam" size="50">
<p class="labels"><center>Wachtwoord *</center></p><input id="Wachtwoord" type="password" name="Wachtwoord" placeholder="Wachtwoord" size="50">
<p class="labels"><center>Bevestig wachtwoord *</center></p><input id="Wachtwoord2" type="password" name="Bevestig wachtwoord" placeholder="Bevestig wachtwoord" size="50">
<br />
<center><img id="return" name="jsbutton" src="return.png" alt="Terug" /></center>
<br />
<center><input id="bevestig" type="image" src="Bevestig.png" width="200" height="50" border="0" alt="SUBMIT!" onclick="formulierValideren()"></center>
<br />
</form>
</div>
</div>
</body>
</html>
Some notes you need to know:
1) since it's an assignment for school, I can't use PHP.
2) The primary key in my database table 'Gebruiker' is 'ID', the field of 'username' is the field which has to be unique
thanks in advance!