how to load external page in div to tabs

[miguelsParticipant]

Hello I have seen the examples but still I can not load an external page in the tabs div.
here is my code as I think the dynamic tabs

scripts
$(‘ul’).each(function () {
$(this).find(‘li’).click(function () {
var listItem = this;
$(“#jqxtabs”).css(‘display’, ‘block’);
$(“#jqxtabs”).jqxTabs({ width: 400, height: 300, showCloseButtons: true, theme: ‘Custom’ });
cont = $(“#jqxtabs”).jqxTabs(‘length’)
if ((cont == 1) && (tabsCount == 0)) {
$(‘#jqxtabs’).jqxTabs(‘removeAt’, 0);
var clickedURL = $(‘a’, this).attr(‘href’);
$(‘#jqxtabs’).jqxTabs(‘addAt’, 0, $(listItem).text(), clickedURL);
}
else {
$(‘#jqxtabs’).jqxTabs(‘addAt’, tabsCount, $(listItem).text(), $(listItem).text());
}
tabsCount += 1;
});

HTML

• Pagina1
• Pagina2
• Pagina3

<div id=’jqxtabs’>
<ul style=’margin-left: 20px;’>

[NadezhdaParticipant]

Hello miguels,

Could you, please, re-post your code and format it by selecting it and clicking the code button in the toolbar so that your script and HTML code are more readable.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[miguelsParticipant]

ok sorry this my code in HTML

    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/Custom.css" type="text/css" />        
    <script type="text/javascript" src="../Scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxtabs.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
   <script type="text/javascript">
         $(document).ready(function () {
             var tabsCount = 0;
             var cont;
             var visible = false;
             $('#jqxtabs').on('removed', function (event) {
                 var index = event.args.item;
                 cont = $("#jqxtabs").jqxTabs('length')
                 if (visible == true) {
                     if (cont == 0) {
                         $('#jqxtabs').jqxTabs('addAt', 0, "", "");
                         $("#jqxtabs").css('display', 'none');
                         visible = false;
                     }
                     else
                     { $('#jqxtabs').jqxTabs('removeAt', index); }
                     tabsCount -= 1;
                 }
             });

             $('ul').each(function () {
                 $(this).find('li').click(function () {
                     var listItem = this;
                     $("#jqxtabs").css('display', 'block');
                     $("#jqxtabs").jqxTabs({ width: 400, height: 300, showCloseButtons: true, theme: 'Custom' });

                     cont = $("#jqxtabs").jqxTabs('length')
                     if ((cont == 1) && (tabsCount == 0)) {                        
                         $('#jqxtabs').jqxTabs('removeAt', 0);                                                                           
                         var clickedURL = $('a', this).attr('href');                         
                         $('#jqxtabs').jqxTabs('addAt', 0, $(listItem).text(), clickedURL);
                     }
                     else {
                         $('#jqxtabs').jqxTabs('addAt', tabsCount, $(listItem).text(), $(listItem).text());
                     }
                     tabsCount += 1;
                     visible = true;
                 });
             });
         });
    </script>

 <form id="form1" runat="server">
    <div>
     <ul>
        <li><a href="paginas/pagina1.aspx">Pagina1</a></li>
        <li><a href="paginas/pagina2.aspx">Pagina2</a></li>
        <li><a href="paginas/pagina3.aspx">Pagina3</a></li>
    </ul>
    <div id='jqxtabs' style='display:none;'>
                <ul style='margin-left: 20px;'>
                    <li></li>                   
                </ul>
                <div id="Contenido0">                                      
                </div>                
            </div>
    </div>
    </form>

[miguelsParticipant]

this is my code .. so completely as I have just created a pore for each menu tabs do not load the page in the content tab

[NadezhdaParticipant]

Hi miguels,

Please, find the following example which shows how to add new tab dynamically to jqxTabs. When you click on some tab the external page will be loaded.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxTabs.
            $('#jqxTabs').jqxTabs({ height: 250, width: 500, showCloseButtons: true });
            $('#jqxButton').jqxButton({
                width: '200px',
                height: 30,
            });
            $('#jqxButton').click(function () {
                $('#jqxTabs').jqxTabs('addAt', 2, '<a href="pages/ajax3.htm">tabTitle</a>', '');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxTabs' style="float: left;">
            <ul style="margin-left: 30px;" id="unorderedList">
                <li><a href="pages/ajax1.htm">ajax1</a></li>
                <li><a href="pages/ajax2.htm">ajax2</a></li>
            </ul>
            <div>
            </div>
            <div>
            </div>
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='jqxButton' value="Add new item item" />
        </div>
    </div>
</body>
</html>

If you want to show it in the tab content you should place the content in the div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxTabs.
            $('#jqxTabs').jqxTabs({ height: 250, width: 500, showCloseButtons: true });
            $("#1").load("pages/ajax1.htm");
            $("#2").load("pages/ajax2.htm");
            $('#jqxButton').jqxButton({
                width: '200px',
                height: 30,
            });
            var newContent = "<div id='3'></div>";
            $('#jqxButton').click(function () {
                $('#jqxTabs').jqxTabs('addAt', 0, 'tabTitle', newContent);
                $("#3").load("pages/ajax3.htm");
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxTabs' style="float: left;">
        <ul style="margin-left: 30px;" id="unorderedList">
            <li>Node.js</li>
            <li>Active Server Pages</li>
        </ul>
        <div id="1"></div>
        <div id="2"></div>
    </div>
    <input type="button" id='jqxButton' value="Add new item item" />
</body>
</html>

I hope the above examples will be helpful to you.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts