We Keep Coding

L20n.js: localize dynamically created strings

In my app I can localize most of strings via tags, as it is described in l20n.js docs. But sometimes I have to localize dynamycally created strings. Like: document.getElementById(id).innerHTML = "some text";
I use Polymer and custom web components, so the main goal is to create one function for any localization case.
If i try document.l10n.get(string);, I get TypeError: document.l10n.get is not a function.
What is the best way to do it? Could not find the solution in official docs.

Since document.l10n is an instance of the L20n's View class, you can use the formatValue and formatValues methods for your use-case. Please see the documentation for details.
Both methods return promises so you'll need to do something like the following:
document.l10n.formatValue('hello', { who: 'world' }).then(
hello => document.getElementById(id).textContent = hello
);
You can assign to textContent or innerHTML. Keep in mind that L20n allows for HTML in translations and it only sanitizes them when using the declarative data-l10n-id approach. So if you want to manually assign to innerHTML you might want to make sure you trust the content of the translations. In the future I'd like to add a special API to apply translations to DOM elements using the same sanitization as the declarative method (bug 1228021).

Howto: generic test to see if widgets call this.inherited succesfully?

I maintain a custom library consisting of many dijit widgets at the company I work at.
Many of the defects/bugs I have had to deal with were the result of this.inherited(arguments) calls missing from overriden methods such as destroy startup and postCreate.
Some of these go unnoticed easily and are not always discovered until much later.
I suspect I can use dojo\aspect.after to hook onto the 'base' implementation, but I am not sure how to acquire a handle to the _widgetBase method itself.
Merely using .after on the method of my own widget would be pointless, since that wouldn't check whether this.inherited(..) was inded called.
How can I write a generic test function that can be passed any dijit/_WidgetBase instance and checks whether the _widgetBase's methods mentioned above are called from the widget when the same method is called on the subclassing widget itself?
Bottom-line is how do I acquire a reference to the base-implementation of the functions mentioned above?

After reading through dojo's documentation, declare.js code, debugging, googling, debugging and hacking I end up with this piece of code to acquire a handle to a base method of the last inherited class/mix-in, but I am not entirely happy with the hackiness involved in calling getInherited:
Edit 2 I substituted the second param of getInherited with an empty array. While I actually get a reference to the method of the baseclass using aspect doesn't work. It appears this approach is a bust.
require(['dijit/registry','dojo/_base/declare','mycompany/widgets/widgetToTest'],
function(registry,declare,widgetToTest)
{
var widget = registry.byId('widgetToTestId');
var baseStartup = getBaseMethod(widget,'startup');
function getBaseMethod(widget,methodName){
return widget.getInherited(methodName,[]);
}
//This is the method body I want to use .after on to see if it was called, it returns the last overriden class in the array of inherited classes. (a mixin in this case, good enough for me!)
alert(baseStartup);
});

I have given up trying to use dojo/aspect.
I have instead opted to modify the code of our custom base widget to incorporate snippets such as the one below. They are automatically removed when creating a release-build in which console-calls and their content are removed:
console.log(
function(){
(this._debugInfo = this._debugInfo|| {}).postCreate=true;
}.call(this)
);
A simple method in boilerplate code I added near the unittests is available so that I can call it on all mycompany.widgets.basewidget instances in their respective unittests.

Control references in jQuery

function eegetdropdownvalue_str(ctl){return ctl.selectedIndex>=0&&ctl[ctl.selectedIndex]?ctl[ctl.selectedIndex].value:''}
The above function is called with
co.p1A10=eegetdropdownvalue_str(document.formc.p1A10);
I want to switch the call over to jQuery to drop the document.form reference however doing this
co.p1A10=eegetdropdownvalue_str($('p1A10'));
Does not reference the control correctly - How should I do this?

