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 🙏
Related
I'm learning Angular 12 and I have some issues about the framework operation.
I've created a new project, added Bootstrap 5 and created some components.
When I nest a component inside another like this :
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Mes appareils</h2>
<ul class="list-group">
<app-appareil [appareilName]="appareilOne"></app-appareil>
<app-appareil [appareilName]="appareilTwo"></app-appareil>
<app-appareil [appareilName]="appareilThree"></app-appareil>
</ul>
</div>
</div>
</div>
I don't understand why I still see the custom selectors in the browser inspector view :
Angular browser view
It breaks several things in my Boostrap style.
Did you know if it's possible to hide/remove these custom components of my browser view to get in this case only the <li> tags directly inside the <ul> instead of these <app-appareil> ?
Thanks :)
Change
#Component({
selector: "app-appareil"
})
to
#Component({
selector: "li[appAppareil]"
})
and then use it as
<ul class="list-group">
<li appAppareil [appareilName]="appareilOne"></li>
</ul>
By using an attribute selector we can avoid the wrapping component tag (which you cannot "remove"), and we preserve semantics of the DOM itself.
Likely to get better semantics you'd want to make further changes and use content projection, but that's unclear from the limited information and beyond the scope of the question anyway.
To make it the "Angular way", the approach needs to be changed.
Supposing that you have a collection of device names (appareilNames) returned from your component:
public get deviceNames(): Array<string> { ... }
The appropriate tags structure can be achieved as follows:
<ul class="list-group">
<li *ngFor="let deviceName of deviceNames"> <!-- iterate on each device name -->
<app-appareil [appareilName]="deviceName"></app-appareil> <!-- use each name to create a component with it -->
</li>
</ul>
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 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
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 want to implement dynamic breadcrumb and really dont know how do i go about it. Cant find much examples on internet. Please see attached image where i have added breadcrumb. The code for it as below
<div style="font-size: 10px;">
<ul class="breadcrumb">
<li>
Home <span class="divider">></span>
</li>
<li>
<li><a id="navObject" href="../AgrProduct/Index.aspx" class="active" >Search</a></li>
</ul>
</div>
Currently i have just 2 level in breadcrumb as Home and Search. when i click on button Search it will show me list of products and when i select one on product the breadcrumb should show as Home > Search > Product. I am also attaching image of what happens when i click on Search button
Please let me know how should i go about it. I am really stuck. I use knockout,jquery.
Well, if you created a breadcrumb view model:
var breadCrumbViewModel = function()
{
var self = this;
self.breadCrumbs = ko.observableArray();
self.addCrumb = function(url, text, active)
{
self.breadCrumbs.push({ 'url': url, 'text': text, 'active': active });
}
self.reset = function()
{
self.breadCrumbs.removeAll();
}
}
And then use it something like this (I've not tested this, so there may be some errors in it, but the idea should be good!)
<ul class="breadcrumb" data-bind="foreach: breadCrumbViewModel.breadCrumbs">
<li>
<a data-bind="attr: { href: url }, text: text, css: { active: active }"></a> <span data-bind="visible: $index < breadCrumbViewModel.breadCrumbs - 1" class="divider">></span>
</li>
</ul>
You would set it up in the function called whenever you navigate to a "page" within your SPA:
function()
{
breadCrumbViewModel.reset();
breadCrumbViewModel.addCrumb('#/Home', 'Home');
breadCrumbViewModel.addCrumb('#/Product/:id', 'Search', true);
}
Don't forget to bind the model the the html element for knockout to do its stuff.
I'm using the example code for sammy.js for the navigation, though I will admit that I haven't used sammy.js before, I've got a custom implementation of navhistory.js from the Microsoft Big Shelf SPA example. But that should be enough to give you a head start on it. I'm assuming that you actually want this to be a SPA, despite having actual URLs in your links that would take you off to another page.