I want to change the inner text value of a div that is located on my site.master page, and I want the changed value to remain for the rest of the session.
The value I want to pull through is the User name that is obtained from OAuth
By Using: User.Identity.Name;
I can only access this property once a user has authenticated, based on my redirect after authentication the page then moves to a nested master page for the members_only section.
I can change the text of the div with this code:
((HtmlGenericControl)Master.Master.FindControl("LoginButton")).InnerText = User.Identity.Name;
But as soon as I redirect, the text changes back to null.
I use it for my bootstrap user button which looks like this
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> <div id="LoginButton" runat="server"></div></a><a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a><ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Manage</li>
<li class="divider"></li>
<li><i class="i"></i>Logout</li>
</ul>
</div>
Any advice would be greatly appreciated.
You could just use the LoginName control to do all that for you - just drop it into your MasterPage.
Related
I have a table with sliders (part of a form) in one column and a button (link to other page)
<button onclick="location.href='/main';">
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</button>
Instead of opening the page, the button just submits the form. Any way I can fix this without breaking the table or the form?
Why don't just use anchor tag
<a href='/main'>
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</a>
or
# If you are using erb
<%= link_to '/main' do %>
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
<% end %>
try below code:
<a href='/main' class="btn btn-primary">
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</a>
If you used bootstrap css then you can add classes btn and btn-paimary which makes button.
Instead of opening the page, the button just submits the form.
Yes! Buttons are meant to perform actions that effects on front-end or back-end, they are not meant for navigation. You should use links(a.k.a anchors) to perform navigation.
<a href='/main'>
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</a>
I have a button which is using angular-ui-bootstrap dropdown and a vanilla text input. Once the page loads, I can freely enter text into the input box. However, after clicking the button, I can no longer focus on the input box: focus continually jumps back to the dropdown button.
How do I fix this problem, or have I hit a bug (and I should raise an issue)?
Here is a simple example using code directly from angular-ui-bootstrap:
https://plnkr.co/edit/JbXo3WfLgrHoXcyC2If4?p=preview
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
<input type="text">
</div>
FWIW, this seems to be the offending function call: https://github.com/angular-ui/bootstrap/blob/7a1d54c8c34265e0e1b7ac1b38f58b5867a2af49/src/dropdown/dropdown.js#L108
Looks like you found an already found bug. Someone raised an issue for the ui-dropdown focus already...please check this link: https://github.com/angular-ui/bootstrap/issues/6372 and also this one which describes your issue: https://github.com/angular-ui/bootstrap/issues/6364
I am using jQuery datatable in my Asp.net MVC project. In any row in datatable I have dropdown-menu for some operations like below:
I want to hide some buttons in this dropdown for non-authorized users.
My js code for add this drop-down menu is:
{
data: 'UserId',
name: 'UserId',
render: function (data) {
return '<div class="btn-group btn-group-sm operation"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">عملیات <span class="fa fa-caret-down"></span></button> <ul class="dropdown-menu"> <li><span class="fa fa-pencil"></span>ویرایش</li> <li><span class="fa fa-gift"></span>امتیاز هدیه</li> <li><span class="fa fa-area-chart"></span>گزارش ریز امتیازات</li> <li class="divider"></li><li><span class="fa fa-trash"></span>حذف</li></ul> </div>';
},
orderable: false
}
I use Asp.net Identity in this project.
How can I do this?
Thanks in advance
Add classes to each button that correspond to the security roles that are allowed to use them. Start with all buttons hidden, then show the buttons that have the classes that correspond to the role(s) authorized for the current userid.
Something like this:
<button class="admin">Admin Stuff</button>
<button class="admin super">Superuser Stuff</button>
<button class="admin super normal">Normal Stuff</button>
<button class="admin super normal guest">Guest Stuff</button>
And then, when you open the page:
$(document).ready(function () {
$('button').hide();
// find the role of the current user
$('.' + theRole).show();
});
This example assumes that the names of the security roles are the same names as the classes you added to the buttons. That's the easiest, because it only requires the one line of code. If you can't do that for some reason, you have to use if else statements to determine which role the user is in, and show whichever class is equivalent to the role.
I'm very new to Rails and have just started to create my first app. this question may sound a little weird.
So i have two drop down menus, Year and Region, they each have some selections. i have an articles controller and model to store some info. I'm trying to make this action work:
first make a selection from "Year", say 2014. As soon as i click on 2014 i want to display all the articles from the database with the year 2014
then, while the "Year" dropdown menu is still in 2014, I make a selection in the "Region" dropdown menu, say US, and have the view display articles that belongs to 2014 and US.
is it possible to do all the above without using ajax?
here's my view code for articles/index
<!-- Region -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Region
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><%= link_to "All Regions", ?????_article_path(???) %></li>
<% #articles.each do |article| %>
<li>
<%= link_to article.region, ?????_article_path(???)%>
</li>
<%end%>
</ul>
</div>
<!-- Years -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Year
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><%= link_to "All Years", ?????_article_path(???) %></li>
<% #articles.each do |article| %>
<li>
<%= link_to article.year, ?????_article_path(???)%>
</li>
<%end%>
</ul>
</div>
here's my ArticlesController, it just have one index method
class ArticlesController < ApplicationController
def index
#articles = Article.all
end
So i thought about putting another method in there called selection but i'm not sure how to pass the second dropdown menu's selection.
If you want to actively get the articles from the database, you need AJAX. In case you are OK with loading the articles together with the view, you can simply store them as a pre-fetched JSON object like this:
<script>
var articles = <%= raw #articles.to_json %>;alert(articles);
</script>
And then either manually go through this JS object.
Tip: to have more control over displaying and rendering of JS objects, install backbone.js (http://backbonejs.org/), install backbone.js query (https://github.com/davidgtonge/backbone_query) make a articles Backbone model (tutorials on backbone.js page are really simple and helpful), articles_collection Backbone collection, query it the way you want, and then make HTML code via Javascript and paste it on the page. I prefer using Backbone.js underscore.js templates for that, they are an excellent tool to master.
I'm working on a view. The view has a dropdown menu and i want to add other fields to the view, depending on the index i selected in the dropdown.
http://abload.de/image.php?img=unbenanntcajcc.png
at ... i want to show other stuff like textfields. (i'm using bootstrap for styling)
thats the code:
<div class="col-md-4">
<div style="height: 452px; overflow: auto">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Select a Filter <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>First name</li>
<li>Last name</li>
<li>Occupation</li>
<li>Location: Birth</li>
<li>Location: Marriage</li>
<li>Location: Death</li>
<li>Location: Burial</li>
<li>Time: Birth</li>
<li>Time: Marriage</li>
<li>Time: Death</li>
<li>Time: Burial</li>
<li>Relatives </li>
</ul>
</div>
<br />
...
<br />
<button type="button" class="btn btn-success">+</button>
<br />
<br />
<button type="button" class="btn btn-default">Add filter</button>
</div>
You want something like this:
add classes to your different anchor tags in the dropdown menu like so:
<ul class="dropdown-menu" role="menu">
<li><a class="firstname" href="#">First name</a></li>
</ul>
<div class="stuffIwanttoadd"></div>
Then in a javascript file have something like:
$("a.firstname").click(function(event) {
event.preventDefault();
$("div.stuffIwanttoadd").innerHTML="<p>Here is some stuff I want to add</p>";
});
and do that for each element of the list (you should wrap the javascript in a function to make this easier).
EDIT: to get the javascript to run you'll need to attach it to the page, this means registering it in a window.onpageload event (or something like that) assuming you are using turbolinks you're going to want to do that like this:
var initFunc = function() {
// everything you want to attach to the dom goes in initFunc
$("a.firstname").click(function(event) {
event.preventDefault();
$("div.stuffIwanttoadd").innerHTML="<p>Here is some stuff I want to add</p>";
});
};
$(document).ready(initFunc);
$(window).bind('page:change', initFunc);