CODEWITHSUNDEEP
javascriptzend-frameworkjquery-mobileselect-menu
Dar Lym
Dar Lym

Reputation: 183

selectmenu ('refresh', true)

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

Upvotes: 17

Views: 29153

Answers (5)

ishahak
ishahak

Reputation: 6795

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.

Upvotes: 0

Michelle
Michelle

Reputation: 57

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.

Upvotes: 0

Simona Adriani
Simona Adriani

Reputation: 571

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

Upvotes: 5

comeGetSome
comeGetSome

Reputation: 1963

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

Upvotes: 4

HoffZ
HoffZ

Reputation: 7729

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

Upvotes: 46

Related Questions