I have created a dashboard with navigation using JavaScript.
However, I am unable to toggle between different HTML created through google.script
Mentioned below is my HTML tags:
<div class="collapsible-body">
<ul>
<li>Dashboard<i class="material-icons">web</i></li>
</ul>
</div>
</li>
<li class="bold waves-effect"><a class="collapsible-header">Leave Management<i class="material-icons chevron">chevron_left</i></a>
<div class="collapsible-body">
<ul>
currently I receive the following error page: script.google.com refused to connect.
How can we achieve to do navigate correctly in this case.
What does your doGet() function looks like?
For a WebApp with multiple html pages, you can navigate by retrieving the final part of the URL as an e.parameter in doGet().
Sample:
function doGet(e) {
if (!e.parameter.v) {
return HtmlService.createTemplateFromFile("index").evaluate();
}
else{
return HtmlService.createTemplateFromFile(e.parameter['v']).evaluate();
}
}
The biggest problem here is the authorization.
I don't know what you put for permission, but check this
GoogleAppScripts
GithubGoogleAppScripts
Related
I am working on a simple HTML page using Alpine.js and TailwindCSS (with Flowbite).
I have to display a two-level Dropdown button (I followed this implementation from Flowbite) which leverages a simple .json input coming from an external resource.
My first test with the .json input defined directly in the page is working properly (see this JSFiddle) as the dropdown button shows the two levels of items.
However, as soon as I switched to an external .json resource, only the first level is displayed (see this JSFiddle)
My implementation of Alpine.js looks pretty simple though. I might have missed something with the x-data="..." or x-init"..."
const directoryApp = () => ({
directoryNOK: {},
fetchDirectory() {
fetch('https://myjson.dit.upm.es/api/bins/aagg')
.then(response => response.json())
.then(data => this.directoryNOK = data);
},
});
<ul x-data="directoryApp()" x-init="fetchDirectory()" aria-labelledby="multiLevelDropdownButton">
<template x-for="folder in directoryNOK.folders" :key="folder.id">
<li>
<a x-show="!folder.pages.length" href="#" x-text="folder.name"></a>
<div x-show="folder.pages.length" x-id="['doubleDropdownButton', 'doubleDropdown']">
<button :id="$id('doubleDropdownButton')" :data-dropdown-toggle="$id('doubleDropdown')" data-dropdown-placement="right-start" type="button"><div x-text="folder.name"></div></button>
<div :id="$id('doubleDropdown')" class="hidden">
<ul :aria-labelledby="$id('doubleDropdown')">
<template x-for="page in folder.pages" :key="page.id">
<li>
<a x-text="page.name" :href="page.url"></a>
</li>
</template>
</ul>
</div>
</div>
</li>
</template>
</ul>
Thank you for your help 🙏
Basically I'm trying to remake some simple web page that I have initially created with HTML and CSS to be working rather on React. I managed to redo the page to correctly display when it was moved into React, however I don't really understand why the navigation links that I have on top do not take me to the corresponding section on the same page anymore as well as why the external links to the project sites also stopped working.
Here is the project link code:
import React from "react";
export default function ProjectTile(props) {
return (
<div className="project-tile" id={props.id}>
<a href={props.href} target="_blank" id={props.link_id}>
<img
className="project_screenshot"
src={props.img_src}
alt={props.img_alt}
/>
<p className="project_name">
<span className="brackets"><</span> {props.title}{" "}
<span className="brackets">/></span>
</p>
</a>
</div>
);
}
All props are getting mapped and loaded from the array with corresponding data where each object looks like this:
{
id: "tribute_page",
link_id: "https://codepen.io/konstantinkrumin/full/PooYQbG",
img_src: "https://i.imgur.com/ynRuzOQ.png",
img_alt: "tribute_page_screenshot",
title: "Tribute Page"
}
The navigation links used are the following:
import React from "react";
export default function Navbar() {
return (
<nav id="navbar">
<a className="nav-link" href="#welcome-section">
About
</a>
<a className="nav-link" href="#projects">
Projects
</a>
<a className="nav-link" href="#contact">
Contact
</a>
</nav>
);
}
And each section they refer to have an id corresponding to the href indicated above.
Here if the link to this project on codesandbox
P.S. Everything used to work correctly when it was on HTML.
Also the contact links that seem to be set in similar way as project links are working.
Here are two things I think I found out:
In the ProjectTile.js file, replace href = {props.href} by href={props.link_id and now project opens in codepen.
About the jump link you have made in nav-bar, I think it's because of problem of codesandbox.
If you manage to make your url to https://op6gq.csb.app#projects instead of https://op6gq.csb.app/#projects. That's gonna work.
Or directly visiting https://op6gq.csb.app/#welcome-section jump link too works well.
It looks like there's no href prop. Sounds like what you want is something like
href={`#${props.id}`}
which would evaluate to href="#tribute_page" in this example.
You Have to try that your page url become:
https://op6gq.csb.app#welcome-section
Not:
https://op6gq.csb.app/#welcome-section
please attend to that / in address bar!
I am trying to add a Tripadvisor rating widget to my React website (see code below). At the moment, only the Tripadvisor log is loading, and no rating information. I think the script in the widget is not running, and I'm not sure how to get it to run.
I loaded the script using Helmet, and can see it in the head of my document in the browser. In the same component, I try to render the widget.
//Here is the code of the widget:
<div id="TA_cdsratingsonlynarrow350" class="TA_cdsratingsonlynarrow">
<ul id="80bNGet6b" class="TA_links mE4BAE">
<li id="u9nO7YH4pF" class="aWtKBjB9S">
<a target="_blank" href="https://www.tripadvisor.com/">
<img
src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png"
alt="TripAdvisor"
/>
</a>
</li>
</ul>
</div>
<script
async
src="https://www.jscache.com/wejs
wtype=cdsratingsonlynarrow&uniq=350&locationId=17821239&lang=en_US&border=true&display_version=2"
data-loadtrk
onload="this.loadtrk=true">
</script>
//Here is the code of my attempt:
const Home = () => {
return (
<Layout>
<Helmet>
<script
async
src="https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&uniq=350&locationId=17821239&lang=en_US&border=true&display_version=2"
data-loadtrk
onload="this.loadtrk=true"
></script>
</Helmet>
<div id="TA_cdsratingsonlynarrow350" class="TA_cdsratingsonlynarrow">
<ul id="80bNGet6b" class="TA_links mE4BAE">
<li id="u9nO7YH4pF" class="aWtKBjB9S">
<a target="_blank" href="https://www.tripadvisor.com/">
<img
src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_log o_transp_340x80-18034-2.png"
alt="TripAdvisor"
/>
</a>
</li>
</ul>
</div>
</Layout>
I expect the full tripadvisor widget to load, but instead it just loads the Tripadvisor logo image (which does not require the script to be run).
The widget looks fine when I test it in a plain html document, but I can't get it to work in React. Any help much appreciated!
Thanks for the question. Receiving errors in the console (by right clicking and choosing inspect in Chrome) would be helpful to determine the root of the problem.
I think what's happening here is a conflict associated with the security of the site.
In the line that identifies the jscashe.com URL, use this URL instead: https://www.tripadvisor.com/WidgetEmbed-cdsratingsonlynarrow?amp;locationId=17821239&border=true&uniq=350&lang=en_US&display_version=2
It turns out that by doing a gatsby build && gatsby serve the widget works fine. I was previously running gatsby develop and it wasn't working then. If anyone knows why that could be I would be interested to know!
I'm building a dashboard similar to this one Admin Dashboard Theme
I'm implementing the Right Side SideBar as show in the screenshot
My App code structure is something like:
index.html:
<div ui-view=""></div>
main.html
<div ui-view=""></div>
<div ng-include='"app/dashboard/sidebar.html"'></div>
I have done nesting of view in my main.html where I'm injecting different views. Also, since my right side sidebar is fixed, I want it to be common in all the main views. So, I have just included it in my main.html.
Now, the problem is somehow my sidebar.html is getting initialized again and again no matter if I scroll my page down or perform any action inside sidebar. I have verified it by printing console logs for every controller function which are used in sidebar.html view.
This problem is related to my this post: Earlier, I wasn't able to figure out the actual issue.
Following is my controller and jade code:
angular.module('myApp')
.controller('SidebarCtrl', function($scope, $rootScope) {
$scope.message = {};
$scope.addSideBarToggleClass = function() {
console.log("addSideBarToggleClass");
return true;
}
$scope.getStatusClass = function(status) {
console.log("getStatusClass");
return 'is-online';
}
$scope.openChat = function(receiver) {
console.log("openChat");
}
// etc...
});
<aside ng-class="{ 'control-sidebar-open' : addSideBarToggleClass()}"
ng-controller="SidebarCtrl">
<ul>
<li ng-class="{active: isTabSelected('chat')}">
<a data-toggle="tab" ng-click="updateCurrenTab('chat')"></a>
</li>
<li ng-class="{active: isTabSelected('home')}">
<a data-toggle="tab" ng-click="updateCurrenTab('home')"></a>
</li>
</ul>
<div>
<div ng-class="{active: isTabSelected('home')}">
<h3>Recent Activity</h3>
</div>
<div ng-class="{active: isTabSelected('chat')}">
<div>
<h4>Chat {{noOfUsersOnline}}</h4>
<div>Friends
<a href="#" ng-repeat="user in users" ng-click="openChat(user)">
<span ng-class="getStatusClass(user.status)"></span>
{{user.name}}</a>
</div>
</div>
</div>
</div>
</aside>
I see many logs of "addSideBarToggleClass", "getStatusClass" and every time I click on openChat, I see a log of "openChat" and then again "addSideBarToggleClass" and "getStatusClass"
Can anyone please point out what can be the possible problem for this behavior?
You need to familiarize yourself with the concept of a digest loop in Angular.
In short, every time a digest loop runs, all expressions, e.g. {{name}} or ng-show="isActive && isEnabled", that are being "$watched" by Angular are evaluated (sometimes more than once). This means that if you are invoking a function inside an expression:
<div ng-show="isShown()">
$scope.isShown = function(){
console.log("expect to see this text a lot of times");
return true;
};
the function will be executed on every digest loop.
A digest loop runs any time that something in Angular calls $scope.$digest, which by default happens on things like ng-click or ng-change or $http.then, etc..
I have collections set up and working properly.
I am looping through a collection of projects
{{#each collections.projects}}
<a href="" class="portfolio-entry">
<div class="info-frame portfolio-title">
<h4>{{this.title}}</h4>
</div>
<div class="info-bits centerContext">
<ul class="centerElement">
<li class="info-bit">{{this.skills}}</li>
<li class="info-bit">{{this.type}}</li>
<li class="info-bit">{{this.platform}}</li>
</ul>
</div>
<div class="project-thumbnail">
<img src="{{this.thumbnail}}" alt="">
</div>
</a>
{{/each}}
I would like to use metalsmith-permalinks in order to resolve each link's url
I tried all kinds of lame things like this
<a href="{{this.permalink}}" class="portfolio-entry">
and this
<a href="{{this.url}}" class="portfolio-entry">
Of course - none of them works.
I struggled to find any detailed information on how to actually use permalinks within your template anywhere online.
The permalinks plugin adds path metadata property that doesn't seem to be documented well. This should be what you need to achieve links.
The Github page notes:
If no pattern is provided, the files won't be remapped, but the path metadata key will still be set, so that you can use it for outputting links to files in the template.
I haven't found anywhere else showing the use of this but I'd assume the above quote means that it is standard behaviour.
You can use it like:
{{#each collections.projects}}
<a href="/{{this.path}}/" class="portfolio-entry">
The first / is so that it resolves to the current host and the trailing / is optional (depending on your http server configuration.