w2ui combo input doesn't work inside a popup

Question

Does anybody use the w2ui.com component library? There is a cool input component (called combo) that filters a list as you type.

But it doesn't seem to work when it is inside of a popup. When you type in the input box, nothing appears in the filter like it does in the demo.

Here is my javascript:

function openAddSymbolPopup() {
    w2popup.open({
        title     : 'Add Symbol',
        body      : '<div style="height: 25px"></div>' +
        '<div class="w2ui-field w2ui-span3">' +
            '<label>Symbol:</label>' +
            '<div> <input type="combo"><span class="legend"></span> </div>' +
        '</div>' +
        '<div style="height: 20px"></div>',
        buttons   : '<button class="w2ui-btn" onclick="w2popup.close();">Close</button> '+
                    '<button class="w2ui-btn" onclick="addSymbolToDatabase()">Add</button>',
        width     : 250,
        height    : 170,
        overflow  : 'hidden',
        color     : '#333',
        speed     : '0.3',
        opacity   : '0.8',
        modal     : true,
        showClose : false,
    });
}

var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', 'James Madison', 'Abraham Lincoln', 'James Monroe', 'Andrew Johnson', 'John Adams', 'Ulysses Grant', 'Andrew Jackson', 'Rutherford Hayes', 'Martin Van Buren', 'James Garfield', 'William Harrison', 'Chester Arthur', 'John Tyler', 'Grover Cleveland', 'James Polk', 'Benjamin Harrison', 'Zachary Taylor', 'Grover Cleveland', 'Millard Fillmore', 'William McKinley', 'Franklin Pierce', 'Theodore Roosevelt', 'John Kennedy', 'William Howard', 'Lyndon Johnson', 'Woodrow Wilson', 'Richard Nixon', 'Warren Harding', 'Gerald Ford', 'Calvin Coolidge', 'James Carter', 'Herbert Hoover', 'Ronald Reagan', 'Franklin Roosevelt', 'George Bush', 'Harry Truman', 'William Clinton', 'Dwight Eisenhower', 'George W. Bush', 'Barack Obama'];
people.sort();
$('input[type=combo]').w2field('combo', { items: people });

Could there be some kind of undocumented limit to the amount of html you can put in the popup body tag?

EDIT: This one works. Type in the box and see filtered list below it.

The code snippet below shows it doesn't work inside a popup.

function openAddSymbolPopup() {
    w2popup.open({
        title     : 'Add Symbol',
        body      : '<div style="height: 25px"></div>' +
        '<div class="w2ui-field w2ui-span3">' +
            '<label>Symbol:</label>' +
            '<div> <input type="combo"><span class="legend"></span> </div>' +
        '</div>' +
        '<div style="height: 20px"></div>',
        buttons   : '<button class="w2ui-btn" onclick="w2popup.close();">Close</button> ',
        width     : 300,
        height    : 200,
        overflow  : 'hidden',
        color     : '#333',
        speed     : '0.3',
        opacity   : '0.8',
        modal     : true,
        showClose : false,
    });
}

var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', 'James Madison', 'Abraham Lincoln', 'James Monroe', 'Andrew Johnson', 'John Adams', 'Ulysses Grant', 'Andrew Jackson', 'Rutherford Hayes', 'Martin Van Buren', 'James Garfield', 'William Harrison', 'Chester Arthur', 'John Tyler', 'Grover Cleveland', 'James Polk', 'Benjamin Harrison', 'Zachary Taylor', 'Grover Cleveland', 'Millard Fillmore', 'William McKinley', 'Franklin Pierce', 'Theodore Roosevelt', 'John Kennedy', 'William Howard', 'Lyndon Johnson', 'Woodrow Wilson', 'Richard Nixon', 'Warren Harding', 'Gerald Ford', 'Calvin Coolidge', 'James Carter', 'Herbert Hoover', 'Ronald Reagan', 'Franklin Roosevelt', 'George Bush', 'Harry Truman', 'William Clinton', 'Dwight Eisenhower', 'George W. Bush', 'Barack Obama'];
people.sort();
$('input[type=combo]').w2field('combo', { items: people });

.w2ui-overlay {
    z-index: 1601 !important;
}

<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css"><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://w2ui.com/src/w2ui-1.5.min.js"></script>

<button onclick="openAddSymbolPopup()">w2ui Popup</button>

Answer 1

You have a different problem then what I initially thought. You're calling the init function of the combo before you open the popup, but the entire content of the popup is created dynamically, when you open it. Which means the element you're trying to init the combo on doesn't yet exist at that time.

