I'm trying to do a simple thing with AngularJS and Bootstrap 3. I'm learning now and I tried to do this and I searched and I can't find any conclusion.
I have an HTML page with 3 different buttons. Each buttons redirect us to another page that is the same. I want to send to this page a different value depending on which button I used.
I read this thread Angular.js pass value from select to another view
But I'm not sure if this is the best way.
<ul class="list-inline">
<li ui-route="/signup/role1">
<button class="btn btn-default">FooText</button>
</li>
<li ui-route="/signup/role2">
<button class="btn btn-default">FooText</button>
</li>
<li ui-route="/signup/role3">
<button class="btn btn-default">FooText</button>
</li>
</ul>
Thank you to everybody
I think this is the recommanded way. Pass the value in param and extract param on another page.
Other way is to create const but i wont recommend you this if you need to do this process many time and i think its short of hack to use const for this process.
Related
What I want to do is to read the path as indicated with the #page attribute of every Razor Page, to link to it in the Nav Menu. With the purpose of not having to manually redo a href when for whatever reason I want to change the url.
I did however not find a way to read the page attribute from components, am I missing something or is there another way of doing this?
Just to visualise what I want, this is how it should roughly look in the end:
<div class="nav-item px-3">
<NavLink class="nav-link" href=UploadPage.page>
<span class="oi oi-data-transfer-upload" aria-hidden="true"></span> Content Upload
</NavLink>
</div>
The blazor framework doesn't expose any public APIs* to do what you want. You could perhaps post on github as a feature request.
*Internally, a route table is generated by scanning your assembilies for RouteAttribute.
Having said that, there is this blog post about using source generators to read the RouteAttribute of each component and generate the nav menu for you. Unfortunately, in order to use it, you have to turn off razor source generation to do it currently as source generators cannot see the output of other source generators. Hopefully in the future, we will be able to use source generators with the razor compiler (Here is the issue tracking it).
Thanks to the input by Jesse Good I found the following relatively simple answer to my problem, using reflection.
The Navmenu:
<div class="nav-item px-3">
<NavLink class="nav-link" href="#(PathTo<MyRazorPage>())">
<span class="oi oi-book" aria-hidden="true"></span> My ePaper
</NavLink>
</div>
The resolving Function:
private string PathTo<T>()
{
var attributes = typeof(T).GetCustomAttributes(typeof(Microsoft.AspNetCore.Components.RouteAttribute), inherit: false);
var route = (Microsoft.AspNetCore.Components.RouteAttribute) attributes[0];
return route.Template;
}
<ul>
<li data-info="Amount in (₹)">{{depositeAmt}}</li>
<li data-info="Status">
<button class="statusbtn Process" data-bs-toggle="collapse" data-bs-target="#collapseExample1" >{{status}}</button>
</li>
</ul>
<div class="newClass collapse" id="collapseExample1{{i}}">
where i is defined in ts file as i:number=1;
To add an attribute using an expresion or variable you can use
[attr.name-of-attribute]="expresion"
e.g.
[attr.data-bs-target]="'#collapseExample'+i"
But I don't know if you can use with bootstrap to create a collapse
I think this is very similar to the answer provided in this case:
Please, see it and let me know if it is working for you.
I am writing a web application and am trying to decide whether it would be more semantically correct to use buttons or anchors in the following example:
<ul id="parent-list">
<li id="parent-1" class="parent-list-item" value="1">
<ul class="child-list">
<li value="OPTION1" class="">
OPTION1
</li>
<li value="OPTION2" class="">
OPTION2
</li>
<li value="OPTION3" class="selected-child-list-item">
OPTION3
<span class="selected-child-span">✓</span>
</li>
</ul>
</li>
<li id="parent-2" class="parent-list-item" value="2">
<ul class="child-list">
<li value="OPTION4" class="">
OPTION4
</li>
</ul>
</li>
...etc
</ul>
Each time an anchor is pressed, an onClick handler is called and a query is issued to our backend to retrieve all of the data matching the corresponding filters. Once the query returns, the frontend is updated to display this new information. The page does not reload, the frontend is updated dynamically (using react/redux to handle state changes).
Is there any reason I should be using anchors instead of buttons here?
Since you are not linking anywhere, you shouldn't use a link.
That said, if you were writing unobtrusive JavaScript, you would be linking to a server-side fallback for when the JS failed in which case you should use links.
Based on your description, buttons should be used. A screen reader user, when they hear "button", will think that some action is going to be performed. When they hear "link", then some kind of navigation will be performed. It sounds like you are performing an action and not navigation.
If you plan on using role="button" on your <a> tags, remember to add a keyboard handler so the user can press the Space key on your link to activate it since a "button" element implies both the Space and Enter keys will work. If possible, use a native <button> because then it'll be handled for you.
the frontend is updated dynamically
Is there any reason I should be using anchors instead of buttons here?
Does the focus move somewhere else ?
Yes : it's a link
No : it's a button
If you use javascript to emulate a page change, then yes, you can use anchors as long as the user perceive a page change or move within the page.
Is there a way to link to a form using only HTML/CSS? I am still a beginner in web dev and have not yet started on JavaScript or JQuery.
So what I want to do is,
<div>
<ul>
<a href="??" target="_parent">
<li class="toggle1">Guest</li>
</a>
<a href="??">
<li class="toggle2">Owner</li>
</a>
</ul>
</div>
...in the tags in the I want to link to a form which has elements like First name, Last name etc, such that when I click on "Guest" the form for the guest should appear and likewise for "Owner"
There is! Make the href tags to #guestform and #ownerform. Then, make each form's id attribute those values (guestform and ownerform). This looks like so:
<div>
<ul>
<a href="#guestform">
<li class="toggle1">Guest</li>
</a>
<a href="#ownerform">
<li class="toggle2">Owner</li>
</a>
</ul>
</div>
<form id="guestform">...</form>
<form id="ownerform">...</form>
Then, in the css, do the following:
form {
display:none;
}
form:target {
display:block;
}
Hope this helped you!
EDIT: As sdcr said, the a tag should be inside the li, and not the other way around for it to be semantically correct. It should be like this instead
<div>
<ul>
<li class="toggle1">
Guest
</li>
<li class="toggle2">
Owner
</li>
</ul>
</div>
I may have misinterpreted your answer based on the lack of information given.
If you don't care who the end user is, and make both forums accessable to them no matter if they're a guest or owner, you'd simply create another HTML document and link to that document (provided that your web server can serves "static" content).
For instance, say you created another file called owner_form.html and somewhere within the body, you had:
<form>
...
</form>
From your index.html you could link to owner_form.html via a <a> tag like this:
... Contents that will redirect you
(old answer)
No, this is not possible in only HTML and CSS. Not even (securely & validly) with JavaScript.
HTML and CSS don't have the ability to differentiate the client using the page on their own. And JavaScript can't securely do this either.
You should look into server-side programming. This is where the magic would happen for you. You can try many different frameworks / scripting languages that have web-server functionality to them, for instance, some of the popular ones are:
Ruby on Rails
PHP
NodeJS
Django
My application is using JQTouch. The demos show how to GET an html file and display it in the user interface, but I'm loading JSON that I would like to use in a pre-existing DIV. I don't want to create a separate people.html and generate that on the server.
So I have a DIV like this that I would like to load my list of people into the UL.
<div id="people">
<div class="toolbar">
<h1>People</h1>
Back
</div>
<ul class="rounded">
<li class="sep">F</li>
<li>Flintstone, <em>Fred</em></li>
<li>Flintstone, <em>Pebble</em></li>
<li>Flintstone, <em>Wilma</em></li>
<li class="sep">J</li>
<li>Jetson, <em>Elroy</em></li>
<li>Jetson, <em>George</em></li>
<li>Jetson, <em>Jane</em></li>
<li>Jetson, <em>Judy</em></li>
</ul>
</div>
This page is loaded from the start of my application with code that looks like this (it's all in the same HTML page):
..snip..
<li class="arrow">View all</li>
..snip..
What do I need to do to call my people.aspx service which returns JSON? I think I need to use $.getJSON, create a UL from the JSON, and then call something in jqtouch to transition to my people application page (div).
I think you use the goTo function, e.g.
jQT.goTo("#people")
There's a jsfiddle demo here, but it doesn't test the jqTouch functionality.