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.
Related
I am looking for a way to go from my navigational links using voice-over accessibility to jump to the internal part of the page that link I connected to.
For example:
I have a list of links on my left-hand side. One is for Forms. When I click on "Forms" my list of forms will populate to the right of that panel, and then if you click on a specific form, that Form will appear to the right of that panel. The page contains 3 panels with Navigation on the left, list in the middle, Form on the right.
Right now if I click on the Form link, I have to tab through my entire nav panel to get to the newly opened Forms list.
Are there some ARIA elements I am missing that will help tab directly into my Forms List from the Forms link?
There are two simple ways to do this.
Note that neither of the following ways need any aria to work, the aria in the following examples is purely for best practices when adding sections and headings to a page.
Option 1 - anchors
The first is using anchors pointing to ids on the page.
in your side bar
forms
main page section
<section aria-labelledby="forms">
<h2 id="forms">Forms</h2>
<!---your forms --->
</section>
Notice how I gave the page content a heading (pick an appropriate heading level) and then labelled the section with aria-labelledby. None of this is required to make this method work but it is a good practice.
The only thing you need to do is to make sure your href matches the ID of the heading.
However given that you are populating the forms on the right side of the page (I am assuming with an AJAX call) you may want to manually manage focus with JavaScript....
Option 2 - Use JavaScript and .focus()
If you are using JavaScript it is a similar principle, give the section heading an ID, but this time once the forms list has loaded set focus on the list heading.
html
<!--your link in the menu -->
forms
<!--section on the page, I omitted the aria here for clarity / simplicity but it is still needed-->
<section>
<h2 id="forms" tabindex="-1">Forms</h2>
</section>
JavaScript
// start: however you have this implemented at the moment
const formsLink = document.querySelector("#getForms");
formsLink.addEventListener('click', function(e){
e.preventDefault();
get('yourURL').then((data) => {
// populate the list
list.update(data);
// end: however you have this implemented at the moment
// once the list is populated set focus on the heading (last thing to do after everything else is done)
document.querySelector('#forms').focus();
});
});
Notice how in this example the <h2> has a tabindex="-1".
We need this to allow programmatic focus. We use -1 so we can focus the heading via JavaScript but it does not get added to the page focus order (so you can't access it with Tab).
I am writing a suite of automated UI tests. I have a set of tests that verifies the links in a navbar work correctly, they take an annoying long time because it's loading 2 pages per test and there are many links in the nav bar. I am wondering if it is necessary to actually click the links?
One of the links would look like this, they're all basically the same, all contained inside a list of of <li> elements:
<a href="/projects/7d9162e5-e59c-452e-b9f5-684a2e0f2924/home" data-reactid=".0.2.0.0.0.$0.0">
<span class="icon icon-home" data-reactid=".0.2.0.0.0.$0.0.0"></span>
<span class="label" data-reactid=".0.2.0.0.0.$0.0.1">Home</span>
</a>
I could grab the content from the href attribute and request the page programmatically (don't load it in the browser) to assert that the href is correct and this would be significantly faster.
Is there any chance that an element could have an href attribute that points to the page as expected, but for whatever reason clicking on this element could be broken?
This might be the solution that you are looking for:
Link to Page
That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:
$("a").click(function(e) {
$("body").append($(this).attr("href"));
e.preventDefault();
}
By taking the href content, you might risk that your automation passes test even though the navbar link does not work. It could be that navbar link was disabled by mistake, but as the link is still present in the DOM your automation will not capture it.
Just my 10 cents...
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...
Hi sorry if this a daft question (newbie), I am currently using mediawiki-1.23.1 and have been looking for a way in which to create it easy for an end user to create a page. However I would love to be able to have a link auto-created/auto populate on the current page. I currently use the InputBox extension. But it doesn't seem to allow this additional function from my research. Is this a possibility through extensions, or will this have to be done via a custom php template?
current InputBox details.
<inputbox>
type=create
width=24
break=no
buttonlabel=Create new page
</inputbox>
Any help or direction would be really appreciated.
It is impossible to create a link from page A to page B automatically if you don't "mark" something on page B. And the simplest thing you can mark is "[[Category:...]]", like Bergi said. I will use preloaded text to make it easier.
What you need
If you want page in main namespace to be the page where end users type in InputBox, you need any extension that will show content of category page such as Extension:CategoryTree, or Extension:Dynamic Page List (see also Transclude a category in MediaWiki).
Steps
On page [[Template:PreloadedText]]
Put the following content
<!-- Do not edit under this line -->
<includeonly>[[Category:CreatedFromPageA]]</includeonly>
On page [[A]]
Put the following content
<!-- Show all pages in [[Category:CreatedFromPageA]] -->
<!-- Assuming you use Extension:CategoryTree -->
<categorytree hideroot="true" namespaces="-">CreatedFromPageA</categorytree>
<!-- InputBox -->
<inputbox>
type=create
width=24
break=no
buttonlabel=Create new page
preload=Template:PreloadedText
</inputbox>
For end users
On page [[A]], they will see every page that was created via the InputBox at the top. At the bottom, they will see the InputBox. After typing pagename and clicking the button, they will be brought to the page they typed. There will be the following text existing already
<!-- Do not edit under this line -->
[[Category:CreatedFromPageA]]
As long as they don't bother with these lines, after they click save, the new page will appear on the list automatically.
when you click on a link that goes to same page where the link is, how to keep the view of the page?
By default it goes to the top of the same page.
Regards
Javier
One way to do it is to add # at the end of the href attribute on the links pointing to the current page, either manually or via javascript. I don't think it's a nice way to do it, though...
If you really need this, you could also "disable" the navigation for links pointing to the current page, so that clicking on a link to the current page would have no action...
Something like that should work in jQuery :
$('a.current').click(function(event){
//cancel default click action
event.preventDefault();
}
assuming that the links pointing to the current page have the CSS class current
Can you be more specific? What do you mean with "view of the page"?
Here is a general description of anchors:
If you have a link Link then you need an element on the same page with id="someTarget". When you then click on the link, that element will be scrolled to the top of the element.
EDIT:
Ahm, you are talking about a JavaScript link. In that case you need to have the Javascript retur false so that the default action (namely following the link) is ignored:
<a href="#" ... onClick="myJqueryFunction(); return false;">