Path For Nav Link Adds On - html

In my rails app I have a bootstrap nav menu with five items, each with a welcome/_____.html.erb document to which the menu item is linked (e.g. welcome/personality, welcome/game, etc.).
I put this as the link to the new page for the first menu item:
Know Your<br>Personality
And it works fine, but trying to click on the next menu item using the same href="welcome/game" link gives me an error message indicating it is trying to access welcome/welcome/game.
This is in my application.html.erb file, so it's not something I can change from page to page. Can anyone see a way to fix this issue?

You need to change your href to /welcome/personality. Notice the / in the front which tells your router to use the root_url and add what you have, otherwise it will keep adding /welcome/welcome/welcome...

Related

Change text of a Label in site.master from code-behind

I've got an asp.net webforms project with a Site.Master page that's ref'd by my content pages.
The header is:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="JT1.SiteMaster" %>
....
it includes a navbar with a few buttons and a label on the right like so:
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
<li><a runat="server" href="~/Login">Log In | Sign Up</a></li>
<li><p runat="server" class="navbar-text navbar-right">
<label runat="server" id="LoggedInUserID" >Logged Off</label>
</p></li>
All of the buttons show up and work properly, and the text "Logged Off" appears by default on all
pages that use the master.
From the Login.aspx.cs, I want to change the text of the "LoggedInUserID" label to something
appropriate, like "Welcome, Jim". This code is the best I've been able to come up with:
HtmlControl ctl = Master.FindControl("LoggedInUserID") as HtmlControl;
if (ctl != null) ctl.Attributes["InnerText"] = "Welcome " + firstname;
This actually finds the proper control, and I can see in the debugger that its InnerText is, in fact, "Logged Off". But my assignment to it does NOT work. No exception, no error, nothing.
I've perused lots of other similar questions and don't see anything I've not tried. Anyone have any ideas?
Well, the child page loads first, AND THEN the parent (master) page loads.
So, your code (if on a child page) would run, but THEN the master page loads, and your setting is lost.
However, lets assume we moved the code (and even a test button) to the master page.
When you click on that button, child page load, master page load, your button code runs, label gets set.
But, what happens now if you click on another menu bar item?
Turns out that AGAIN the master page loads. you can think of this as if you navigated to one page, and then navigated back to that page.
As a result, EVEN if you place a button + code in master page to "change" the Label? Well that will at least work + show the change, since master runs AFTER the child page.
However, that control ONLY going to persist now as long as you "stay" on that one master + child page.
This would be no different then if you had a button on the page. Setting label or text box. Such a page can survive post-backs no problem.
(controls have automatic viewstate with runat=server)
However, if we navigate to a new page, and then navigate back (not using back button), then that label setting will be lost (and this is how you have to consider the master page).
So, now that we "fixed" the above setting?
Well, we now have to consider if a new menu bar option is hit and now we navigate to a whole new master/child page.
In this navigation, the master page is re-loaded from start. So, once again, you would have to re-run that code.
Long story short?
You need to move that code into the page-load event of the master page.
I mean, a really "neat-o" kluge when you want to modify/change/update/show/see the main menu bar change?
You can execute (in child page that changed the menu "settings" - note I stated menu settings, since we STILL in theory have to change the mnu bar in master page. So, in this context, we might have changed some setting - but it would have to be session type of deal). Now, how to "see" this updated status/change in the nav bar?
You can do this:
response.Redirect("name of current page we on.aspx")
That will of course "force" a menu bar refresh. (kind of like hitting a different menu bar option, and then hitting the one we were on).
But, as noted, it only going to see such forced changes if the master page load event "changes" what it was doing in the first place.
(since with runat=server, you get viewstate for that control).
However, the instant you click on another menu item, you have to "consider" this a whole new brand new navigation to that page anyway.

Unable to add a link using <a> to a <li> tag

I have created a partial view which will show the menu with unordered list. I want to add links to each li element. I have done my research and tried different ways like giving relative path, absolute path etc. but it does not open the view page. It shows 404 error in browser.
Am I missing to add something in partial view which can then open the view page on clicking the li tag item.
<li>Powershell Comments</li>
Any guidance would be greatly appreciated.
You should change link like "/Controller/Action".
Code at the below will work fine if the names of action and controller are correct.
<li>Powershell Comments</li>
You should use #url.action() method.

How to share anchor links with angular components on angular 14?