There's two things wrong with your code.
First, $('p1A10') references nothing.
jQuery selectors work almost identically (if not completely identically) to the way css works.
So, just ask yourself how you would reference the object(s) in question in CSS and you're half way there.
I'm assuming that p1A10 is the name or id of an object. Since we're using CSS/jQuery syntax, this should be an id, although you can select by other attributes such as $("select[name='p1A10']") .
To reference an object by ID we use the # character (again, just like in CSS). So we can select your node via $('#p1A10').
The second problem is that your function is expecting a DOM object not a jQuery object. To keep your code intact, we need to say $('#p1A10')[0] where 0 is the first element within the collection of jQuery elements.
I've provided two examples to explain this a little better. One uses your existing infrastructure and one replaces it.
http://jsfiddle.net/TD6Uu/5/
Hope it helps.

Given a form with id formc and a select with name p1A10 you could e.g. use:
o.p1A10 = eegetdropdownvalue_str($('#formc select[name="p1A10"]').get(0));
If this doesn't do it, please provide use with the exact HTML structure

jQuery Multiple ID selectors

Here's a snippet of the start of my code:
var myUpload = $("#upload_link").upload({bla bla bla
Basically what I'm trying to do is make the same call with a few different ID's...
I would have assumed this would work but it doesn't:
var myUpload = $("#upload_link,#upload_link2,#upload_link3").upload({
Any ideas?

Try this:
$("#upload_link,#upload_link2,#upload_link3").each(function(){
$(this).upload({
//whateveryouwant
});
});

If you give each of these instances a class you can use
$('.yourClass').upload()

You can use multiple id's the way you wrote:
$('#upload_link, #upload_link2, #upload_link3')
However, that doesn't mean that those ids exist within the DOM when you've executed your code. It also doesn't mean that upload is a legitimate function. It also doesn't mean that upload has been built in a way that allows for multiple elements in a selection.
upload is a custom jQuery plugin, so you'll have to show what's going on with upload for us to be able to help you.

Make sure upload plugin implements this.each in it so that it will execute the logic for all the matching elements. It should ideally work
$("#upload_link,#upload_link2,#upload_link3").upload(function(){ });

If all your elements starting with upload_ in its id have the same purpose or syntax you could try and use the following:
$("*[id^='upload_']").each(function() {
$(this).upload()
});
This way you don't have to specify every single element in the selector.

it should. Typically that's how you do multiple selectors. Otherwise it may not like you trying to assign the return values of three uploads to the same var.
I would suggest using .each or maybe push the returns to an array rather than assigning them to that value.

That should work, you may need a space after the commas.
Also, the function you call afterwards must support an array of objects, and not just a singleton object.

ExtJs 4, is there a way to find control? (not by "id")

I have button with id = 'someid', i can find it by Ext.getCmp('someid')...
Is there a way to set some kind of "extraId" to that button, and find that button by "extraId'?

The question is where you want to search to get your item.
Another way could be the itemId.
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with Ext.getCmp, use itemId with Ext.container.Container.getComponent which will retrieve itemId's or id's. Since itemId's are an index to the container's internal MixedCollection, the itemId is scoped locally to the container -- avoiding potential conflicts with Ext.ComponentManager which requires a unique id.
Source and further documentation: http://docs.sencha.com/ext-js/4-0/#/api/Ext.AbstractComponent-cfg-itemId
The ComponentQuery (mentioned by wombleton) is also a good way but maybe not as performant as the itemId.

You can search for it by doing an Ext.ComponentQuery.
Example that will work in the console on the linked page:
Ext.ComponentQuery.query('button[text=OK]')
You can replace text=OK with the attribute you are searching for.

I don't have access to the ExtJS 4 API docs, but I know that in 3.X and previous verions have some other ways of getting references to your compoents without the use of the DOM ID.
If your components are part of a form or form panel, you should have access to a method called findField(). It is inherited from Basic Form. This method can take an id, dataIndex, name, or hiddenName to get a reference to your component.
There is also a helper method called findByType(xtype) that you can use to try and find your buttons. Another option would be to extend the button you use to place a unique property that you can use as a reference.

An alternative to id is itemId and it is limited to the scope of the container in which it is defined. So, in this case, there is not need to define globally unique itemId as done in case of id. We can use component query to get the component object having the itemId. Please follow this link where i have posted about how to use itemId and what is its benefit.
http://jksnu.blogspot.in/2012/11/use-itemid-instead-of-id.html