Drop Down List With Search Button In Rails - ruby-on-rails

I have a customer model with the following collection:
#doctors = Customer.joins(:user).where(users: {role: User.roles[:doctor]})
which joins the user table and customer tables where user role is "doctor".
In my Customers index view currently I am listing all the customers, now I want to add a search filter using a Drop down list with a search button, where the list contains the first name of the Doctors. If I press the search button it should show only customers created by that particular doctor selected from the drop down list.
1. How to add a drop down list with search button which displays only first names of doctors ?
2. How to filter my customers listing when I select a particular doctor from the drop down and click on search button ?
<div class="btn-group">
<button type="button" class="btn btn-success btn-sm"><b>Search By Dr.</b></button>
<button type="button" class="btn btn-success btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>List All Customers</li>
<% #practices.each do |practice| %>
<li>Dr.<%= practice.firstname %></li>
<% end %>
</ul>
</div>
The above is the code that I am currently using, but is it correct way of Rails ?

Answer 1:
you can do this task using JS I will recommend you to use one of these jquery plugins for search bars Select2 and Chosen.
My personal experience with select2 is impressive.
it loads data via ajax and cache as well to avoid repeat calls. Its GUI give u a Google like feel. read its documentation and use it.
Answer 2:
select2 also give u events like change so u can make another ajax call to load filterd customers.

You can simply use the following tag in your rails view:
<%= select("doctor", "firstname", #doctors.all.collect(&:firstname)) %>
Then in your controller you'd have something like this:
def index
if params[:doctor]
#customers = Customer.joins(:user).where(users: {role: User.roles[:doctor]}, firstname: params[:doctor][:firstname].downcase)
else
#customers = Customer.all
end
end

You can do this auto_complete rails. Have a look on
http://railscasts.com/episodes/102-auto-complete-association
Thanks

Related

adding dynamic content to _Layout.vbhtml

So moving over to MVC finally from web forms
so within my main _Layout.vbhtml I have a menu as follows:
<i class="material-icons">person</i> Account
<ul>
<li>Sign In / Sign Up</li>
<li>Profile Page</li>
<li>Orders List</li>
<li>Order Detail</li>
<li>Wishlist <span class="badge badge-primary badge-pill">3</span></li>
<li>Address</li>
</ul>
I want this to now come from the DB dynamically
in the web forms world this would have been a master page, I would have then added a literal and then populated it on the page load in the code behind.
But how do I archive the same now in MVC
ended up doing this in _layout.html, works but unsure if its the correct way :-)
#Code
Dim listGroups As List(Of ProductGroups) = ProductGroups.MenuList()
End Code
then further down the page:
<li>
<i class="material-icons">shopping_cart</i> Shop
<ul>
#For Each item In listGroups
#<li>#Html.DisplayFor(Function(modelItem) item.Group)</li>
Next
</ul>
</li>
as I said does what i expect but not sure if that's how your 'supposed' to do it?

Hide some buttons for non authorized users in jquery datatable

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.

Rails 4 - How to save selections from different dropdown menus in one view and passing them to controller to receive corresponding data

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.

rails dynamic data hover over

I am trying to create a hover over action for items inside of a dynamically created loop. I have no idea what the object names are or how many there are. As of now, I have the list printed correctly and a hover over working, however the hover over only prints the info from the first item, no matter which one you are hovering over
<% #reward_definitions_with_user_points.each do |definition| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
For example: if the my list is a,b,c,d,e,f and I want the hover over to display each letter in sequence when activated. However it will display 'a' in the hoverover no matter which one the mouse activates.
You should probably mention that the problem you're having is with popovers. Also showing the html generated by your loop would be helpful. You seem to imply from the tags that popovers are an html5 thing, but I thought they were a part of twitter-bootstrap?
Having said all that...
What you are describing is clearly related to data-target="#point-tracker-popover". Which I believe is pointing to id="point-tracker-popover". The div with this id is being generated inside of your loop (having multiple elements with the same id is bad and is why you are experiencing the behavior you mentioned).
Changing your loop to use each_with_index should fix your problem.
<% #reward_definitions_with_user_points.each_with_index do |definition, index| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover-<%= index %>">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover-<%= index %>" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
Of course, you may be able to simply change the target to a class like data-target=".point-tracker-popover" and change the id="point-tracker-popover" to be class="point-tracker-popover"; which would be a much cleaner approach. I am really not familiar with popovers, though, so I cannot say if this is the only problem you have, or if the second approach will work.

Change <div> innerText from NestedMasted Page so that the Changed text remains throughout session

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.

Resources