Develop Reference

Django: populate the field based on previous field value - missing the last step to make it work

Like many, I want to populate a field in a django form based on what is selected in another field. I've read alot of answers with javascript(I struggle in javscript, so that's where I'm having trouble with the exemples), and I almost got it working, but the last step(updating the field itself) isn't working so I'd love some help with that part.
Here are the 2 fields. The first fieldthat gets populated from a query and is located in a div named #merch in the form
merchandise = forms.ModelChoiceField(label='Merchandise', queryset=Merchandise.objects.all(),
merch_price = forms.DecimalField(label='Price', min_value=0, max_value=800,
initial='0.00',decimal_places = 2, max_digits=10)
Upon selection, the second field(div named #price) should then display the price based on the merchandise selected. I created the view for the ajax request:
def check_item_price(request):
if request.method == "GET":
item = request.GET.get('item', '0')#the zero as default doesn't seem to work. To verify
price = Merchandise.objects.get(id = item)
return JsonResponse(price.item_price, safe=False)#is it safe to turn safe off?
and the url
url(r'^_item_price', views.check_item_price, name='_item_price' )
Calling the url manually works great, it returns the price in json format
And here is the javascript that is in the html form. The first part works, upon change it calls the url and a json object is returned, but the second part that should update the second field isn't working. I admit my lack of knowledge in javascript is probably at fault here. I tried many variations based on examples, none worked for me.
<script type="text/javascript">
jQuery(document).ready(function() {
$('#merch').change(function() {
var item = $(this).find(':selected').val();
$.getJSON('/classes/_item_price/',{item:item},
function(data) {
$('#price').append("<option value=" + data.value + "></option>");
});
});
});
</script>
Any pointers on what to fix in the javascript?
Thanks!

After letting it marinate in my head for 2 months, I went back to it and finally made it work. Here is the right code
jQuery(document).ready(function() {
$('#merch').change(function() {
var item = $(this).find(':selected').val();
$.getJSON('/classes/_item_price/',{item:item},
function(data) {
document.getElementById('id_merch_price').value=data;
});
});
});
</script>
First, the ID wasn't precise enough, but also the way of updating it wasn't the right one it seems. I truly feel lost anytime I have to do research on javascript or jquery. So may ways to do the same thing, it's almost impossible to learn for a casual coder like me.

How to get selected row data from Vaadin Grid with polymer?

I am trying to get the selected row data form vaadin grid using polymer. But I am not able to get.
Here is the my code:
this.mileageGrid = this.$$("#mileageSectionGrid");
this.mileageGrid.addEventListener('selected-items-changed', function() {
var selected = this.mileageGrid.selection.selected();
this.selectedRowData = this.mileageGrid.getSelectedRow();
this.selectedRowData = this.mileageGrid.selection.getSelectedRow();
if (selected.length == 1) {
detailsOpenIndex = selected[0];
this.callback(detailsOpenIndex);
//this.fire("change-mileage", this.mileage);
}
}.bind(this));
I didn't get any idea after searching from google and vaadin grid document also.
Can anybody tell me, how to get selected row data?

These two lines seem to be incorrect, and look more like something from the Vaadin Java framework API:
this.selectedRowData = this.mileageGrid.getSelectedRow();
this.selectedRowData = this.mileageGrid.selection.getSelectedRow();
I think those are probably causing errors in the browser and any following JavaScript is not working. Check for any errors in your browser’s console.
Otherwise I can’t spot any issues in your code (I’m just not sure if you’ve declared detailsOpenIndex and this.callback outside the visible code).

Reading data from sqlite using sql.js

I am new with java-script, it might seems a stupid question, but I tried a lot to get the right result, but still fail... I have to read and write data in sqlite file, and I found this library which is described as a port by the developer, https://github.com/lovasoa/sql.js. Please see my code below:
First, I am selecting a local file via this HTML
<input type="file" id="check" onchange="working(this.files)">
The js file behind this is:
function working(data) {
//adding database
var sql = window.SQL;
var db = new sql.Database(data);
//writing a query
//read existing table called propertystring
var query = "SELECT * FROM propertystring";
var result = db.exec(query);
console.log(result);}
I am trying to debug using Google chrome console, its saying
Uncaught Error: no such table: propertystring
Although, I have entered in my sqlite database this table and its showing me in sqlitemen The description of table is as below:
-- Describe PROPERTYSTRING
CREATE TABLE "propertystring" (
"sValue" TEXT,
"TypeID" TEXT
)
INSERT INTO propertystring (sValue, TypeID) VALUES ("yes its working", "71")
I hope, its very simple thing and any person using sql.js can simple answer me.

How to work with Interlization concept in javascript or jQuery

In my project i am using Interlization by using spring mvc it's Working fine .But I want to show some alret() message to end user according to Selected Language .How i do this any one help me.I am using hidden Fields in my view layer but some performance issue is occur so any way to read properties file data by using javascript or jQuery

You can use nested objects. For example:
// Init a dictionary
var messages = {
en : {},
es : {}
};
// Populate
messages.en['welcome'] = 'welcome';
messages.es['welcome'] = 'bienvenido';
// Test
var lang = 'es';
alert(messages[lang]['welcome']);

Databinding to Windows 8 ListView

I'm having massive problems with databinding to a ListView in a Windows 8 app using Javascript.
Inside the "activated" event on default.js I have written some code to get some data from a web service and push it into an array. This bit works OK and the array is populated.
The problem I have is that the app won't recognise the data. I have this code in a page called inspections.html:
data-win-options="{itemTemplate: select('#imageTextListCollectionTemplate'),
itemDataSource: dataList.dataSource,
layout: {type: WinJS.UI.ListLayout}}
and then in the "activated" event I declare:
var dataList = new Array();
and push the data from the web service into this array. But at runtime I get an error that says something along the lines of "can't find dataSource on undefined dataList".
I've done some of the examples on the MS website and in one of them it creates a dummy dataset and references it from a namespace. I kinda think that what I'm missing here is a namespace too but I don't know what the namespace for default.js is. Or maybe I'm wrong and it's something totally different.
Please help - this is so fundamental (and should be easy) but I can't get my head around it.

Do you want to create datalist in HTML or javascript?
It seems you want to create it from JavaScript. Assuming that you have already pushed your data into array from your webservice, you only need to call:
var dataList = new WinJS.Binding.List(array);
now accessing dataList.dataSource is perfectly valid.
Also, to create the datalist you don't always need an array. You could probably start with an empty list and then keep inserting data directly into the data list from web services, like:
var dataList = new WinJS.Binding.List([]);
dataList.push(value1);
dataList.push(value2);
...
Hope it helps. Let me know if you have any more questions.

If you are getting troubled by assigning datasource in HTML side
Prefer js side like
var list = new WinJS.Binding.List(array here);
listView.itemDataSource = list.dataSource;
by using this you can easily go through the data which you are binding to ListView.