I stumbled upon quite an annoying issue, and I hope you might be able to shed some light on this.

What I'm trying to do is simple:

Bind a page to a "pagecreate" event. When the method is called, select element/s (in this case - a button) and change its value.

After changing the value, I verified that the value was changed (when debugging), but since jquery adds <span> for the button, which holds the old value - the UI was not changed at all.

Here's the code:

2. init : function() {
3. $('[data-role="page"]').live('pagecreate', function(e) {
4. //Localization.localize($('#main-page').find('[i18n]'));
5. Localization.localize(page.find('[i18n]'));
6. });
7. },
8. 
   
9. localize : function (page) {
10.      page.each(function(){
11.          elem = $(this);
12.          elem.val("My Test");
13.      });
14. }
15. 
    

Note that the init() function is called before onReady().

I am aware of the "refresh" option (e.g.:  myselect.selectmenu("refresh"); ),

but I see several flaws in using it:

1. My engine should go over and change numerous types of elements, and not all elements support refresh.

2. The way to use this is rather odd. Meaning, I can't go over all these elements, and just activate something

like: elem.refresh(). I actually have to check the type of each element, and activate a specific method for each one.

e.g.: selectmenu("refresh") for selects, and slider("refresh") for sliders.

I have no idea why this was implemented like that.

Any ideas on solving this?

Thanks in advance,

Alon