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.
– KO., Commented Mar 18, 2013 at 8:15
where do you want to create tabs? I dont see any relavent HTML or JS on which tabs needs to be constructed — Atif
– Atif, Commented Mar 18, 2013 at 8:19
@AtifMohammedAmeenuddin I want the tabs to be created inside the dialog box, as mentioned in my opening statement. — KO.
– KO., Commented Mar 18, 2013 at 8:22

Gregoire · Accepted Answer · 2013-03-20 08:18:54Z

<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?

Community · Accepted Answer · 2017-05-23 12:23:14Z

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.

Thanks for the idea :) Will keep it in mind if things get too cumbersome!

Collectives™ on Stack Overflow

jQuery UI tabs and dialog

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related