We Keep Coding

Web2py Drop down menu that filters

New to html/javascript/web2py, but I been reading a lot and saw many different ways into sorting and some ways to filtering. However, I haven't found something that is similar to mine.
Right now, I'm creating a website that is similar to Craigslist where you can post items and I'm attempting to make a drop down menu that can filter. For an example, if I click car, it will only show posts that has the keyword Car in the category.
Right now, you can create a post and (IS_IN_SET) will already have the categories there for you. However, this is where I'm getting lost. I'm not sure how to get the keywords from (IS_IN_SET) so I am able to use those words to filter.
This is in db.py
db.define_table('posts',
Field('title', requires=IS_NOT_EMPTY()),
Field('interests'),
Field('category', requires=IS_IN_SET(['Computer', 'Electronics', 'Cars', 'Video Games'])),
In my default/index, I created
<select>
<option value='0'>(Select Category)</option><!--added-->
<option value="Computer">Computer</option>
<option value="Electronics">Electronics</option>
<option value="Cars">Cars</option>
<option value="Video Games">Video Games</option>
</select>
But I don't know where to go from here.
I read that you can use IS_IN_DB to create a drop down filter list.
I tried using, but I'm pretty sure this is wrong....
db.category.requires=IS_IN_DB(db,'category.id','%(Tcategory)s')
Looking for any advice/tips in trying to solve this problem.
Thank you.

Here is a solution that shows the power and simplicity of Web2py. I also added a form to enter new posts. Tested.
IN MODEL (models/posts.py):
post_categories = ['Computer', 'Electronics', 'Cars', 'Video Games']
db.define_table('posts',
Field('title', requires=IS_NOT_EMPTY()),
Field('interests'),
Field('category', requires=IS_IN_SET(post_categories)),
Field('body', "text")
)
IN VIEW (views/default/posts.html):
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
{{include 'web2py_ajax.html'}}
<div>
<select id="post-select">
<option value='0'>(Select Category)</option>
{{for item in post_categories:}}
<option value="{{=item}}">{{=item}}</option>
{{pass}}
</select>
</div>
{{=form}}
{{=LOAD('default','posts_load', vars=dict(category=item_selected), target='posts-ajax', ajax=True)}}
<script>
$(document).ready(function() {
// pre-sets the option
$('#post-select option[value="{{=item_selected}}"]').attr('selected', 'selected');
$('#post-select').change(function(event) {
var itemSelected = $(this).val();
var urlOfLoadedComponent = "{{=URL(c='default', f='posts_load')}}";
/* either one of these works but the first is better because it uses ajax */
// refreshes the component with the new subset of records
web2py_component( urlOfLoadedComponent + '?category=' + itemSelected, target='posts-ajax');
//window.location.replace('http:/localhost/posts?category=' + itemSelected);
});
});
</script>
IN VIEW (views/default/posts_load.html):
{{for post in post_rows:}}
<div class="post">
Title: <div class="post_title">{{=post.title}}</div>
Post: <blockquote class="post_body">{{=post.body}}</blockquote>
</div>
{{pass}}
IN CONTROLLER (controllers/default.py):
"""
Usage:
http:/localhost/default/posts
-- or --
http:/localhost/default/posts?category=Computer
"""
def posts():
# if category is specified in the url vars, use it otherwise use 'Computer'
item_selected = request.vars.get('category', 'Computer')
# or you could use the first one in the list:
#item_selected = request.vars.get('category', post_categories[0])
"""
creates the form
processes new posts; posts() function called again on form submit via ajax
the response.js refreshes form after ajax post
"""
form=SQLFORM(db.posts).process()
response.js = "jQuery('#posts-ajax').get(0).reload();"
"""
you don't need to pass "post_categories = post_categories" in the dict
because the view can see the variables defined in the models it runs
"""
return dict(
form = form,
item_selected = item_selected
)
def posts_load():
category = request.vars.get('category', '')
if category:
post_rows = db(db.posts.category==category).select()
else:
post_rows = db(db.posts).select()
return post_rows

Best way to bind data to an onchange of a select element using rivets

I have a page with an array with some books titles and prices, and I populated a select with the books titles. I am using rivets to select items and show the selected items below.
My dropdown select list is working. But it does not show the selected item below the dropdown list OR said in other words I want to bind the onchange event of the select to the current item on the array.
Is that possible? If so how?
I searched the internet but there is almost no resources for learning rivets. This is my code:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Rivets test</title>
<script src="../js/rivets.js"></script>
</head>
<body>
<h3>Livros no saraiva.com.br</h3>
<select id="select">
<option rv-each-book="books">{book.title}</option>
</select>
<br><br>
<div id="contents">
<strong>Título:</strong> <span>{book.title}</span><br>
<strong>Valor:</strong> <span>{book.price}</span>
</div>
<script>
var s = document.getElementById('select'),
books = [
{
"title": "Como treinar o seu dragão",
"price": 29.90
},
{
"title": "Livro de colorir mangá",
"price": 17.40
},
{
"title": "Heróis para colorir",
"price": 27.90
},
{
"title": "O pequeno príncipe",
"price": 17.70
},
{
"title": "Guerra civil",
"price": 21.70
}
];
rivets.bind(s, {"books": books});
</script>
</body>
</html>
What would be the best way to bind the onchange to the view using rivets?

you can add rv-value to the select tag and to the options tag , because the literals only displays the value from the model property ,as below :
<select rv-value="data.selectedBook">
<option rv-each-book="books" rv-value="book.title">{ book.title }</option>
</select>
//and display the binded value as following:
<strong>Título:</strong> <span>{data.selectedBook}</span>
I hope it helps!

you have to use some of the Rivets events handlers, for example:
<button rv-on-click="clickHandler">Remove</button>
Then you need to have a method in your model called clickHandler, like this:
var model = {
items: [1,2,3,4,5],
clickHandler: function(e){
//handler code
}
};
Here's a blog post using different Rivets features (in spanish but you will understand the code samples).
http://www.leomicheloni.com/post/2014/04/26/Automatic-html-binding-con-Rivetsjs.aspx
Hope it helps.

use jquery variable in # block razor

I'm strugling with a jquery script inside a cshtml page. For short my question is how to use a var inside a # statement in a cshtml page?
below an example of what I'm trying:
<select id="DefaultText">
<option value="-1">-- select --</option>
#foreach( var d in Model.DefaultTexts )
{
<option value="#d.Id" >#d.Name</option>
}
</select>
<script type="text/javascript">
$('#DefaultText').change(function () {
var id = parseInt($('#DefaultText :selected').val());
var text = #Model.DefaultTexts.First( t => t.Id == id );
$('#CustomProductText').val(text);
});
</script>
I can't reach the var id. It's out of scope. I've also tryed it with a for loop and a if statement. But in the if statement I get the same error: out of scope.
The full story is this:
On my page I've a dropdown list. The items to select are short names for default text parts. Based on the id or name, I want to show the default text part in a textbox.
#CustomProductText is my textbox where the content should be placed (code not posted).
I've also tryed it with #: and statement but that did not work.
What am I doing wrong or maybe its not even possible what I'm trying to do.
As an alternative I've added a action to my controller to get the text form there. Below the code:
<script type="text/javascript">
$('#DefaultText').change(function () {
var id = parseInt($('#DefaultText :selected').val());
$.post("Categories/GetDefaultText", { Id: id }, function (data) {
alert(data);
});
//$('#CustomProductText').val(text);
});
</script>
controller code:
[HttpPost]
public ActionResult GetDefaultText(int id)
{
using( var context = new MyContext() )
{
var text = context.DefaultText.First( d => d.Id == id ).Text;
return this.Content( text );
}
}
This doesn't work. The action doesn't get hit in debug mode.
regards,
Daniel

The $.post that is not working for you, you should prefix the url with / sign and it will be hit as expected:
$.post("/Categories/GetDefaultText", { Id: id }, function (data) {
alert(data);
});
As for the razor solution, you can't use javascript variables in the razor code as it's not a scripting language. What razor does is simply rendering the strings (be it html or javascript or anything) into the page.
To do what you want you either need to request the server to pass the text to your page or render all the texts you have in the page and then access this rendered content in your javascript.

AngularJS --> Select requires to clicks to visually change

I'm using the following HTML and am having issues when a user selects from the dropdown box. The issue is that when you click the first time, you can see the variable change through a console log, but visually the item remains blank. If I select the item again, it will then visually show.
Here's my HTML>
<div class="section">
<select ng-model="companyInfo" ng-change='getCompany(companyInfo)'
ng-options="company.name for company in list">
</select><br>
</div>
I have a feeling its a real rookie mistake, but I can't figure it out!
Any help would be greatly appreciated.
EDIT --
Thanks for the quick replies! Should have given getCompaniesList
$scope.getCompany = function(company) {
console.log("companyInfo passed", company);
internalClientService.getCompany(company.name)
.then(function(companyRecord){
console.log("returning record from getCompany service", companyRecord);
$scope.currentCompany = companyRecord[0].name;
$scope.currentCompanyId = companyRecord[0].companyid;
getFarmList(companyRecord[0].farms);
});
};
var getFarmList = function(farmIdArray){
$scope.farmsList = [];
internalClientService.getFarms(farmIdArray)
.then(function(farmNames){
console.log('the farmNames returning', farmNames);
for (var i = 0; i<farmNames.length; i++){
$scope.farmsList.push(farmNames[i].name);
}
});
};
The internalCLientService is a simple HTTP request.
What do you think?
Thanks,
B

Mixing JavaScript and Scala in a Play template

I'm not sure how this is done. I could hard code the route I'm trying to use, but I'd like to do this the right way.
I have a dropdown that needs to load a new page on change. Here's basically how I'm trying to do it (I've tried a few variations of this):
#getRoute(value: String) = #{
routes.Accounts.transactions(Long.valueOf(value))
}
<script type="text/javascript">
$(function() {
$("select[name='product']").change(function() {
location.href = #getRoute($(this).val());
}).focus();
$('a.view.summary').attr('href', "#routes.Accounts.index()" + "?selectedAccountKey=" + $('select[name=product]').val());
});
</script>
This produces a identifier expected but 'val' found exception. I also tried surrounding it in quotes, but that causes a [NumberFormatException: For input string: "$(this).val()"]
So how the heck do I insert a value from JavaScript into a Scala function?
Edit
Here's my solution, inspired by the accepted answer. This dropdown is defined in a tag that's made for reuse by different components, and the base URL is different for each component. The way to achieve this was to pass a function that generates a URL based on an account key into the dropdown:
#(accountList: List[models.MemberAccount],
selectedAccountKey: Long,
urlGenerator: (Long) => Html
)
<select name="product">
#for(account <- accountList) {
#if(account.accountKey == selectedAccountKey) {
<option selected="selected" value="#urlGenerator(account.accountKey)">#account.description (#account.startDate)</option>
} else {
<option value="#urlGenerator(account.accountKey)">#account.description (#account.startDate)</option>
}
}
</select>
<script type="text/javascript">
$(function() {
$('select[name=product]').change(function() {
location.href = $(this).val();
});
});
</script>
Then you can define a function like this to pass in:
#transactionsUrl(memberAccountKey: Long) = {
#routes.Accounts.transactions(memberAccountKey)
}
#accountsDropdown(transactionDetails.getMemberAccounts(), transactionDetails.getMemberAccountKey(), transactionsUrl)

You need a way of storing all URLs in the page, e.g.
<option value="#routes.Accounts.transactions(id)">Display</option>
Then onChange, you can:
$("select[name='product']").change(function() {
location.href = $(this).val();
});