JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<div data-role="page" id="p1">
    <div data-role="content">
        <h1>Page 1</h1>
        <select class="pageSelect"></select>
        <a href="#p2" data-role="button">Go To Page 2</a>
        <a href="#" id="show-panel-1" data-role="button">Show Panel</a>	
    </div>
</div>
<div data-role="page" id="p2">
    <div data-role="content">
        <h1>Page 2</h1>
        <select class="pageSelect"></select>
        <a href="#p1" data-role="button">Go To Page 1</a>
        <a href="#" id="show-panel-2" data-role="button">Show Panel</a>	
    </div>   
</div>

JavaScript

function generateOptions() {
    
    var numbers = [],
        html = "";
   
    for (var i=0; i<100; i++) {
        var v = Math.random();
        numbers.push(v);
        html = html + '<option value="' + v + '">' + v + '</option>';
    };

    return {
        html: html,
        value: numbers[5]
    };
};

function addPanelToPage(page, title) {
    // Adding the panel here because in the production code it is inserted using .load
    if (page.find('div[data-role="panel"]').length == 0) {
        $(
            '<div data-role="panel" class="myPanel" data-position="right">' +
            '<h2>' + title + '</h2>' +
            '<select class="panelSelect">' +
            '</select>' +
            '</div>'
         ).appendTo(page);
        page.trigger('create');
    }; 
};

function showPanel(page) {
    
    var options = generateOptions();
    page.find('.panelSelect').html(options.html).val(options.value);
    
    // It fails here
    //page.find('.mySelect').selectmenu('refresh', true);
    
    // If I use this variant the styling is missing
    //page.find('.mySelect').selectmenu().selectmenu('refresh', true);
    
    page.find('.myPanel').panel('open');
};

$(document).on('pageshow', '#p1,#p2', function() {
    console.log("here");
    var options = generateOptions();
    $.mobile.activePage.find('.pageSelect').html(options.html).val(options.value).selectmenu().selectmenu('refresh', true); 
});

$(document).on('click', '#show-panel-1', function() {
    addPanelToPage($.mobile.activePage, 'Panel 1');
    showPanel($.mobile.activePage);  
});

$(document).on('click', '#show-panel-2', function() {
    addPanelToPage($.mobile.activePage, 'Panel 2');
    showPanel($.mobile.activePage);   
});