So you have to call the init combo function every time you open the popup, after it has rendered its contents.

Here's the fix:

function openAddSymbolPopup() {
    w2popup.open({
        title     : 'Add Symbol',
        body      : '<div style="height: 25px"></div>' +
        '<div class="w2ui-field w2ui-span3">' +
            '<label>Symbol:</label>' +
            '<div> <input type="combo"><span class="legend"></span> </div>' +
        '</div>' +
        '<div style="height: 20px"></div>',
        buttons   : '<button class="w2ui-btn" onclick="w2popup.close();">Close</button> ',
        width     : 300,
        height    : 200,
        overflow  : 'hidden',
        color     : '#333',
        speed     : '0.3',
        opacity   : '0.8',
        modal     : true,
        showClose : false,
    });
    $('input[type=combo]').w2field('combo', { items: people });
   /* ☝️ this input only exists while the popup is open. 
    *    You have to call 
    *    the above function every time you open the popup.
    */
}

var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', 'James Madison', 'Abraham Lincoln', 'James Monroe', 'Andrew Johnson', 'John Adams', 'Ulysses Grant', 'Andrew Jackson', 'Rutherford Hayes', 'Martin Van Buren', 'James Garfield', 'William Harrison', 'Chester Arthur', 'John Tyler', 'Grover Cleveland', 'James Polk', 'Benjamin Harrison', 'Zachary Taylor', 'Grover Cleveland', 'Millard Fillmore', 'William McKinley', 'Franklin Pierce', 'Theodore Roosevelt', 'John Kennedy', 'William Howard', 'Lyndon Johnson', 'Woodrow Wilson', 'Richard Nixon', 'Warren Harding', 'Gerald Ford', 'Calvin Coolidge', 'James Carter', 'Herbert Hoover', 'Ronald Reagan', 'Franklin Roosevelt', 'George Bush', 'Harry Truman', 'William Clinton', 'Dwight Eisenhower', 'George W. Bush', 'Barack Obama'];
people.sort();

<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css"><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://w2ui.com/src/w2ui-1.5.min.js"></script>

<button onclick="openAddSymbolPopup()">w2ui Popup</button>

---

Warning: If you have more than one combo input in the page, you should have two separate init combo functions. One for combos outside the popups and one run on the popup content, after you open it.

Along these lines:

function openAddSymbolPopup() {
    w2popup.open({
        title     : 'Add Symbol',
        body      : '<div style="height: 25px"></div>' +
        '<div class="w2ui-field w2ui-span3">' +
            '<label>Symbol:</label>' +
            '<div> <input type="combo" id="popup-combo"><span class="legend"></span> </div>' +
        '</div>' +
        '<div style="height: 20px"></div>',
        buttons   : '<button class="w2ui-btn" onclick="w2popup.close();">Close</button> ',
        width     : 300,
        height    : 200,
        overflow  : 'hidden',
        color     : '#333',
        speed     : '0.3',
        opacity   : '0.8',
        modal     : true,
        showClose : false,
    });
    $('#popup-combo').w2field('combo', { items: people });
   /* ☝️ init the combo inside the popup only, every time the popup opens.
    */   
}

var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', 'James Madison', 'Abraham Lincoln', 'James Monroe', 'Andrew Johnson', 'John Adams', 'Ulysses Grant', 'Andrew Jackson', 'Rutherford Hayes', 'Martin Van Buren', 'James Garfield', 'William Harrison', 'Chester Arthur', 'John Tyler', 'Grover Cleveland', 'James Polk', 'Benjamin Harrison', 'Zachary Taylor', 'Grover Cleveland', 'Millard Fillmore', 'William McKinley', 'Franklin Pierce', 'Theodore Roosevelt', 'John Kennedy', 'William Howard', 'Lyndon Johnson', 'Woodrow Wilson', 'Richard Nixon', 'Warren Harding', 'Gerald Ford', 'Calvin Coolidge', 'James Carter', 'Herbert Hoover', 'Ronald Reagan', 'Franklin Roosevelt', 'George Bush', 'Harry Truman', 'William Clinton', 'Dwight Eisenhower', 'George W. Bush', 'Barack Obama'];
people.sort();

$('input[type=combo]').w2field('combo', { items: people });
/* ☝️ init any combos you have in the page (placed outside of popups).
 */

<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css"><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://w2ui.com/src/w2ui-1.5.min.js"></script>

<button onclick="openAddSymbolPopup()">w2ui Popup</button>
<hr>
<br>This input should work and so should the one in the popup.
<br>You shouldn't init this one more than once.
<br><input type="combo">