I have a component menu which contains a few anchor tags. Each tag brings the user to that respective page section. I am trying to share the same anchor tag among the other components.
For example, I have two more HTML components called homepage.component.html and details.component.html. For each I call the menu.component.html by its selector. Both homepage and details html components have an id for the section I wanna scroll to. Here's how it looks like:
menu.component.html
Go to content
for both homepage.component.html and details.component.html
<div class="home-content" id="content"> Here comes more code </div>
It should work just like in a non-dynamic html project, however, when the anchor tag is clicked, the url redirects to '' (which is the first/default page) and then it shows the content for the first page, instead of the current componenet I am on.
I have tried creating a function where I get the current url and using the router.navigate, I pass the parameters indicating the fragment:
menu.component.ts
currentRoute: string
scrollToItem(){
this.currentRoute = this.router.url
this.router.navigate([this.currentRoute], {fragment: 'content'})
}
menu.component.html
<a (click)="scrollToItem()">Go to content</a>
However, this function adds the id #content to the url each time the anchor tag is clicked, redirecting the user to my 404 page.
I wanted to know if there is a way to use an anchor tag on the menu.componenet.html, while all the items that have "content" as their ids in different components are going to be displayed. Hopefully I made my question clear. If there is still questions about how the error occurs I can create and shate a stackblitz project. Thanks in advance :)

SSI $DOCUMENT_URI regular expression

I have a nav.shtml file in which I am setting a class on the current menu item as follows:
Faculty'>http://root/level1/level2/page.shtml">Faculty & Staff
This is fine for the top-level pages, but a few have subpages and I would like to be able to set the class on the top-level menu item if the current page is a subpage as well. E.g. There is a "Faculty/Staff" menu item which goes to an overview page, faculty.shtml, then there are some links on that page to individual faculty/staff pages in a subdirectory. If I'm looking at one of the individual subpages, I still want the class to get set on the "Faculty/Staff" menu item.
So, I need something like:
"if $DOCUMENT_URI=/level1/level2/page.shtml *or* if $DOCUMENT_URI=/level1/level2/level3/*.shtml".
I can't seem to figure out the correct syntax... Can anyone help me out?
The following should work for you, based on the example provided:
<!--#if expr="$DOCUMENT_URI = /\/level1\/level2\/page\.shtml/ || $DOCUMENT_URI = /\/level1\/level2\/level3\/.*.shtml/" -->

Choosing 'selected' menu item in WP collapsible mobile menu

Someone was able to so quickly help me with a problem I'd spent hours and hours on, that I'm hoping I'll get lucky and someone can point me in the right direction on this one, too.
I didn't see anyone else with quite my issue here - and I'm new to working with WP templates instead of plain old HTML/CSS/JS stuff.
Basically - on a site we did (www.opted.org) with a purchased WP theme - I can't get the mobile version collapsible menu to stop defaulting on page load to the last item in the Main Menu.
So instead of something that makes sense - like About ASCO, or even being able to add "Select Page" - the drop down shows "-- past issues"
I don't care how I fix it really, but the client just doesn't want that page to be the default. I tried adding an extra menu item at the end called "Select Page" with an href='#' and using CSS to hide it on screens above 480px - but I couldn't get it to work no matter how I tried to refer to it.
I feel like this should be easy - but I don't know where to set the selected LI among the many WP files.
Thanks!!
I had a look at the plugin.js file on the site www.opted.org.
On line 22, there is 'header' : false // Boolean: Show header instead of the active item
and on line 41 there is jQuery('<option/>').text('Navigation')
Try setting line 22 to true, and text('Navigation') to your 'Select Page' if you prefer that over the text 'Navigation'
Or, according to the tinynav.js page (http://tinynav.viljamis.com/), you can customize that as an option like this:
$("#nav").tinyNav({
active: 'selected', // String: Set the "active" class
header: 'Navigation', // String: Specify text for "header" and show header instead of the active item
label: '' // String: Sets the <label> text for the <select> (if not set, no label will be added)
});
In your main.js file, your calling it on line 14. You should add that header: 'Navigation', option there.
It's hard to answer this question without knowing how the theme you are using works. However, you can certainly change the selected attribute using javascript.
Here's the code you would use to set it to 'About Asco' using jQuery:
jQuery('.tinynav').val('/about-asco/')
alternatively (a little clearer, but more verbose):
jQuery('.tinynav option:first').prop('selected', true);