Develop Reference

Flowbite multi-level dropdown does not display with external resource

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 🙏

How to update url hash when scrolling through sections in ReactJS

I've been struggling with that issue for 2 hours or so and can't find a way to do it.
I would like to update my url hash (#home, #about etc..) when i'm scrolling through those sections and by the same way highlight the current section in my navbar. I've found different answers in Jquery but the thing is that i'm using ReactJS and i've been told that it is not a good idea / useful to use Jquery with ReactJS.
I've also found and tried this package : https://www.npmjs.com/package/react-scrollable-anchor
But the problem is the hash update only when the scrolling is over.
Edit :
<ul>
<li>
<a href="#">Home</Link>
</li>
<li>
<a href="#about">About</Link>
</li>
<li>
<a href="#skills">Skills</Link>
</li>
</ul>
When i'm clicking on About my url then goes as : localhost:3000/#about and automatically scroll to this section, everything is fine from here.
But if I scroll(without clicking anywhere) to the Skills section then i want the url to automatically go to localhost:3000/#skills and the navbar hightlight the Skills.
Hope you can help me through this issue. Thanks !

You should simply use 'react-router-dom' library for routing and handling Url paths. they has very clear documentation https://reactrouter.com/web/example/basic.
For You help
Simply define the path in the to prop of Link where you want to go !
<ul>
<li>
<Link to="/test">Home</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
Now simply navigate to that declared path by wrapping it in the
<Route exact path="/test">
<Home />
</Route>
By doing all this.Url Hash will not been a problem any more ;)

React: why my links that are inside React components are not working as used to work in pure HTML page?

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!

How to navigate between google.script

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

Grafana: want to get Organization name into home dashboard

in Grafana (I have 4.0.1) there is possibility to create more organizations. When I switch among them, I always get home dashborard (I think it is loaded from this file "/usr/share/grafana/public/dashboards/home.json" there is on web browser nice Title "Home Dashboard" comming from that file above defined in HTML as
<div class="text-center dashboard-header">
<span>Home Dashboard</span>
</div>
and I want to modify it so that it will show Organization name in from of Home dashboard" e.g.
<div class="text-center dashboard-header">
<span> $orgName Home Dashboard</span>
</div>
$orgName would be a variable which can be get by javascript somehow.
the url for getting thiss Orgname is "/api/org" which return json
{"id":4,"name":"Base-medium","address": {"address1":"","address2":"","city":"","zipCode":"","state":"","country":""}}
at the end it would look like
<span> Base-medium Home Dashboeard </span>
I have no clue how to write javascript but google search showed me it is possible :). I would appreciate a help with this. I assume I would need to modify this /usr/share/grafana/public/dashboards/home.json file to get work for each Organization switch-over. Thank you in advance

you can change Home dashboard on org or user level (on org or profile page). Just need to star it first.