jQuery UI tabs and dialog

Question

How do you add jQuery ui tabs to a dialog box on click? Here is my code.

<p>
  <a href="#" class = "premium_payer">Premium Payer:</a> 
  <span data-bind = "text: movements_owner_fullname"  id = "movements_payer_fullname" >         </span>
</p>

<script type="text/javascript">
  $('a.premium_payer').click(function payerDialog(e){
    $("#premium_payer").html('').dialog();
    $("#premium_payer").append('<p>' + "Full name: " + payer_fullname + '</p>').dialog();
    $("#premium_ayer").append('<p>' + "ID Number: " + person_id + '</p>').dialog();
            e.preventDefault();
    });
</script>

@WimOmbelets i think you mean atm? But anyway when the user clicks on the "Premium payer" href a dialog box is generated from the JS using append. — KO., Mar 18 '13 at 08:15
where do you want to create tabs? I dont see any relavent HTML or JS on which tabs needs to be constructed — Atif, Mar 18 '13 at 08:19
@AtifMohammedAmeenuddin I want the tabs to be created inside the dialog box, as mentioned in my opening statement. — KO., Mar 18 '13 at 08:22

Gregoire · Accepted Answer · 2013-03-20T08:18:54.657

<script type="text/javascript">
    $(document).ready(function(){
        $('a.premium_payer').click(function payerDialog(e){
            e.preventDefault();               
            var tabs = $("<div><ul><li><a href='#tab1'>tab1</a></li><li><a href='#tab2'>tab2</a></li></ul><div id='tab1'>Tab1 content</div><div id='tab2'>tab2 content</div></div>");
             $("#premium_payer").empty().append(tabs);
             $("#premium_payer").dialog();
             tabs.tabs();
        });
    });
</script>

EDIT if you want an existing element, hide this element with display: none.

 <div id="tabs" style="display:none">
      <ul>
             <li>
                   <a href='#tab1'>tab1</a>
              </li>
              <li>
                    <a href='#tab2'>tab2</a>
              </li>
      </ul>
      <div id='tab1'>Tab1 content</div>
      <div id='tab2'>tab2 content</div>
 </div>

<script type="text/javascript">
    $(document).ready(function(){
        $('a.premium_payer').click(function payerDialog(e){
            e.preventDefault();               
            var tabs = $("#tabs");
             $("#premium_payer").empty().append(tabs);
             $("#premium_payer").dialog();
             tabs.show();
             tabs.tabs();
        });
    });
</script>

@Gregorie Also instead of having the `var tabs` can I have that in my HTML and link it instead? — KO., Mar 20 '13 at 05:52

score 1 · Answer 2 · edited May 23 '17 at 12:23

1

May be you should consider this approach instead? jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs

The title is a bit confusing. Main idea - load content from remaining url. It's much more convenient, than building a "kind'a" template inside javascript.

edited May 23 '17 at 12:23

Community

1
1

answered Mar 18 '13 at 09:00

Wiseman

1,059
2
13
24

Thanks for the idea :) Will keep it in mind if things get too cumbersome! – KO. Mar 20 '13 at 05:56

jQuery UI tabs and dialog

2 Answers2