create a pop-up window and display a list of radio buttons using javascript

Question

I'm writing on a js file. Here is what I've tried so far. (My code is a bit long but here is what I'm trying to do)

var popUpList= $ ('<input type="radio">A<br> <input type="radio">B<br> <input type="radio">C');

var showPopUpButton=$('<button type="button">Select a Letter</button>'); 
// showPopUpButton is appended to the body
showPopUpButton.click(function() {
      alert(popUpList);
   });

When I click on showPopUpButton, the alert window shows [object Object], which I guess means that the variable popUpList is empty. I couldn't find how to do that in javascript.

I also tried with jQuery as suggested here Create a popup with radio box using js

var popUpList= $ ('<input type="radio">A<br> <input type="radio">B<br> <input type="radio">C ');
    showPopUpButton.click(function() {
          popUpList.dialog();
       });

Now, the buttons are displayed but not inside a pop-up window! And they are all superposed. Any help will be appreciated.

Thanks!

Solution

You need to wrap your <input>s in a container element, e.g.: <div>, because dialog() works on a single element.

In your code, you are asking the dialog() function to work on multiple DOM objects and thus it will fail.

Here is the code:

var popUpList = $('<div><input type="radio">A<br><input type="radio">B<br><input type="radio">C</div>');

showPopUpButton.click(function() {
    popUpList.dialog();
});

See it in action here. Try it yourself. :)

Comments

[user1499220]

Thank you for your answer @Christopher Marshall. But nothing is showing ! I do have to add id="dialog" in the html line right? Anyway, with this id or not, the pop-up window is still not showing

[Christopher Marshall]

Yes, your selector is referencing a div with the id of dialog. So <div id="dialog"></div>, Check your console for any errors and make sure you're loading jQuery UI

[user1499220]

The console is not showing any error and I do have jQuery UI. I even tried with a simple html message var test= $ ('<div id="dialog" title="Basic dialog"><p>This is a test'); It still doesn't work

[Christopher Marshall]

Checkout cychois answer :}