javascript - selectmenu ('refresh', true)

Question

I get form from zend framework site and put it in response in new file in function written by jquery mobile, but I get this error:

uncaught exception: cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh' .

Code of function this file:

     function addItem(id) {
        $.ajax({
            url:'http://zf.darina.php.nixsolutions.com/order/index/create-order-mobile',
            dataType:"jsonp",
            data:{id_good:id},
            success:function (resp) {

                console.log(resp);
                $('.product-table').empty();

                $('.product-table').append(resp.prod);
                $('.product-table').append(resp.form);
                $('.add-order-btn').button();

                $('.mob-size').selectmenu('refresh', true);

                $('#block').page();
            }
        })
    }

score 46 · Accepted Answer

Force initialize the selectmenu(s) first:

$('.mob-size').selectmenu(); // Initializes
$('.mob-size').selectmenu('refresh', true);

or use this for short

$('.mob-size').selectmenu().selectmenu('refresh', true);

score 5 · Accepted Answer

In my case, if I was not initializing the select before invoking the 'disable' method I got the error, while if I was initializing it, the select didn't disable but duplicate itself - I tried to select the object by TAG NAME instead of by CLASS or ID NAME,

$('select').selectmenu('disable');

instead of

$('.select-class-name').selectmenu('disable');

and it worked without forced initialization

score 4 · Accepted Answer

you do this in your custom refresh delegation function:

var w = $("#yourinput");
if( w.data("mobile-selectmenu") === undefined) {
  // not initialized yet, lets do so
  w.selectmenu();
}
w.selectmenu("refresh",true);

according to enhancement resolution here

score 0 · Accepted Answer

I found the same problem, but a more involved solution. When jqm wraps the select element, it puts it in a <span> element with the same class list as the select element. I changed my reference to it so that instead of reading:

row.find(".selectCompletion").selectmenu("disable");

it now reads:

row.find("select.selectCompletion").selectmenu("disable");

Specifying that jquery should only find the select element matching the class name, rather than all elements in .row that match the class name, solved the problem.

score 0 · Accepted Answer

This happened to me when cloning existing select element in order to duplicate the original section multiple times.

Calling 'refresh' for the original element, worked fine, while calling it for the cloned sections was leading to the error appearing in the question.

However, calling selectmenu() was causing a 'vandalisation' to the form, as can be seen in the following image:

Explanation: top = original. bottom = vandalised cloned element right after calling selectmenu.

Solution:

The following code solved this vandalisation problem:

cloned_elem.find('select[name=MyClass]').selectmenu().selectmenu("destroy").selectmenu();

This is not an ideal solution because we must call the first selectmenu() in order to call selectmenu("destroy"), so I would be glad to hear of a cleaner solution.

javascript - selectmenu ('refresh', true)

5 回答 5

Related

Reference