I am having some issues in next.js when clicking on a navigation buttons and redirecting to a new page.
I have navigation with links like this one below:
<button key={index}>
<a
href={url}
>
{text}
</a>
</button>
For example, route where element points is /about. When I click on a button, "about" page will flash for a second or less and after that redirect to that page will happen. I cannot figure why is that happening
Thanks in advance!
you should use the built-in component of nextjs to navigate on the client side see: next/link
<Link href="/about">about<Link>
Related
I have the following:
<ng-template ngbTabTitle>
<span title="{{p.name}}">#{{pi+1}}</span>
<button type="..." (click)="removePackage($event, pi)">R</button>
</ng-template>
But when the user clicks the button, it redirects the user back to the root route (the home route).
In the removePackage() method, I have attempted to stop propagation using event.stopPropagation(), but that doesn't seem to have helped.
Can someone tell me how to add a button (or anything clickable) in the tab title, without re-directing the user?
Call preventDefault() on the event.
Demo
I have two sections of html in my main (app.component.html) view - one for navigation bar of buttons which navigates to child pages and the other section is to display a table of records. When select a record of the table I expect the details page of the record should display in the router-outlet but the table should be disappeared. But the details page is displaying down the table while I expect the table of records should disappear when the app is routed to a child page (details page). Any help how to achieve this would be appreciated.
here is my code:
<div class="navbar bg-inverse">
<div class="container">
Home
<a routerLink="/general" routerLinkActive="active" class="navbar-brand">General</a>
<a routerLink="/financial" routerLinkActive="active" class="navbar-brand">Financial</a>
<a routerLink="/termsheet" routerLinkActive="active" class="navbar-brand">Term Sheet</a>
<a routerLink="/capitalization" routerLinkActive="active" class="navbar-brand">Capitalization</a>
</div>
</div>
<!--I don't want below section of the main displaying when routed to child page
<h1>table of records here</h1>
<router-outlet></router-outlet>
Thanks
yesp.
Your idea of putting the table section in a separate component looks working, but the pagination logic which is moved from app.component.ts to dashboard.ts was broke and a click on next page (goes to next page but immediately within a second it's coming back to page 1 agian) is not working now. Anyway i will look into the pagination issue and get back to the board in case the issue persists. Thanks for your help!
Thanks
yesp
I need to set HREF attribute of an anchor tag to work in all URLs like "/" and "/Home" and "/Home/Index" to scroll in top of a div.
the problem is if i set that to "/Home/Index#ToTop" and someone click on that anchor tag, he/she will redirect from "/" or "/Home" to "/Home/Index#ToTop" that is not very nice!
any idea?
If you just want to scroll to the top <a href="#"> will bring you back to the top of the page.
If you want to scroll to an element that's somewhere on the page use <a href="#id-of-div"> so without the /Home/foo/bar stuff.
See also: What is href="#" and why is it used?
Edit based on comment
So you want the link to scroll to top of home page if you're still on the homepage without redirect, and you want the link to redirect you to home page and scroll to top of it, if you're not on the home page?
I think you've to create a different link depending on the page you're on.
So if user is yoursite.com/home, the link will be <a href="#id-of-div"> and if user is yoursite.com/foo/bar the link will be <a href="./Home/Index#id-of-div">
You can determine the current URL in the controller. Quick search on SO gives me:
How to get current page URL in MVC 3
In .NET MVC, is there an easy way to check if I'm on the home page?
It's been a while since I've worked with MVC, so I can only help with some old memories and quick searching
Anchor Tag Helper in ASP.NET Core
You can use "asp-fragment"
<a asp-controller="Speaker" asp-action="Evaluations" asp-fragment="SpeakerEvaluations">Speaker Evaluations</a>
The generated HTML is:
Speaker Evaluations
So here is code to show the mdl menu. They click the edit button and then a menu appears.
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" id="edit-button"> edit</button>
<ul id="edit_menu" class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="edit-button">
<li>change</li>
<li>do something else</li>
</ul>
Unfortunately the drop down no longer works when the user clicks the back button to the page with the drop down. I can't seem to reinitialize MDL. If i click on a link in the menu and then hit the back button, the drop down will be left open. Any ideas?
Related issue was that turbolinks breaks the MDL stuff but this code fixes it. Unfortunately it does not fix the drop down when a user hits the back button
document.addEventListener 'turbolinks:load', ->
componentHandler.upgradeDom();
This was my workaround solution to solve the problem. It was only happening for 1 specific page so I found a unique string in the URL and then overrode the back button to do a turbolinks visit.
window.addEventListener "popstate", (e)->
if (e.target.location.pathname.indexOf('customize_board') != -1 )
Turbolinks.visit( e.target.location)
I hope that at least can help someone out so their page isn't broken.
I was experiencing the same issue. Apparently this happens only when using the back button (not the forward button). My workaround was to add a javascript file with the following content
document.addEventListener "turbolinks:load", ->
componentHandler.upgradeDom()
#addEventListener "popstate", (e)->
Turbolinks.visit(e.target.location)
This actually fixed my issue
<meta name="turbolinks-cache-control" content="no-cache">
Any browser. All other functions operate as normal. I can traverse routes, open modals, dropdowns, manipulate collections... everything works.
But at some point, the browser will no longer scroll. In any view. Unless I refresh the browser window. Then scrolling goes back to normal.
What might cause this? Why does refreshing the page fix the issue? Is there a method to smack reactivity upside the head?
This is likely due to navigating away from a (Bootstrap ?) modal without properly closing it.
When you show up a modal in HTML5 frameworks, they usualy display a backdrop (some kind of fullscreen grayed out component) and disable scrolling to simulate desktop experience.
You can solve this problem using a simple iron:router pattern, if you're not using this package, be sure to execute the corresponding code whenever you navigate away from a page where a modal might get shown.
client/views/modal/modal.html
<template name="modal">
<div id="modal" class="modal fade">
...
</div>
</template>
<template name="main">
{{> modal}}
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
Show Modal
</button>
</template>
client/config/router.js :
// define the plugin
Iron.Router.plugins.hideBootstrapModalOnStop=function(router,options){
router.onStop(function(){
// hide modal backdrop on route change
$(".modal-backdrop").remove();
// remove modal-open state on body
$("body").removeClass("modal-open");
});
};
// activate the plugin
Router.plugin("hideBootstrapModalOnStop");
The .modal-open class set on the HTML body tag is the one disabling scrolling when it is set, so by making sure that we remove that class whenever we navigate away from a page when a modal is possibly shown, we prevent this weird unexpected behavior to happen.