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();
            }
        })
    }

Can you give details about this 'mob-size'. I believe this object is not initialized yet. — Subir Kumar Sao, May 11 '12 at 13:16
class Order_Form_MobileSize_Size extends Zend_Form { public function init() { $selSize = new Zend_Form_Element_Select('size', array("class" => "mob-size", 'id' => 'mob-size')); $AllSize = $orderModel->selectSize(); foreach ($AllSize as $size){ $options[$size['id']] = $size['size']; } $selSize->setLabel('Размер') ->setRequired(true) ->addMultioptions($options) ->setAttribs(array('style' => 'width:40%')); $this->addElement($selSize); return $this; } } — Dar Lym, May 11 '12 at 13:24
I must refresh this form for get jquerymobile desigin for it — Dar Lym, May 11 '12 at 13:25

score 46 · Accepted Answer · edited Apr 24 '14 at 06:52

46

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);

edited Apr 24 '14 at 06:52

Jack

73
7

answered Oct 09 '12 at 15:43

HoffZ

7,709
6
36
40

3

While this is the popular answer, it didn't work for my situation and I don't believe it will work for the OP either. This is because the `$(".mob-size")` on it's own points to the select menu AND to a `` element that JQM adds for the label. (ie. It passes the class on to the new elements it creates.) The label is NEVER initialized as a selectmenu, because it can't be! Jim's solution to use `$("select.mob-size")` instead will ensure that you don't also select the label. – psyklopz Sep 13 '15 at 08:38

Simona Adriani · Answer 2 · 2015-09-21T14:04:03.643

5

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

edited Sep 21 '15 at 14:04

answered Jun 06 '13 at 15:04

Simona Adriani

561
6
16

4

Sweet, thanks for this. After experimenting, I found I could also use $('select.select-class-name') to do same fix in jqm 1.4.5. – Jim H. Jun 05 '15 at 00:49
1

@JimH., your comment ended up being the solution for me. This is because the $(".select-class-name") on it's own points to the select menu AND a `` element that JQM adds for the label. (ie. It passes the class on to the new elements it creates.) The label is NEVER initialized as a selectmenu, because it can't be! – psyklopz Sep 13 '15 at 08:37

score 4 · Answer 3 · answered May 19 '14 at 09:02

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 · Answer 4 · answered Apr 17 '18 at 16:10

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 · Answer 5 · answered Dec 05 '18 at 09:54

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.

selectmenu ('refresh', true)

5 Answers5