My Page View cannot be scroll on mobile view if it was loaded from router link from different page, need to be refreshed then it can be scrolled.
this is how I call the page
<router-link
:to="{ name: 'catalogue.categorizedproduct', params: { category: kategori.nama_kategori } }" style="text-decoration:none;">
<i class="bi bi-caret-right-fill"></i>category.category_name}}
</router-link>
there was 2 error, CORS and 'asynchronous response by returning true, but the message channel closed before a response was received' . Fixed the CORS problem but the other remain.
Related
I am using a system called Ungerboeck to setup a web store. The app allows me to place custom HTML code inside a section called <!--TOPPAGE-->. This is code placed above their system navigation menu and the stores main content.
This is what a standard link looks like in the main stores content page.
<a class="readMore" data-bind="click: function() {runCode('openPage', 2232)}">Read More</a>
I tried to add this type of code to my custom bootstrap navigation but the link does not work.
I tried using the same code from the left-side navigation which the Ungerboeck system generates for the top navigation I made.
<li data-bind="attr: { class: panelCss }" data-view="public/controls/NavigationLinks/NavigationLinks" class="ux-nav--link ws-Links-CurrentLinkTextColor ux-navLevel-1" data-active-view="true" style="">
<!-- ko if: hasChildren --><!-- /ko -->
<a class="menu-link ws-Links-LinkTextColor" data-bind="attr: { href: url, id: 'navLink' + sequence() }, css: { 'ws-Links-LinkTextColor': !lastClicked(), 'ws-Links-CurrentLinkTextColor': lastClicked(), isSelected: lastClicked()}, click: linkClicked, text: description" target="_blank" data-track="true" href="" id="navLink288">Show Information</a>
<!-- ko if: hasChildren --><!-- /ko -->
</li>
But when added to my navigation menu, the link refreshes the site.
Question
How can I add links to my navigation menu that can link to a page within my site?
Webpage: https://ecommerce.sourceoneevents.com/prod/app85.cshtml?aat=E0jDDZomlL5TBOB6hWHMAz5j7IJY9TtwYxMQnlnL0Y4%3d
Codepen Example: https://codepen.io/CookieFresh89/pen/KKMVLOm
Update 1/20/2021 from Ungerboeck
After discussing with the team, I can confirm that embedding those
“data-bind=….” snippets into the web skin won’t work for you or other
ESC customers. The web skin HTML is not processed for Knockout
bindings for security, complexity, and performance reasons. On top of
that, we couldn’t make the “runCode….” snippets functional at the web
skin level as that code is specific to the store pages themselves.
Lastly, since the web skin loads before anything else and shows all
the time, there would be many instances where a link such as this
couldn’t work since the store, and thus the page to navigate to,
hasn’t even loaded yet, like on the sign-in page.
After updating the post, it's clear that you can't use normal <a href=''> elements, and also can't use them with data-bind, which of course has a custom implementation internally in their system, so you can add your custom way to navigate as well,
you can try something different to not override anything from their side, also you don't need it to be complex like their example,
ex:
add data-href for your <a> elements, with the path/url as a value
<a data-href="/some-path">Read More</a>
and then in your js:
document.querySelectorAll('a[data-href]').forEach(item => {
item.addEventListener('click', (event) => {
window.open(item.dataset.href, '_self');
});
});
Im new to Vue and i want while on mobile navigation when I click menuItem I run function toggleMenu(open/close Menu), but then whole page reload, who to prevent that?
This is my link:
<router-link to="/" #click="toggleMenu">
<div class="nav-item">Home</div>
</router-link>
I tried adding #click.prevent and it prevents reload but not sending me to path.
EDIT:
So i make it works thanks to Boussadjra Brahim answer, but I did it with CompositionAPI and i used useRouter() hook from vue-router
Template:
<router-link
to="/"
#click.prevent="toggleMenu">
Home </router-link>
setup():
const router = useRouter();
function toggleMenu(){
router.push('/');
}
Add prevent modifier as you did then inside the toggleMenu add this.$router.push("/"); :
<router-link to="/" #click.prevent="toggleMenu">
<div class="nav-item">Home</div>
</router-link>
LIVE DEMO
i'm facing a problem in my web application with routerLink. I created a card (div) and I d'like to click on it and open another component on the same page.
Here is my code:
<a class="app-card" [routerLink]="['/', '#app=5h3kemncnri4i3nf']">
<div class="app-card__header">
<h2>{{'HOME.APPLICATION.APP_ONE'|translate}}</h2>
</div>
</a>
This part #app=5h3kemncnri4i3nf is an ID which opens the app on the same page. But wit the code above it didn't work - nothing happen when I click on it .
If I hover the <a> in the browser, I get the following output:
localhost:4200/%23app%5h3kemncnri4i3nf
I'm expecting to open the link:
http://localhost:4200/home#app=5h3kemncnri4i3nf on the same page.
Thanks in advance!
I'm creating a simple app with vueJS, but I have some trouble with reactivity.
When an user connects to the app he gets a JWT, I store this JWT in my localstorage. And for verifying if a user is logged I just check the token presence.
First of all, is this a good method?
Now I'm trying to update the navbar, when the user is not logged I have 2 buttons "register" "login", when he is logged I want to have my "disconnect" button showing up and the two others disappear.
I have my navbar component with a "v-if" inside for showing or not the buttons.
Currently I have set a Boolean "isLogged" in my data(), How to make vueJS watch this data and update my component when this data updates?
<div class="navbar-item" v-if="!isLogged">
<div class="buttons">
<a #click="$router.push('/login')" class="button nav-button is-outlined">
CONNEXION
</a>
<a #click="$router.push('/register')" class="button nav-button is-outlined">
INSCRIPTION
</a>
</div>
</div>
<a #click="disconnect" class="navbar-item" v-if="isLogged">
Déconnexion
</a>
data() {
return {
isLogged: this.$jwt.hasToken()
}
}
I'd like to have my navbar updating without have to refresh the component.
Use a computed value instead data.
computed: {
isLogged() {
return this.$jwt.hasToken()
}
}
When im logged in, and navigate to otherpage or login i get the following error:
EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'customComponent'
Error: Cannot find primary outlet to load 'customComponent'
But when im not logged in, navigating works.
I also noticed that if i remove one of the router-outlets the navigation will work. Lets say i remove the router-outlet in loggedin, the navigation within user.username will work as normal.
How come?
How can i make it work as it should? if not logged in, show router outlet there, else if im online, show it somewhere else?
Code:
<div *ngIf="user.username">
<a routerLink="/murder" routerLinkActive="active">Murder</a>
<a routerLink="/login" routerLinkActive="active">Login</a>
<div>
<router-outlet></router-outlet>
</div>
</div>
<div *ngIf="loggedin == false">
<a routerLink="/murder" routerLinkActive="active">Murder</a>
<a routerLink="/login" routerLinkActive="active">Login</a>
// other things
<div>
<router-outlet></router-outlet>
</div>
</div>
Update:
i made the router-outlet in login to:
<router-outlet name="regular"></router-outlet>
and outside:
<router-outlet name="aux"></router-outlet>
and changed my routing:
path: 'murder',
component: MurderComponent,
outlet: 'regular'
but when i navigate i get:
EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'murder'
how come?
full code routing:
RouterModule.forRoot([
{
path: 'login',
component: LoginhandlerComponent,
outlet: 'aux'
},
{
path: 'murder',
component: MurderComponent,
outlet: 'regular'
},
]
)
You need add outlet to your router link. Try like this:
<a [routerLink]="['/', {outlets: {'regular': 'murder'}}]" routerLinkActive="active">Murder</a>