Develop Reference

element.$server is undefined when passing data from java to javascript in vaadin 14

I'm trying to interact between Vaadin and amcharts. Basically I need to draw a map using amcharts libraries, and when I click on the map I need to send back information about the click to Java. My problem is that I can't figure out how to properly interact between the two, with the documentation showing very simple examples.
In the vaadin docs it shows an example like:
getElement().executeJS("jsMethodName($0)", getElement());
and then to send back data to Java:
element.$server.javaMethodName(args);
My problem is that I can send from Java to JS correctly, and the element is loaded correctly. But when I do element.$server.javaMethodName(), element.$server is always undefined. I don't understand if I'm missing something or if I dind't understand the correct way to use this.
This is my Java method:
#ClientCallable
private void clickBullet(String area) {
log.error("Clicked area: " + area);
}
and this is the call from JS:
function clickBullet(name, element) {
if(element !== null){
element.$server.clickBullet(name);
}
else {
console.log("element is null");
}
}
Note that element is not null, it is correct.
What am I doing wrong?

How to read ALT Codes using jQuery autocomplete

I'm working in a project and I'm facing a problem. I have some client stored in database, lets say one of them is Novák. Now I'm using jQuery (autocomplete), in order to get the clients in the client text field when I want to search. The problem is that, I'm geting Nov& #225;k instead of Novák. I have searched for an answer but could not find the correct one.
<script>
var availableWorkers = new Array();
#foreach(var w in selWorkers) {
var worker = w.fullName;
#:availableWorkers.push(#worker);
}
$(".workerTag").autocomplete({
source: availableWorkers
});
</script>
So, I think I have to add something here:
#:availableWorkers.push(#worker);
Thank you. All the best.

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 clear filtering, sorting and paging on a webdatagrid on client side?

I have a webdatagrid which retains data on searching in text box. I have noticed when I filter/page/sort the data and before clearing any of these I make a new search then the new search results retains previous filter/page/sort condition. I am not clearing it before reloading the page. I have search method on client side and I am using following code which does not work:
function btnSearch_click(sender, evntArgs){
var grid = $find('<%= grid1.ClientID %>');
grid.get_behaviors().get_filtering().clearColumnFilters();
grid.get_behaviors.get_sorting().clearColumnSorting();
grid.get_behaviors.get_paging().clearPaging();
}
This code is incorrect.

Since my grid loads on pressing the search button. I used the following on the server side:
if (search == "True")
{
var filtering = grid1.Behaviors.Filtering;
grid1.Behaviors.Sorting.SortedColumns.Clear();
grid1.Behaviors.Paging.PageIndex = 0;
grid1.Behaviors.Filtering.ClearBehaviorColumnInfo();
grid1.Behaviors.Filtering.ColumnFilters.Clear();
filtering.FilterType = Infragistics.Web.UI.GridControls.FilteringType.ExcelStyleFilter;
grid1.Behaviors.Filtering.ApplyFilter();
}
I wanted to implement excel style filter and Infragistics had no way to reproduce excel filter after clearing it I had to apply row type filter first and then change the filter type to excel type.

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.