Jquery tabs not working inside of dialog -


i'm using jquery dialog , want integrate tabs inside, tabs not working. on page has link open dialog, have jquery loaded. jquery doe not seem loaded within dialog though.

do need include inline javascript script tags again? doesn't dialog inherit jquery library page beneath it?

edit:

here loading dialog:

<script type="text/javascript">   $(function() {     $("#admin").tabs();   }); </script> <div id="admin">   <ul>     <li><a href="#tab1">tab 1</a></li>     <li><a href="#tab2">tab 2</a></li>     <li><a href="#tab3">tab 3</a></li>   </ul>    <div id="tab1">     tab1   </div>    <div id="tab2">     tab2   </div>    <div id="tab3">     tab3   </div> </div> 

seemed work ok me, you're going need post code if need further assistance. thing had specify increased height , width dialog contents displayed better.

the complication can think of if you're loading contents of dialog via ajax, $(document).ready() isn't going initialise tabs properly.

jsfiddle example: http://jsfiddle.net/geekman/9wbjt/3/

$(document).ready(function() {     $('#tabs').tabs();     $('#modal').dialog({         height: 500,         width: 600,     }); }); 

loading dialog contents dynamically

this edit, based on additional information you've provided.

so basic idea this:

  1. click link/button, fire off code grab content dialog
  2. hopefully code have allows pass what's known callback function. can specify function automatically called once content has finished loading (or whatever other task).
  3. in callback function, initialise tabs , display dialog.

so this:

<button type="button" id="my-link">load me!</button> <div id="dialog">     <div id="dialog-content">     </div> </div>   $(document).ready(function() {     $('#my-link').click(function () {         //begin loading content it.         //in case i'm using ajax because it's 1 of common ways dynamically load content in javascript         $.get('http://url-to-your-content.com/my-template', '',             //we can use anonymous function our callback function, or define seperately call here.             //$.get() call it, , put contents of my-template in result variable use.             function (result) {                 //insert result div id dialog-content (i'm assuming fetched data html).                 var dialog_content = $('#dialog-content');                 dialog_content.html(result);                 //now, render html in dialog-content jui tabs                 dialog_content.tabs();                 //how display dialog box                 $('#dialog').dialog();             }, 'html');     });      $('#tabs').tabs();     $('#modal').dialog({         height: 500,         width: 600,     }); }); 

Comments

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

c++ - Correct method for redrawing a layered window -

java.util.scanner - How to read and add only numbers to array from a text file -