selectmenu ('Refresh') stürzt mit "Uncaught Typeerror"

Question

auf einer Wordpress-Website, die ich jQuery 3.1.0 und jQuery UI 1.11.4 von Google CDN bin mit:

function my_enqueue_scripts() 
{ 
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css'); 
    wp_deregister_script ('jquery'); 
    wp_deregister_script ('jquery-ui'); 
    wp_deregister_script ('jquery-migrate'); 

    wp_enqueue_style('jquery-ui-smoothness', '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css'); 
    wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js'); 
    wp_enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js'); 
    wp_enqueue_script('pixi-script', '//cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js'); 
    wp_enqueue_script('utils-script', '/words/Utils.js'); 
    wp_enqueue_script('small-tile-script', '/words/SmallTile.js'); 
    wp_enqueue_script('big-tile-script', '/words/BigTile.js'); 
    wp_enqueue_script('words-script', '/words/Words.js'); 
} 

Und wenn ich erstelle jQuery UI selectmenu und versuchen dann zu refresh es mit dem folgenden Testcode -

HTML:

<select id="gamesMenu"> 

JavaScript:

"use strict"; 

jQuery(document).ready(function($) { 

    console.log('selectmenu 1'); 
    $('#gamesMenu').selectmenu({ disabled: true }); 
    console.log('selectmenu 2'); 
    $('#gamesMenu').selectmenu('refresh');   // THIS CRASHES 
    console.log('selectmenu 3'); 
}); 

dann leider nicht mit:

jQuery.Deferred exception: Cannot read property 'eq' of undefined TypeError: Cannot read property 'eq' of undefined 
    at _getSelectedItem (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:12513:24) 
    at ._getSelectedItem (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:415:25) 
    at refresh (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:12362:40) 
    at .refresh (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:415:25) 
    at HTMLSelectElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:508:39) 
    at Function.each (http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js?ver=4.5.3:368:19) 
    at jQuery.each (http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js?ver=4.5.3:157:17) 
    at jQuery.$.fn.(anonymous function) [as selectmenu] (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:494:9) 
    at HTMLDocument.<anonymous> (http://slova.de/words/Words.js?ver=4.5.3:400:25) 
    at mightThrow (http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js?ver=4.5.3:3508:29) undefined 

die in 1.11.4/jquery-ui.js den folgenden Code verweist:

_getSelectedItem: function() { 
    return this.menuItems.eq(this.element[ 0 ].selectedIndex); 
}, 

Hier der Screenshot in Google Chrome-Browser für Mac:

Wie bitte beheben oder umgehen?

Um mehr Kontext in meinem wirklichen JavaScript-Code gibt ich JSON-Daten über WebSocket-Verbindung wiederholt erhalten und das HTML-Auswahlmenü aktualisieren muß (und damit selectmenu('refresh') zu nennen:

function updateMenu() { 
     var yourGroup = ['<optgroup label="YOUR TURN">']; 
     var hisGroup = ['<optgroup label="HIS TURN">']; 

     for (var game in games) { 
       var myturn = (game.played1 < game.played2); 
       if (myturn) { 
         yourGroup.push(
           '<option value="' + 
           game.gid + 
           '">Game #' + 
           game.gid + 
           '</option>' 
         ); 
       } else { 
         hisGroup.push(
           '<option value="' + 
           game.gid + 
           '">Game #' + 
           game.gid + 
           '</option>' 
         ); 
       } 
     } 

     yourGroup.push('</optgroup>'); 
     hisGroup.push('</optgroup>'); 

     $('#gamesMenu') 
       .empty() 
       .append(yourGroup.length > 2 ? yourGroup.join('') : '') 
       .append(hisGroup.length > 2 ? hisGroup.join('') : '') 
       .selectmenu('refresh')  // THIS CRASHES 
       .selectmenu('option', 'disabled', 
        yourGroup.length <= 2 && hisGroup.length <= 2); 
} 

$('#gamesMenu').selectmenu({ 
    disabled: true }); 
    select: function(e, ui) { 
      updateButtons(); 
      updateBoard(); 
}); 

Answer 1

Ok, so scheint es, das zu sein, . jQuery bug #10662

ich habe es workarounded durch eine <option>No games found</option> das Hinzufügen und das Auswahlmenü zu deaktivieren, wenn es keine anderen Optionen:

var noGames = (yourGroup.length <= 2 && hisGroup.length <= 2); 
$('#gamesMenu') 
     .empty() 
     .append(yourGroup.length > 2 ? yourGroup.join('') : '') 
     .append(hisGroup.length > 2 ? hisGroup.join('') : '') 
     .append(noGames ? '<option>No games found</option>' : '') 
     .selectmenu('refresh') 
     .selectmenu('option', 'disabled', noGames); 

Ich denke, eine andere Problemumgehung die 1.11.4/jquery-ui.js lokal herunterladen wäre und das Hinzufügen der Kontrolle:

if (!this.menuItems || this.menuItems.length == 0) { 

oder 1.12.x Version zu warten.